Проблемы с макетом CSS (нижний колонтитул и стили UL) - PullRequest
Новая
       56

Проблемы с макетом CSS (нижний колонтитул и стили UL)

3 голосов
/ 13 июня 2011

Так что я пытаюсь закодировать свой дизайн для моего нового веб-сайта портфолио, но у меня есть несколько проблем, которые еще не решены исследованиями и часами разбивания моего лица о экран компьютера. Сейчас у меня есть две большие проблемы, хотя есть еще одна, которую я сейчас рассматриваю, хочу ли я вообще иметь дело с ней.

Первая проблема - меню. Я хочу, чтобы шрифт переходил с обычного на жирный, когда вы наводите на него курсор или когда находитесь на этой странице. Который работает. Проблема в том, что когда вы наводите курсор на него, два других элемента в меню слегка изменяются, потому что изменение веса типа выталкивает их наружу. Мои попытки пока что закончились неудачей.

Второй вопрос - нижний колонтитул. Я хочу, чтобы он оставался внизу страницы. Мои исследования позволили мне зайти так далеко, но вместо того, что я хотел, теперь он фактически остается внизу браузера, а не внизу контента. Спасибо за любую помощь, которую вы можете оказать!

Соответствующую страницу можно найти по адресу: http://personal.justgooddesign.net/draft/

Ответы [ 5 ]

1 голос
/ 13 июня 2011

У вас проблемы с плавающей точкой, так как вы не очищаете свои поплавки.

  • Ваша оболочка div # всегда будет равна высоте области просмотра.Контейнер свернут, потому что вы переместили div # слева направо, div # направо вправо, а также абсолютно позиционировали div # нижний колонтитул.Это означает, что эти div извлекаются из обычного потока документа, и впоследствии div # contaiver не «оборачивается» вокруг этих трех div (div # left, div # right и div # fotter ")
  • То же самое в случае с div # right. Div # intro и div # портфель были перемещены внутри div # right, и это не обертывание его дочерних divs.вокруг этих проблем. Я предлагаю это. Включите следующий код после последнего всплывающего элемента. 
    <div class="float_clear"></div>

div.float_clear
{
clear: both;
}

    Для меню недостаточно места, просто добавьте. 

    div#menu>ul>li
{
width: 50px;
}
1 голос
/ 13 июня 2011

Ваш нижний колонтитул перемешивается, потому что вы плаваете влево и очищаете вправо.Мое личное предпочтение для нижних колонтитулов всегда начинается с этого очень чистого метода и строится оттуда.Если вы запутались, отделите свой внутренний контент от остальной части страницы и протестируйте.

Со шрифтами вы должны думать больше как пользовательский интерфейс, чем графический дизайнер.В отличие от Indesign, Illustrator и т. Д., Шрифты и интервалы не идеальны на 100%.То, что будет отображаться в одном браузере, будет отображаться совсем по-другому в другом.Выделение шрифта в Интернете увеличит его и увеличит расстояние.Чтобы компенсировать это, настройте элементы меню на более широкий, чтобы компенсировать, затем протестируйте как сумасшедший.Если вы полагаетесь исключительно на поля и отступы, то элемент с наведенным курсором будет каждый раз перемещаться по меню.

Просто предложение, настройте свой CSS в отдельном файле и загрузите его.кэшируется, что приведет к улучшению производительности при последующих загрузках.Кроме того, вы можете сэкономить много кода, сделав один класс, чтобы прикрепить стилизацию к вашим элементам и быть внимательным к позиционированию относительно других элементов.Нет необходимости индивидуально стилизовать каждый элемент в вашем портфолио для позиционирования.

1 голос
/ 13 июня 2011

Вы можете исправить переход в меню, установив фиксированную ширину на #menu li, поэтому 

#menu li {
display: block;
float: right;
width: 40px;   //something like this.
padding: 0px;
list-style-type: none;
position: relative;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
}

EDIT:

Чтобы исправить проблему нижнего колонтитула

  1. удалить height: 600px; из правила #right

  2. добавить пробел br между #container div и #footer div

    </div>
<br style="clear:both;">
<div id="footer">
1 голос
/ 13 июня 2011

Попробуйте это исправить проблему с нижним колонтитулом? 

<p style = "clear:both">
<div id="footer">

Также 

#right {
    clear: right;
    float: right;
    height: 600px; //Remove this line
    width: 490px;
    padding: 0px;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-left: 0px;
}
0 голосов
/ 13 июня 2011

добавить переполнение: скрыто в контейнер ...

Когда у вас есть плавающее содержимое, поместите div вокруг плавающего содержимого и присвойте ему

overflow: hidden;Дисплей: блок;ширина: (некоторая ширина);

Это исправит большинство плавающих проблем

...