No replies
alexcarter404
Offline
newbie
Last seen: 6 years 30 weeks ago
Timezone: GMT+1
Joined: 2013-05-17
Posts: 1
Points: 2

Hi I have a header which i need to split into 5 sections:

1. Logo (2/3 width) (left)
2. Navigation Menu (2/3 width) (left)
3. User login bar (1/3 width) (right)
4. Social media bar (1/3 width) (right)
5. Basket (1/3 width) (right)

layout.jpg

The Code I have for HTML Is:

<body>
<div class="grid10" id="header">
<div class="grid6" id="logo"><a href="./index.html"><img src="./images/mainlogo.jpg" alt="Emilie Et Rose espagne"/></div>
 
<div class="grid6" id="navmenu">
<ul>
<li><a href="./index.php">HOME</a></li>
<li><a href="./boy.php">BOY</a></li>
<li><a href="./girl.php">GIRL</a></li>
<li><a href="./accessories.php">ACCESSORIES</a></li>
</ul>
</div>
 
<div class="grid3" id="userbar">
<ul>
<li>login</li>
<li>account</li>
</ul>
</div>
 
<div class="grid3" id="socialbar">
<ul>
<li>FB</li>
<li>Twitter</li>
<li>Newsletter</li>
</ul>
</div>
 
<div class="grid3" id="basket">No items in basket</div>
</div>
 
<div class="grid10" id="content1">
<div id="gallery">Gallery Here</div>
</div>
 
<div class="grid10" id="content2">
<div class="grid3">1</div>
<div class="grid3">2</div>
<div class="grid3">3</div>
</div>
 
<div class="grid10" id="footer">footer here</div>
</div>
</body>

And the code i have for CSS is:

body{
background-color:#F7F3E7;}
 
div#logo{display:inline;
}
 
div#userbar ul{
display:inline;
}
 
div#userbar li{
color:#006FB9;
font-family:arial;
list-style: none;
margin: 0;
padding: 0.25em;
}
 
div#socialbar ul{display:inline;
}
 
 
div#socialbar li{
color:#006FB9;
font-family:arial;
list-style: none;
margin: 0;
padding: 0.25em;
}
 
div#basket{display:inline;
}
 
div#navmenu ul{
padding-left:0;
margin-left:0;
padding-bottom: 6px;
margin-top:7px;}
 
div#navmenu li {
color:#006FB9;
font-family:arial;
list-style: none;
margin: 0;
padding: 0.25em;
display:inline;}
 
div#navmenu a { 
text-decoration: none; 
color:#006FB9;
font-family:arial;}
 
.grid10{width:99%; border:2px solid black;}
.grid6{width:64%; border:2px solid black;}
.grid3{width:33%; border:2px solid black;}

I cannot get the elements to align on the right of the logo and navigation menu, does anyone have any tips on how to get this to align correctly?

Thanks,
Alex