Hi, I need help in Css Navigation bar. Look at my site: http://cyrealestatetv.com/ The Navigation bar seems fine but when you drag the mouse to it, the hover image is messed up. I have tried to do everything but I can't get it fix. Please help me. Here's my CSS:
wow thats way too much unneccessory complicated coding for a little menu, first of all I would just use div's instead of li's to achieve the same design, float them to left with different class names and give them background for hover whether its div or li
Ok Here it is: the HTML : <div id="topmenu"> <div class="menuitems "><a href="index.php" title="Home Page">Home</a></div> <div class="menuitems "><a href="about.php" title="About Us">About Us</a></div> <div class="menuitems "><a href="prices.php" title="Our Prices">Our Prices</a></div> </div> Code (markup): and CSS: #topmenu a { padding: 10px 0px; } #topmenu a:link, #topmenu a:visited { color: #0486c2; text-decoration: none; } #topmenu a:hover { color: #fff; text-decoration: none; } .menuitems { float: left; padding: 0px; margin: 0px 5px 0px 0px; height: 19px; line-height: 19px; text-align: center; } .menuitems a:link, .menuitems a:visited { color: #fff; } .home { width: 40px; } .home:hover { background-image: url(../images/menu-home.jpg); color: #fff; } .about { width: 58px; } .about:hover { background-image: url(../images/menu-about.jpg); color: #fff; } .prices { width: 65px; } .prices:hover { background-image: url(../images/menu-prices.jpg); color: #fff; } Code (markup): Obviously these class names and links are from my website, just replace them with your own class names, images and sizes
A menu is a list of links. A div full of loose anchors is no different than a box of random pills. Whereas a ul/li is a pillbox: pills for monday in the monday box, pills for tuesday in the tuesday box... This is especially important when your visitor is blind/low vision and relies on assistive technology. Semantically it is considered correct to use a ul for a menu list of links. That said, I agree the original is way, way, way too much code.
right I just learnt a new thing myself, so since found out using div is no good for the menu, I went and changed my code and turned them to ul & li instead of div the CSS still remains the same, just add a property for your ul so it wont show bullet points ( #topmenu ul {list-style:none;} ) and make sure that the li are set to float:left thats all and it should work
keemuph, where did you get that CSS? You have the Suckerfish-style Javascript in your <head> for getting IE6 to make dropdowns appear, and your CSS had a load of junk in it for dropdowns. Was this going to be a dropdown menu or something? Your current menu is pretty simple. Also, were you trying to use Sliding Doors with your bg images?
Even that site only has one-level nav CSS: #header div ul { /* outline: solid yellow 1px;*/ float: right; margin: 43px 0 0 0px; padding: 0; font-size: 90%; list-style: none; } #header ul li { float: left; margin: 0 0 0 3px; padding: 0; background: #990022 url(images/toptab-bg-2.gif) repeat-x bottom left; -moz-border-radius-topleft:6px !important; -moz-border-radius-topright:6px !important; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; } #header ul li a { float: left; display: block; padding: 8px 12px 12px 12px; padding: 8px 9px 12px 10px; text-decoration: none; color: #fff; -moz-border-radius-topleft:6px !important; -moz-border-radius-topright:6px !important; } #header ul li a:hover { background: #902; background: #C31D31; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; } Code (markup): They made the decision to let more advanced browsers see rounded corners, and to hell with the others : ) It looked like your CSS was using sliding doors to give all browsers some rounded corners. For some reason they switch around with which elements get the rounded corners... not sure why. Your css, and your js: <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { if (!document.getElementsByTagName) return false; var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script> Code (markup): looks like it came from Suckerfish, maybe even the first one. If you don't have any submenus on your site, you can safely remove this, and all the css you have which references a sub menu. Huh, I was wrong, this isn't sliding doors exactly, but more of a sprite: http://cyrealestatetv.com/wp-content/themes/tubular_light_10/images/navhover.png To make that part look good, you'll have to be very very careful with the setting of your anchor widths, which I think kinda defeats the purpose (anyone with a hair larger font, like me, gets everything all screwed up, because the images and the widths of the anchors won't be able to grow with the text). Instead, I think you want something like this: first one: http://www.alistapart.com/articles/slidingdoors/ second one: http://www.alistapart.com/articles/slidingdoors2/ You'd only need two images, one for each side of the anchor, and since both your li's and your anchors are blocks of some sort, the li's can hold one end and the anchors can hold the other end, the long-as-the-longest-possible-word end (though IE6 won't change the colour of the li-end on :hover without some javascript, in which case, you could use some version of the Suckerfish JS you have). Decide: do you want to do this menu with images, so all browsers see the rounded corners, or do you want to do it like the wine site, where only browsers smart enough get rounded corners (and thus you wouldn't need to use any images at all)? If the former, you'll want to do the Sliding Doors tutorial. You can even do the whole thing with sprites, that is, one single image: http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites but that may just be CSS overkill for you.