Problem with css navigation and border radius

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
davidhopkins
Forum Commoner
Posts: 41
Joined: Thu Jun 10, 2010 7:52 am

Problem with css navigation and border radius

Post by davidhopkins »

Im having some troubles with navigation and border radius, mainly the fact that the container my navigation sits in has a curve on the lower right, but when you hover over a link, it fills out this curve with the hover background colour.

Screenshots -
This is what it looks like before you hover over the company link
Image

This is what it looks like while you hover over the company link
Image

It should still maintain the curve

My code looks like this

Html -

Code: Select all

<div id="header">
	<div id="headerLogo"><img src="Untitled-2.png" width="200" height="58" /></div>
	<div id="headerlink" class="active">Home</div>
	<div id="headerlink">Features</div>
	<div id="headerlink">Benefits</div>
	<div id="headerlink">How it works</div>
	<div id="headerlink">Company</div>
</div>
CSS -

Code: Select all

#header {width:100%; height:80px; border:1px solid #ccc; border-radius: 0 0 30px 30px;
	background-color:#3383a6;
	background-image: -moz-linear-gradient(bottom , #C5C5C5, #E9E9E9 55px); 
	background-image: -webkit-linear-gradient(bottom , #C5C5C5, #E9E9E9 55px); 
	background-image: -o-linear-gradient(bottom , #C5C5C5, #E9E9E9 55px); 
	background-image: -ms-linear-gradient(bottom , #C5C5C5, #E9E9E9 55px); 
	background-image: linear-gradient(bottom , #C5C5C5, #E9E9E9 55px);}
	
#headerLogo {float:left; width:225px;   padding:10px 0 0 25px;}
#headerlink {float:left; width:139px; height:100%; border-left:1px solid #bbbbbb; font: 22px 'ComfortaaThin', Arial, sans-serif; text-align:center; line-height:75px;}
#headerlinklast {float:left; width:139px; height:100%; border-left:1px solid #bbbbbb; font: 22px 'ComfortaaThin', Arial, sans-serif; text-align:center; line-height:75px;}
#headerlink:hover{
	background-color:#3383a6;
	background-image: -moz-linear-gradient(bottom , #8c8a8a, #C5C5C5 55px); 
	background-image: -webkit-linear-gradient(bottom , #8c8a8a, #C5C5C5 55px); 
	background-image: -o-linear-gradient(bottom , #8c8a8a, #C5C5C5 55px); 
	background-image: -ms-linear-gradient(bottom , #8c8a8a, #C5C5C5 55px); 
	background-image: linear-gradient(bottom , #8c8a8a, #C5C5C5 55px);}
Now i know i could make an extra class that deals the the last link, and puts the border-radius on the hover aswell, but i plan on using a CMS package to maintain the website and this would prove difficult.

Is there something i can stick on the hover CSS style to sort this out, some sort of display option ?

Many thanks
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Problem with css navigation and border radius

Post by Celauran »

Have you tried the :last-child pseudo-selector?
Post Reply