CODEWITHSUNDEEP
htmlcsswebnavbargraphical-logo
Lin Ti-Wen
Lin Ti-Wen

Reputation: 239

Best Practice for displaying logo larger than navigation bar

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)

Upvotes: 1

Views: 2793

Answers (1)

helion3
helion3

Reputation: 37391

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

Upvotes: 1

Related Questions