Hi guys, How do i make this menu curved on top also so it is fully curved on left/right hand side. http://www.dynamicdrive.com/style/cs...vigation-menu/ Only beginning CSS so i'm a bit stuck. I can copy the left and right side images and invert them etc. but i'm not having any luck with the CSS/HTML Code. I have also tried to insert a small picture instead of a text link and this also seems to mess the menu. Any help would be appreciated. Thanks, S
Ah dynamic drive - bloated code that's overcomplicated and a bad place for nubes to go - there you are. Extra wrapping DIV for nothing, presentational classnames, etc, etc, etc. Though I'm not sure what you mean by 'rounded' - the corners are already rounded? Do you mean rounded on each item? If you can do a quick drawing of what you are trying to do, I'll show you how to do it with a LOT less code than that bloated mess. -- edit -- Here's how I'd code what Dynamic Drive had - http://battletech.hopto.org/for_others/adman/template.html The directory http://battletech.hopto.org/for_others/adman is unlocked so folks can grab the gooey bits. It's roughly two-thirds the CSS before I added better hover states - now it does full graphic mouse-overs. The whole thing also uses a single 1.83k image instead of the four separate images totalling 3.83k - in handshaking alone that can shave a second or more off the page loads. (AND the server overhead). The odd spacing of the </li><li> is an old trick to let us have some form of formatting, while tricking the browser into putting the whitespace into the tag instead of adding spacing between our floats - this lets us have full positioning control in the CSS. I changed the SPAN on the last item from a wrapper to a sandbag, which lets us work around some of firefox's shortcomings on right positioning (stupid 1px background jog) AND makes doing the single image easier. Validates XHTML 1.0 Strict, CSS fails on the haslayout (BFD), Tested working perfect in IE 5.5, 6 & 7, Opera, Safari and FF. (there's so little in there that COULD go wrong!)
Hi deathshadow, Many thanks. Much appreciated. I have attached a pic of what i'm trying to do. I'm trying to round the corners all round on both ends. Thanks, s
Well, with my version of that, it's fairly simple, Simple image retouch. I just updated this image: http://battletech.hopto.org/for_others/adman/images/menuBorders.png To reflect what you are asking. I renamed the original to menuBorders_noBottomRound.png
here´s a similar to deathshadows menu. Used it once, very easy to do. http://www.alistapart.com/articles/sprites/