Positioning multiple section header

No replies

Fri, 2013-05-17 22:59

alexcarter404

Offline

newbie

Last seen: 7 years 12 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)

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

Tags: