Вопрос

my question is:

If I want to display a 100px by 100px logo on the left of my nav bar, but my nav bar has only 50px height... How should I design the html structures and css rules ?

Right now I use:

<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 -->

Where CSS codes are:

#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;}

Is there any better way to do the trick ? (in terms of flexibility or compatibility to future modifications)

Это было полезно?

Решение

You have a few choices - set the logo to position: absolute and position it where you need it, this way it won't be constrained to it's parent's height.

Or you can try to give it negative margins and make sure that overflow for the header is not hidden

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top