Asim Posted June 29, 2011 Share Posted June 29, 2011 Hi guysI created a menu bar but I can't seem to center it. Here is the code:CSS CODE #Menu { padding:0px;}#Menu li { display:inline; }#Menu li a { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 20px; text-decoration: none; float: left; padding: 10px; background-color: #192653; color: #ffffff; border-bottom: 1px; border-bottom-color: #000000; border-bottom-style: solid; -webkit-transition-property: background; -webkit-transition-duration: 700ms; -moz-transition-property: background; -moz-transition-duration: 700ms; gradient:;}#Menu li a:hover { border-radius: 5px; background-color: #95A6BA; padding-bottom: 12px; border-bottom: 2px; border-bottom-color: #000000; border-bottom-style: solid; margin: -1px;} Here is the HTML CODE: <div id="navigation"> <ul id="Menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">Sitemap</a></li> <li><a href="#">Help</a></li> <li><a href="#">Contact Us</a></li></ul> </div> How I center the menu bar?Thanks Link to comment Share on other sites More sharing options...
zig zag Posted June 29, 2011 Share Posted June 29, 2011 I managed to center it, but then ended up with a small gap in-between each individual link, which I'm not sure you want.Here's the edited CSS code anyhow. #Menu { background-color: #192653; /* added a background colour to fill in the gap */ padding:10px; /* added some padding so the background colour would spread up and down */}#Menu li { display:inline;}#Menu li a { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 20px; text-decoration: none; /* float:left; */ /* Turned off float, as it wasn't allowing me to center otherwise */ padding: 10px; background-color: #192653; color: #ffffff; border-bottom: 1px; border-bottom-color: #000000; border-bottom-style: solid; -webkit-transition-property: background; -webkit-transition-duration: 700ms; -moz-transition-property: background; -moz-transition-duration: 700ms; gradient:;}#Menu li a:hover { border-radius: 5px; background-color: #95A6BA; padding-bottom: 12px; border-bottom: 2px; border-bottom-color: #000000; border-bottom-style: solid; margin: -1px;}#navigation{ text-align: center; /* centering the overall menu */} Sorry I couldn't be more helpful. Link to comment Share on other sites More sharing options...
Asim Posted June 29, 2011 Author Share Posted June 29, 2011 no problem I actually managed to fix it, you leave the code as it is except change the padding.so the padding is padding:150px; Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.