CSS: макет заголовка проблем управления (ul, img)

Question

Я уверен, что об этом уже спрашивали, но я не смог найти работающее решение для моей ситуации.

Я пытаюсь создать заголовок / раздел навигации для моей страницы указателя.

Заголовок имеет ширину 960 пикселей и высоту 120 пикселей.Внутри него (прямо сейчас) один img и ul с 4 li.Я пытаюсь расположить img и ul так, как я хочу, чтобы они выглядели.Я плаваю на img влево и назначил ему верхнее поле в 23 пикселя, чтобы выровнять его по вертикали так, как я хочу - так что это хорошая позиция.Проблема возникает, когда я пытаюсь расположить ул.В зависимости от примененных мною настроек float, clear, margin или padding, он будет отображаться вертикально под или над img (как если бы изображение двигало ul вверх или вниз).Изображение ниже показывает, что это происходит с CSS, который я вставил ниже:

Изображение проблемы

Это соответствующий код HTML для заголовка (довольно просто):

<div id="header">
     <img src="_images/header-name2.png" />
     <ul id="navigation">
        <li class="current"><a href="">games</a></li>
        <li><a href="">news</a></li>
        <li><a href="">about</a></li>
        <li><a href="">contact</a></li>            
     </ul>              
</div>

Это текущий CSS-код, который создает изображение выше:

body {
   margin-top: 0px;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   background-image: url(../_images/index-body-bkgd.jpg);
   background-repeat: repeat-x;
   background-color: #333;
}

#wrapper {
   width: 960px;
   margin-top: 0em;
   height: 1050px;
   margin-right: auto;
   margin-left: auto;
}
#header {
   height: 120px;
}
#header img {
   margin-top: 23px;
   float: left;
}
#header ul {
   list-style-type: none;
   padding-left: 430px;
   font-size: 1.3em;
}
#header ul li {
   display: inline;
}
#header ul li a {
   color: #000;
   text-decoration: none;
   padding-top: 10px;
   padding-right: 30px;
   padding-bottom: 10px;
   padding-left: 20px;
}

Итак, если вы расширяете верхнюю часть изображения (верхний пиксель в «d» и «k ") горизонтально, здесь находится неупорядоченный список.Если я изменю настройки поплавка, я могу сделать нижнюю часть изображения (которая буквально является нижним пикселем в «j») потолком для неупорядоченного списка.Я тоже не хочу, чтобы этот список был.Как освободить список, чтобы правильно его расположить?

Answer 1

Вот как это выглядело до того, как я изменил ваш css

, просто плавая #header div, вот так

  #header {
   height: 120px;
   float: left;
}

Переместил nav liпрямо сейчас, когда я использовал ваш код.
После: Вот как выглядит плавающий заголовок div

Иногда отсутствие плавающего родительского контейнера может привести к тому, что выглядит какстранное поведение в дочерних контейнерах, которые плавают.

Answer 2

Если вы расположите #header относительно, вы можете абсолютно точно расположить <ul> и <img /> в заголовке:

#header {
   height: 120px;
   position: relative;
}

#header img {
   margin-top: 23px;
   position: absolute;
   top: 23px;
   left: 0;
}

#header ul {
   list-style-type: none;
   font-size: 1.3em;
   position: absolute;
   top: 0;
   right: 0;
}

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

---

Описывается этот метод Абсолютное позиционирование внутри относительного позиционирования более подробно на CSS-Tricks (см. скриншот ниже).

Элемент страницы с относительным позиционированием дает вам возможность абсолютно точно позиционировать дочерние элементы внутри него.