Итак, я пытаюсь получить макет навигации для заголовка, подобного показанному на этом рисунке http://reversl.net/demo/, но у меня возникают трудности с перемещением как навигационных ссылок, так и панели поиска, которые оба являются элементами спискав пределах того же <ul> Вот где я сейчас нахожусь на http://reversl.net/banner/ Мой HTML выглядит так
<div id="header">
<div id="wrap">
<div class="logo">
<h1>Logo</h1>
</div><!--.logo-->
<ul id="nav-primary">
<li> <input type="text" name="search" value="Search" /> </li>
<li><a href="#">Log In</a></li>
<li><a href="#">Sign up</a></li>
<li class="about"><a href="#">About</a>
</li>
</ul><!--#nav-primary-->
</div><!--#wrap-->
</div><!--#header-->
Мой текущий стиль -
#header {
width: 100%;
margin: 0 auto;
background: #666;
-webkit-box-shadow: 0 6px 6px -6px #999;
-moz-box-shadow: 0 6px 6px -6px #999;
box-shadow: 0 6px 6px -6px #999;
}
.logo {
float: left;
}
#nav-primary {
clear: both;
margin: 0;
padding: 0;
}
#nav-primary li {
margin: 0;
padding: 0;
display: inline;
list-style: none;
}
#nav-primary a {
float: right;
line-height: 1;
padding: 0 10px 0 10px;
text-decoration: none;
color: #999;
border-left: 1px solid #888;
}
#wrap {
width: 90%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px; /* Set footer height. */
}
Как вы можете видетьто, что я не смог сделать, это:
1) Переместить «и» панель поиска и навигацию вправо 2) Пусть ссылки «border-left» заполняют высоту панели навигации (возможно,показывая блок правильно?
Любой совет?