Need help with my navigation bar (HTML/CSS)

Get Started
1

I’m a pretty new to CSS/HTML and im stuck at the moment trying to get my nav bar right at the top of the page.

At the moment my it looks like this

but I want to place the splitters inbetween and inline with the text so it looks like this

Heres my html code

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<LINK REL=StyleSheet HREF=“style.css” TYPE=“text/css” MEDIA=screen>
<title>title goes here</title>
</head>

<body>
<div id=“container”>
<div id=“header”>
<div id=“logo”>
<img src=“http://www.webmaster-talk.com/images/logo.png”/>
</div> <!–end logo–>

	&lt;/div&gt;&lt;!--end header--&gt;
		
	&lt;div id="navBG"&gt;
		
		
			
			&lt;ul id="nav"&gt;
			&lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#"&gt;What we do&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#"&gt;Community&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
	
		
			
			&lt;/ul&gt;
				
				
				&lt;ul id="splitters"&gt;
	   		&lt;img src="http://www.webmaster-talk.com/images/splitter.png" /&gt;
	   		&lt;img src="http://www.webmaster-talk.com/images/splitter.png" /&gt;
	   		&lt;img src="http://www.webmaster-talk.com/images/splitter.png" /&gt;
	   		&lt;img src="http://www.webmaster-talk.com/images/splitter.png" /&gt;
	   		&lt;img src="http://www.webmaster-talk.com/images/splitter.png" /&gt;
	   	&lt;/ul&gt;
	   	 
	   	
	&lt;/div&gt;&lt;!--end nav--&gt;
		
		
	&lt;/div&gt;&lt;!--end container--&gt;

</body>
</html>

Heres my CSS

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;

}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ‘’;
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

a {
text-decoration: none;

color: black;

}
a:hover{
text-decoration: underline;
}

/* ------------------ Main style -----------------*/

#container {
width:704px;
background:#dbdada;
margin: auto
}

#header {
margin-left: 2px;
overflow: hidden;
height: 100%; /* needed for IE6 */
height: 148px;
background: url(images/header.png) no-repeat;
}

#logo{
margin-top: 25px;
margin-left: 12px;
}

#header img{
float: left;
}

#navBG{
overflow: hidden;
width: 700px;
height: 39px;
margin-left: 2px;
background: #373737;
}

#nav{
padding-top: 10px;
padding-left: 30px;
}

#splitters{
position: absolute;

}

#nav li{
display: inline;
padding-right: 45px;
padding-left: 12px;
}

#nav li a{
color: white;
font-family:“Arial”;
font-size: 10pt;
}

2

You can safely remove all your “splitter” stuff from the HTML and CSS.

Instead use your li element to display your right borders. In your CSS add a background to the li and set it at no-repeat right center.


#nav li {
float:left;
background:url(splitter.png) no-repeat right center;
...
}

In your last link you might not want the right image border, so you can apply another class to your last li:


#nav li.last {
float:left;
[COLOR=Red]background:none;[/COLOR]
...
}




<ul id="nav">
  <li>...</li>
  <li class="last">...</li>
</ul>