Я работаю над стандартным заголовком/навигацией для моего сайта.Изменение свойства высоты CSS удаляет привязки?
Я начал с того, что значение «высота» CSS было 100% для элементов html, body, но это привело к неправильной компоновке.
Однако, когда я изменяю свойство высоты CSS от «100%» до «авто», макет верен, но я теряю якоря. Текст по-прежнему существует (например, «Совет», «Сделать это», «Главная», «Справка»), но привязки (организованные как элементы списка) больше не отображаются в навигации. Я больше не могу на них нажимать.
Почему это
Вот мой 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, высота тела свойство было установлено в «авто» против «10 0% ", и они были одинаковыми.
Может ли кто-нибудь пролить свет на то, как сохранить якоря в навигации при установке высоты на «авто»?
Благодарим за помощь.
и ваш HTML-код? – Salil
Что значит потерять якоря? Вы вообще не видите их на экране? Я создал тестовую страницу с фрагментом html/css выше, и я не вижу никаких проблем; может быть, проблема в другой части страницы? –
@Salil и @Dan M: Я добавил весь HTML-код заголовка/навигации и уточнил, что я имею в виду, «потеряв» якоря в вышеприведенном сообщении. – JMan