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 Quote Link to comment 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. Quote Link to comment 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 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.