Jump to content
Sign in to follow this  
vaughanmoore

Rounded Corners

Recommended Posts

vaughanmoore

Hello, I'm really new. I've searched for posts on this topic and found one that I want to duplicate. It's below: http://www.pagelines.com/forum/topic.php?id=5074#post-27070 I grabbed Philip's background image just for testing purposes and will change it after I've gotten the right look. Kate posted her CSS changes, but of course they were specific to Philip's site. They are below: #primary-nav{background:#ffffff;-moz-border-radius-topleft:10px;-moz-border-radius-topright:10px;border-top-right:10px;border-top-left-radius:10px;padding-top:10px;} #branding{background:transparent !important;} #header{background:transparent !important;} #page-main{background:#ffffff;} #page-main{background:transparent !important;} #primary-nav .texture {background-color:transparent !important;} My site is: http://www.familycollegeplan.com Any help would be much appreciated. I'm looking into how to use Firebug, but as I said, I'm new. Vaughan

Share this post


Link to post
Share on other sites
cmunns

You need these selectors for the corners; `.fixed_width #page, .fixed_width #footer, .canvas #page-canvas {}`

Share this post


Link to post
Share on other sites
vaughanmoore

I had some success. This rounds the corners of my page: #page{ -moz-border-radius-topleft:50px; -moz-border-radius-topright:50px; border-top-right:150px; border-top-left-radius:50px; padding-top:10px;} The other selectors, or adding .fixed-page, didn't work. I'm not able to make the header transparent and round the corners of the nav. Any additional help would be appreciated.

Share this post


Link to post
Share on other sites
bryan-hadaway

Apologies, I don't understand what you still need help with if you can guide me... Thanks, Bryan

Share this post


Link to post
Share on other sites
vaughanmoore

Thanks Bryan, I want my site to look like this one: http://www.lacleansweep.org/ Do you see how the rounded corners are at the edge of the primary nav area rather than at the top of the header? I'd like my rounded edges there and the header area to to transparent so my logo is on top of the background image rather than the white page area. My site is: http://www.familycollegeplan.com. Any further help would be greatly appreciated. Vaughan

Share this post


Link to post
Share on other sites
cmunns

If a selector isn't working try adding `body` to the front it to make it stick. Not sure why only one of your corners are rounded now, but the selectors I originally provided should work assuming you get them to take precedence.

Share this post


Link to post
Share on other sites
kristjan72

I've been playing around with this code too, and even though I'm very much at the copy-paste-see-what-happens level of CSS, I think I see where your going wrong, Vaughan border-top-right:150px; border-top-left-radius:50px; this should be border-top-right-radius:50px; border-top-left-radius:50px; hope that fixes it for you!

Share this post


Link to post
Share on other sites
bryan-hadaway

Thanks Kristjan, first karma point just for helping out. Thanks, Bryan

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×