Лучшая практика для отображения логотипа больше, чем панель навигации

Question

моего вопроса:

Если я хочу, чтобы отобразить 100px на 100px логотипа слева от моей навигационной панели, но мой нав бар имеет только 50px высоту ... Как Должен ли я конструировать html-структуры и правила css?

Сейчас я использую:

<div id="header"> 
<div id="header-wrapper"> 
    <ul id="nav"> 
    <a id="logo" href="#" ></a> 
    <li><a href="#"</a></li> 
      <li><a href="#"</a></li> 
      <li><a href="#"</a></li> 
    <li><a href="#"</a></li> 
    </ul><!-- #nav --> 
</div><!-- #header-wrapper--> 
</div><!-- #header --> 

Где CSS коды:

#header { 
height: 50px; 
position: relative; 
border-bottom: 5px solid #e5dacd; 
background: #1075bc; 
margin-bottom: 60px;} 

#header-wrapper { 
margin: 0 auto; 
width: 940px;} 

#logo { 
width: 100px; 
height: 100px; 
background: url(images/logo.png) no-repeat; 
background-color: yellow; 
display: inline-block; 
*display: inline; 
zoom: 1;} 

#nav { 
display: inline-block; 
*display: inline; 
zoom: 1; 
vertical-align: top; 
margin: 16px 0 0 0;} 

Есть ли лучший способ сделать трюк? (с точки зрения гибкости или совместимости с будущими модификациями)

Answer 1

У вас есть несколько вариантов: установите логотип на position: absolute и расположите его там, где он вам нужен, таким образом он не будет ограничен его родительской высотой.

Или вы можете попробовать дать ему отрицательные поля и убедитесь, что overflow для заголовка не hidden