[SOLVED] Page menu bar rounded corners CSS issue
I'm trying to round the bottom-left and bottom-right corners of the page menu bar.
I have tried the following CSS inserts yet all I seem to be able to round is the menu bar behind the buttons themselves. Can anyone help me construct the CSS insert I need? Atahualpa 3.5.1. on this website: http://bit.ly/bSYEA7 Code:
div#menu1 { Code:
ul#rmenu2.clearfix.rMenu-hor.rMenu{ |
"Ah, what tangled web's we weave, when first we practice to...mess with the menu's"
(apologies to Sir Walter Scott) The menus remind me of the russian doll toy, layers inside layers inside layers. With HTML Code:
div#menu1 { HTML Code:
div#menu1 ul.rMenu { HTML Code:
div#menu1 ul.rMenu li { HTML Code:
div#menu1 ul.rMenu li a:link,div#menu1 ul.rMenu li a:hover,div#menu1 ul.rMenu li a:visited,div#menu1 ul.rMenu li a:active { (if you use this exactly, you will need to clean up the colors and maybe some other things, but this should get you going) btw you could combine them all with HTML Code:
div#menu1, |
Thanks for your detailed explanation juggledad, hopefully my page menu bar frustrations will be reduced in the future. :)
I copied the last bit of code you provided and thankfully the menu bar corners are now rounded! Yet there is a mysterious bunch of gray pixels at each corner that I'm not sure how to solve...:confused: |
I think that is because the menu item is slightly smaller than the menu1 area, and both have the same curve so there is a little gap. Try changing one of the items to a smaller radius - that does mean breaking the CSS out...
|
Thanks juggledad.
I'll have some time to modify the CSS later tonight and I'll post again once I've properly spent the time needed (hopefully with success). :) |
I broke down the CSS and played with the radius values to reduce the gap. I was not able to eliminate it completely -- so instead I just made the border on the menu bar 0px and that solved the issue.
:) |
All times are GMT -6. The time now is 03:29 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.