Page 1 of 1

Problem with css navigation and border radius

Posted: Tue Oct 25, 2011 2:00 pm
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

Re: Problem with css navigation and border radius

Posted: Thu Oct 27, 2011 8:46 am
by Celauran
Have you tried the :last-child pseudo-selector?