Problems aligning my logo with the navigation bar
I've been sat here for 2 hours simply tring to align my logo with the navigation bar so it all fits on one line similar too http://weightshift.com/
Im trying too add this image
http://imageshack.us/photo/my-images/26/logonkg.png/
to align with the navigation bar im using which uses the following CSS, and am really stuck everytime i try to align it the nav bar goes below the header, im creating this on dreamweaver using the responsive framework, help would be greatly appreciated.
#menu {
background:#333;
height:100px;
}
#h1 {
width: 100px;
}
#menu-wrap {
margin:0 auto;
width:1200px;
}
#navigation-main {
display: inline-block;
padding:0px;
color:#fff;
font-size:24px;
font-weight:bold;
margin-bottom:5px;
float: right;
}
#navigation-main li {
float:left;
margin-right:20px;
}
#navigation-main li a {
display:block;
color:#fff;
}
#navigation-main li ul {
display:none;
z-index:0;
}
#top-nav-info {
background:#dddddd;
float:left;
width:1200px;
}
#top-nav-sec li a {
padding:0px;
display:inline;
height:42px;
color:#a19f9f;
}
With the html currently being
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">
<div id="header">
<div id="menu">
<h1> <img src="images/logo.png"> </h1>
<div id="menu-wrap">
<ul id="navigation-main">
<li><a href="">Home</a><span class="nav-sec">The Beginning</span></li>
<li><a href="">Articles</a><span class="nav-sec">Tips, Tricks, Advice</span></li>
<li><a href="">Tutorials</a><span class="nav-sec">Photoshop Techniques</span></li>
<li><a href="">Resources</a><span class="nav-sec">Fonts, freebies, wallpapers</span></li>
</ul><!--end navigation-menu-->
</div><!--end menu-wrap-->
</div>
</div>
</div>
</div>
<p> </p>
<p> </p>
</body>
Answer
To recreate the header in the example you gave you simply need to add a float: left to the logo image and float: right to the ul that contains your navigation links.
<img class="left" />
<ul class="right">
<!-- nav links here -->
</ul>
.left { float: left; }
.right { float: right; }
Here is a working jsfiddle. What were you trying to do with #menu-wrap? That is the only thing I took out because I couldnt see what you were trying to do with it and it was breaking the header.