Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] Page menu bar rounded corners CSS issue


  #1  
Old Jun 20, 2010, 09:35 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
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 {
/* bottom left */
-moz-border-radius-bottomleft: 10px;
-khtml-border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
/* bottom right */
-moz-border-radius-bottomright: 10px;
-khtml-border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
}
and

Code:
ul#rmenu2.clearfix.rMenu-hor.rMenu{
/* bottom left */
-moz-border-radius-bottomleft: 10px;
-khtml-border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
/* bottom right */
-moz-border-radius-bottomright: 10px;
-khtml-border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
}
  #2  
Old Jun 21, 2010, 04:53 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
"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 {
margin-bottom:30px;
border:solid 3px #red;
-moz-border-radius-bottomleft:10px;
-khtml-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-khtml-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10px
}
you set the border for the DIV 'Menu1', but what about the rest of the layers? If you add
HTML Code:
div#menu1 ul.rMenu {
border:solid 0px #blue !important;
-moz-border-radius-bottomleft:10px;
-khtml-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-khtml-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:30px
}
you will set the rounded borders for the UL that is in the DIV, but more is needed
HTML Code:
div#menu1 ul.rMenu li {
-moz-border-radius-bottomleft:10px;
-khtml-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-khtml-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10px
}
set's it for the LI that's in the UL that is in the DIV, but yes, you still need more. Using
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 {
boxrder:solid 2px green !important;
padding:8px 35px;
background:#EEEEEE !important;
font-weight:bold;
-moz-border-radius-bottomleft:10px;
-khtml-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-khtml-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10pxx
}
will add the corners to the <A> that is in the <LI> that is in the <UL> that is in the <DIV>

(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,
div#menu1 ul.rMenu, 
div#menu1 ul.rMenu li,
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 {
-moz-border-radius-bottomleft:10px;
-khtml-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-khtml-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10px;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jun 21, 2010, 06:13 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
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...
  #4  
Old Jun 21, 2010, 06:19 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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...
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jun 22, 2010, 10:03 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
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).
  #6  
Old Jun 24, 2010, 06:40 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
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.


Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Need rounded off corners on menu boarders nickcee Page & Category Menu Bars 4 Nov 21, 2013 11:47 AM
Rounded corners of images? JoannaLynnPhoto Center area post/pages 1 Jun 8, 2010 05:20 AM
Rounded corners at top and bottom mook Header configuration & styling 1 May 27, 2010 02:58 PM
[SOLVED] Rounded corners at the bottom of the headline box? wildangelone Post-Kicker, -Byline & -Footer 2 Jul 26, 2009 09:25 AM


All times are GMT -6. The time now is 04:35 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.