1 reply [Last post]
TV
TV's picture
Offline
newbie
Last seen: 6 years 24 weeks ago
Timezone: GMT-6
Joined: 2014-01-23
Posts: 1
Points: 2

Hello!

I'm really new to CSS and I'm trying not bother all my friends who do. SO I'm loggin in here:-)

I'm trying to have my navbar round out at the end, but when ever I place "border-radius: 0px 20px 20px 0px;" in my code it makes ALL the buttons in the NavBar round the same way.

how do I fix this?

HTML:

<!DOCTYPE html>
<html>
<head>
</head>
 
<body>
<div id="page">
	<div id="header">
		<div id="logo">
		</div>
		<ul>
		<li><a href="about.html">About</a></li>
		<li><a href="Gallery.html">Gallery</a></li>
		<li><a href="Tutorials.html">Tutorials</a></li>
		<li><a href="Voice.html">Voice</a></li>
		<li><a href="Contact.html">Contact</a></li>
		</ul>
	</div>
 
			<div id="main">
			</div>
</div>
 
</body>
</html>

CSS

<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
/*--border-radius: 0px 20px 20px 0px; This stuff rounds them all out.--*/ 
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#fd8c0b;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#c16701;
}
 
</style>

please help! not sure how to fix this.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi TV, I'm not sure I fully

Hi TV,
I'm not sure I fully understand your problem.
Could you put the background and border-radius on the UL? you might need to add some padding.
Otherwise you could just target the last link with last-child pseudo class

li:last-child a{ ...