Andy17 Posted March 30, 2010 Share Posted March 30, 2010 Hey guys, I have a problem positioning my menu. Please click the link below to see my problem. Link I would like my menu to be on the right side of the logo (the light blue box) so the bottoms are aligned. To make sure you know what I mean, I made it in Paint: Now my code... HTML: <html> <head> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="logo"></div> <div id="menu"> <ul class="menu"> <li><a href="/">Forside</a></li> <li><a href="/">Forum</a></li> <li><a href="/">Links</a></li> <li><a href="/">Kontakt</a></li> </ul> </div> </body> </html> CSS: body { margin:0; padding:0; font-family: Arial, Helvetica, Verdana, Sans-serif; } #logo { height:150px; width:190px; background-color:#DDF3FF; } #menu { height:30px; background-color:#555555; margin: 0 auto; } .menu { margin:0; padding:0; font: bold 14px Arial; padding-top:6px; } .menu li { display: inline; } .menu a { color:white; text-decoration:none; padding-right:14px; } .menu a:hover { color:red; } Any ideas how to get the menu up next to the logo so the bottoms are aligned? Thanks in advance! Quote Link to comment Share on other sites More sharing options...
haku Posted March 31, 2010 Share Posted March 31, 2010 Try this: #logo { background-color:#DDF3FF; float:left; height:150px; width:190px; } #menu { //remove all styles from div#menu } ul.menu { padding-left:0; position:relative; top:120px; height:30px; margin-left:190px; line-height:30px; background-color:#555555; } Quote Link to comment Share on other sites More sharing options...
haku Posted March 31, 2010 Share Posted March 31, 2010 I should add that you don't have a doctype in your document which is a big no-no. You should add one first. You will potentially find that the code I gave above won't work once you add a doctype, but you should add one anyways as it will save you plenty of headaches much further down the road. Quote Link to comment Share on other sites More sharing options...
Andy17 Posted March 31, 2010 Author Share Posted March 31, 2010 I should add that you don't have a doctype in your document which is a big no-no. You should add one first. You will potentially find that the code I gave above won't work once you add a doctype, but you should add one anyways as it will save you plenty of headaches much further down the road. The code I posted here is only a small part of the design I am working on, so I just copied the relevant part into an HTML and CSS file and forgot to add the doctype. Thanks for the heads up, though. Your solution worked. I can always count on you, haku! Thanks! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.