Seeking Advice:
I am trying to incorporate a 100px by 100px logo on the left side of my navigation bar, which is only 50px in height. What changes can I make to the HTML and CSS structure for this design?
My current setup includes:
<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 -->The corresponding CSS rules are as follows:
#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;}
Does anyone have suggestions for better implementation? (Considerations include flexibility and compatibility with future modifications)