Rounded Corners & CSS Borders

swinnie · 27 Jul 2009 at 14:55

Hi Guys,

I have a small problem with a navigation bar. I need to:

a) Make rounded edge at either end of the nav bar (below)
b) Make CSS Borders for the nav bar appear like the borders below

When I add the borders, it does this...

Any pointers?

The nav bar is made using the standard <ul> <li> list form.

Thank in Advance

GravyMonster · 27 Jul 2009 at 14:59

To get the rounded edges you'll need to make them into an image and put them at the left and right ends of your nav (which I assume is a UL?).

You could use CSS rounded corners, but this won't appear correctly on IE.

To get the dividers you'll need to specify a right-border on the LI element with padding applied to space it all out. You'll also need to put a class on the last LI to remove the right hand border - unless your design needs it of course.

swinnie · 27 Jul 2009 at 15:09

When I try to add the rounded edge, it drops it down onto the next line?

GravyMonster · 27 Jul 2009 at 15:34

Can you post your code?

swinnie · 27 Jul 2009 at 15:38

Main site...

Code:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>DrAdvice</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
<!--[if IE ]>
  <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>
<body>
<div id="wrapper">
	<div id="header-nav">
		<ul>
			<li><a href="#">Privacy Policy</a></li>
			<li><a href="#">Terms and conditions</a></li>
			<li><a href="#">Notice &amp; Disclaimer</a></li>
			<li><a href="#">Sitemap</a></li>
			<li><a href="#">Advertise on this site</a></li>
			<li><a href="#">Members Login</a></li>
		</ul>
	</div><!--/header-nav-->
	<div id="banner"></div><!--/banner-->
	
	<div id="navcontainer">
			<ul id="navlist">
			<li><a href="#">HOME PAGE</a></li>
			<li><a href="#">ABOUT US</a></li>
			<li><a href="#">Dr ADVICE</a></li>
			<li><a href="#">EMAIL A Dr</a></li>
			<li><a href="#">FAQ's</a></li>
			<li><a href="#">CONTACT US</a></li>
		</ul>
	</div><!--/navcontainer-->
<div class="clearer"></div><!--/clearer-->
<div id="content">
content...
</div><!--/content-->
</div><!--/wrapper-->
</body>
</html>

CSS...

Code:

html, body { background: white; color: black; }

#wrapper { width: 977px; margin: 0 auto; border: 1px solid red; }
#banner { background-image: url(images/banner.gif); background-repeat: no-repeat; width: 202px; height: 65px; padding-bottom: 20px; }

#header-nav{ float: right; height: 9px; font-family: Arial; font-size: 10px; }
ul#header-nav { padding: 0; margin: 0;}
li#header-nav { padding: 0; margin: 0;}
#header-nav li { display: block; float: right; text-align: right; border-right: 1px dotted #9faaae; }
#header-nav ul { list-style-type: none; padding: 0; margin: 0; }
#header-nav a { color: #9faaae; text-decoration: none; display: block; padding: 5px; }

#navcontainer { height: 30px; }
#navlist { height: 30px; background: #7e7e7e; }
#navlist li { height: 30px; display: block; float: left; border-right: 1px dotted white; }
#navlist ul { list-style-type: none; padding: 0; margin: 0; }
#navlist a { color: white; font-family: Arial; font-size: 10px; font-weight: bold; text-decoration: none; display: block; padding: 9px; }

That's without the rounded corners being put in.