Верстка меню разделенного по центру логотипом

[Drunk Monkey]

Джентльмены и немногие леди, подскажите как правильно верстать список навигации разделенный логотипом?

Примеры:

 

[qpPeW]

один из вариантов

<div class="header">
<ul class="nav-left">
<li><a href="#">Первый пункт</a></li>
<li><a href="#">Второй пункт</a></li>
<li><a href="#">Третий пункт</a></li>
</ul>
<a href="#" class="logotype">LOGOTYPE</a>
<ul class="nav-right">
<li><a href="#">Четвертый пункт</a></li>
<li><a href="#">Пятый пункт</a></li>
<li><a href="#">Шестой пункт</a></li>
</ul>
</div>

.header {
position: relative;
height: 100px;
}
.header .nav-left {
float: left;
}
.header .nav-right {
float: right;
}
.header .logotype {
background: url("logo.png") no-repeat;
position: absolute;
top: 0;
left: 50%;
width: 200px;
height: 100px;
margin-left: -100px;
}

вообще много способ реализации есть )

 

[Drunk Monkey]

один из вариантов

<div class="header">
<ul class="nav-left">
<li><a href="#">Первый пункт</a></li>
<li><a href="#">Второй пункт</a></li>
<li><a href="#">Третий пункт</a></li>
</ul>
<a href="#" class="logotype">LOGOTYPE</a>
<ul class="nav-right">
<li><a href="#">Четвертый пункт</a></li>
<li><a href="#">Пятый пункт</a></li>
<li><a href="#">Шестой пункт</a></li>
</ul>
</div>

.header {
position: relative;
height: 100px;
}
.header .nav-left {
float: left;
}
.header .nav-right {
float: right;
}
.header .logotype {
background: url("logo.png") no-repeat;
position: absolute;
top: 0;
left: 50%;
width: 200px;
height: 100px;
margin-left: -100px;
}

вообще много способ реализации есть )

Этот вариант напрашивается в первую очередь, но насколько это семантическая верстка?


Понравился этот вариант предложенный на htmlbook Для просмотра ссылки Войди или Зарегистрируйся

 

[qpPeW]

тогда уж лучше так

<div class="header">
<ul>
<li><a href="#">Первый пункт</a></li>
<li><a href="#">Второй пункт</a></li>
<li><a href="#">Третий пункт</a></li>
<li><a href="#" class="logotype">LOGOTYPE</a></li>
<li><a href="#">Четвертый пункт</a></li>
<li><a href="#">Пятый пункт</a></li>
<li><a href="#">Шестой пункт</a></li>
</ul>
</div>

.header .logotype {
display: block;
width: 200px;
height: 100px;
}

 

[mindnomind]

<div class="header">
<ul>
<li><a href="#">Первый пункт</a></li>
<li><a href="#">Второй пункт</a></li>
<li><a href="#">Третий пункт</a></li>
<li><a href="#">Четвертый пункт</a></li>
<li><a href="#">Пятый пункт</a></li>
<li><a href="#">Шестой пункт</a></li>
</ul>
<img id="logo" src="logo.png" />
</div>

.header {position:relative;}
.header ul {z-index:10;}
.header ul > li:nth-child(3)
{
   margin-right:100px;
}
.header ul > li:nth-child(4)
{
   margin-left:100px;
}
#logo {position:absolute;left:50%;display:block;z-index:20;}

ну и остальные стили классически прописать. можно img в див завернуть еще

 

[qpPeW]

<div class="header">
<ul>
<li><a href="#">Первый пункт</a></li>
<li><a href="#">Второй пункт</a></li>
<li><a href="#">Третий пункт</a></li>
<li><a href="#">Четвертый пункт</a></li>
<li><a href="#">Пятый пункт</a></li>
<li><a href="#">Шестой пункт</a></li>
</ul>
<img id="logo" src="logo.png" />
</div>

.header {position:relative;}
.header ul {z-index:10;}
.header ul > li:nth-child(3)
{
   margin-right:100px;
}
.header ul > li:nth-child(4)
{
   margin-left:100px;
}
#logo {position:absolute;left:50%;display:block;z-index:20;}

ну и остальные стили классически прописать. можно img в див завернуть еще

не верно, в ваших стилях нету выравнивания лого по центру...