У меня есть своеобразная проблема. Я разработал следующий макет. Макет отображается в соответствии с моим желанием, но когда я проверяю заголовок div, я обнаруживаю, что logo
и navigation
divs отображаются вне выделенной части при перемещении курсора в заголовок div.
Ссылка на изображение для справки
Разве логотип и навигационный div не должны находиться внутри выделенной части, поскольку они находятся в заголовке div в коде? Или это то, что я делаю что-то неправильно.
<div id="container">
<div id="page">
<div id="header">
<div id="logo" style="float:left;" >Sample Text</div>
<div id="navigation" style="float:right">
<ul style="text-decoration:none;">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</div>
</div>
<div id="features" style="clear:both;margin-top:15px;">
<p>....Lorem Ipsum Part...</p>
</div>
<div id="footer"></div>
</div>
</div>
Я использовал следующий минимальный css
body{
background-image : url('../images/bg-body.gif');
background-repeat : repeat;
font-family : Georgia;
color : white;
}
#container{
margin : auto;
width : 960px;
}
#logo{
font: 48px 'Pacifico', Helvetica, sans-serif;
color: #FCFAFA;
/*text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);*/
}
#header{
margin-top : 20px;
}
li{
display:inline;
}
В основном вам нужно "очистить" ваши поплавки, чтобы настроить высоту контейнера. Поэтому, если вы установите
overflow: auto;
в контейнере, в вашем случае header
будет "инкапсулировать", чтобы он плавал. Вот хороший учебник, если вы хотите узнать больше.