PDA

View Full Version : Rounded Corners ul horz Navigation



Atlantis
03-16-2009, 11:31 PM
I'm trying to get rounded corners on the top of my nav buttons. I have an inlined ul for my nav and have got a basic css on it, but am getting really stuck on getting rounded corners. It's scripted so that each nav width is relative to the length of the link text so that the buttons aren't all one size.

Here is an example site of what I am trying to achieve.
http://www.thesug.org/Pages/default.aspx


I've spent over an hour of searching on my own, so now I am reaching out for help. Any would be much appreciated! Here is my html and css.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="CSS/banner.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="navbar">
<ul>
<li><a href="index.php">Home</a></li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</body>
</html>



#navbar {
font-family: Geneva, Arial, Helvetica, sans-serif;
height: 44px;
width: 1000px;
float: left;
margin-left: 28px;
margin-top: 10px;
}
#navbar a:link, a:visited, a:active {
text-decoration: none;
color: #FFFFFF;
}
#navbar ul {
margin: 0px;
padding: 0px;
}

#navbar ul li {
display:inline;
height:20px;
float:left;
list-style:none;
margin-left: 4px;
background-color: #5087C6;
font-size: 13px;
padding-right: 15px;
padding-left: 15px;
padding-top: 7px;
color: #FFFFFF;
border-top-width: thin;
border-right-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #375E8A;
border-right-color: #375E8A;
border-left-color: #375E8A;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
padding-bottom: 7px;
}

Snookerman
03-17-2009, 04:08 PM
Take a look at this tutorial: http://css-tricks.com/video-screencasts/24-rounded-corners/ (http://css-tricks.com/video-screencasts/24-rounded-corners/)

Good luck!

Atlantis
03-19-2009, 04:35 PM
Good resources. Thanks for your help!