Fri, 2013-05-17 22:59
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