Я работаю над стандартным заголовком / навигацией для моего сайта.
Я начал со значения CSS "height", равного 100% для элементов HTML, body, но это привело к неправильной компоновке.
Однако, когда я изменяю свойство CSS height с «100%» на «auto», компоновка верна, но я теряю привязки. Текст все еще там (например, «Советы», «Сделать это», «Домой», «Справка»), но привязки (организованные как элементы списка) больше не отображаются в навигации. Я больше не могу нажимать на них. *
Почему это?
Вот мой CSS:
html,body {
height: auto; /* This is the only property that I'm toggling */
margin: 0;
}
body {
margin: 0;
min-width: 978px;
font: 12px/16px Arial, Helvetica, sans-serif;
color: #000;
background: #000001 url('../images/bg-body.jpg') no-repeat 50% 0;
}
#nav {
position: relative;
float: left;
margin: 0;
padding: 0 2px 0 271px;
list-style: none;
background: url('../images/sep-nav.gif') no-repeat 100% 0;
}
#nav li {
float: left;
padding: 11px 0 0 2px;
height: 35px;
width: 128px;
line-height: 22px;
font-size: 18px;
text-align: center;
background: url('../images/sep-nav.gif') no-repeat 0 -1px;
display: inline;
}
#nav li a {color: #FFFEFE;}
.....
Вот заголовок HTML:
<body>
<div id="wrapper">
<!-- header -->
<div id="header">
<!-- logo -->
<h1 class="logo"><a href="home">Site Name</a></h1>
<!-- Feedback button -->
<div class="feed-w1">
<div class="feed-w2">
<div class="feed">
<span class="l"><a href="#">Feedback, please</a></span><span class="r"></span>
</div>
</div>
</div>
<!-- Small links -->
<div class="top-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Sign out</a></li>
</ul>
</div>
<!-- Main Navigation -->
<div class="frame">
<div class="holder">
<ul id="nav">
<li><a href="#">Advice</a></li>
<li><a href="#">Do it</a></li>
<li><a href="#">Your Profile</a></li>
</ul>
<!-- Search box -->
<div class="search-form">
<form action="#">
<fieldset>
<legend class="hidden">Search Form</legend>
<input class="text" type="text" value="Search" title="Search" />
<input class="submit" type="submit" value="Search" />
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
Я сравнил вычисленный CSS в Firebug, когда свойство html, body height было установлено на «auto» против «100%», и они были одинаковыми.
Может кто-нибудь пролить свет на то, как сохранить привязки в навигации при установке высоты на "авто"?
Спасибо за вашу помощь.