colleyboy Posted July 18, 2012 Share Posted July 18, 2012 Hi, I am modifying a script which is a HTML5/Jquery drop down menu. I have done it all but cannot seem to center the menu images. Any idea what I need to edit? Nav.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML5, CSS3 and jQuery Navigation menu</title> <link rel="stylesheet" href="css/nav.css"> <!--[if IE]> <script src="scripts/html5.js"></script> <![endif]--> </head> <body class="no-js" topmargin="0" rightmargin="0" leftmargin="0"> <nav id="topNav"> <ul> <li><a href="#" title="Nav Link 1"><IMG SRC="images/homepagebutton.png"></a></li> <li> <a href="#" title="Nav Link 1"><IMG SRC="images/companybutton.png"></a> <ul> <li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li> <li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li> <li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li> <li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li> <li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li> </ul> </li> <li><a href="#" title="Nav Link 1"><IMG SRC="images/productandservicesbutton.png"></a></li> <li><a href="#" title="Nav Link 1"><IMG SRC="images/qualitybutton.png"></a></li> <li><a href="#" title="Nav Link 1"><IMG SRC="images/worldwidelocationsbutton.png"></a> <ul> <li><a href="#" title="Sub Nav Link 1">England</a></li> <li><a href="#" title="Sub Nav Link 2">France</a></li> <li><a href="#" title="Sub Nav Link 3">Sweden</a></li> <li><a href="#" title="Sub Nav Link 4">Poland</a></li> <li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li> </ul> </li> <li><a href="#" title="Nav Link 1"><IMG SRC="images/enquiriesbutton.png"></a></li> </ul> </nav> <script src="js/jquery.js"></script> <script src="js/modernizr.js"></script> </body> </html> nav.css: /* JS disabled styles */ .no-js nav li:hover ul { display:block;} /* base nav styles */ nav { display:block; margin:0 auto 0px; position:relative; background-image:url('../images/menubg.png'); font:16px Tahoma, Sans-serif; } nav ul { padding:0; margin:0; } nav li { position:relative; float:left; list-style-type:none;} nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } nav li a { display:block; padding:0px 0px; border-right:1px dashed #222; color:#eee; text-decoration:none; height:35px; } nav li a:focus { outline:none; text-decoration:underline; } nav li:first-child a { border-left:none; } nav li.last a { border-right:none; } nav a span { display:block; float:right; margin-left:5px; } nav ul ul { display:none; width:100%; position:absolute; left:0; background:#6a6a6a; } nav ul ul li { float:none; } nav ul ul a { padding:5px 10px; border-left:none; border-right:none; font-size:14px; } nav ul ul a:hover { background-color:#555; } Another thing... it appears fine in Chrome but has a border around the dashed breakers inbetween the images in IE. Any ideas please as I am a bit lost. Kind Regards, Ian Link to comment https://forums.phpfreaks.com/topic/265925-trying-to-center-a-menu/ Share on other sites More sharing options...
MarPlo Posted July 19, 2012 Share Posted July 19, 2012 Hy, Try add text-align:center; in "nav li", and "nav li a" in css. Link to comment https://forums.phpfreaks.com/topic/265925-trying-to-center-a-menu/#findComment-1362642 Share on other sites More sharing options...
mikhl Posted July 19, 2012 Share Posted July 19, 2012 Try: img{ border:0; } To get rid of the image borders Link to comment https://forums.phpfreaks.com/topic/265925-trying-to-center-a-menu/#findComment-1362654 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.