CSS Alignment Issues - Horizontal List Navigation

**MathewHood** · 05-25-2010, 03:18 PM

Hey everyone,

I just got referred to your site today by a friend from University, it has so much information!

Glad that I finally have a resource to view sample code and get ideas.

Anyway, my issue is in the alignment on a design I am starting to do. I will post the HTML and CSS code for the website and a screenshot.

CSS CODE

Code:

body {
	background-color: #5b5a5c;
	font-family: Century Gothic, Tahoma, Verdana, Arial;
}

#whiteContainer {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#whiteBox {
	background-color: #FFFFFF;
	width: 1000px;
	height:2000px;
}

.nav ul{
	color:#FFF;
	height: 40px;
	width:940px;
	background-color:#333;
	margin-left: auto;
	margin-right: auto;
}

.nav ul li{
	list-style: none;
	display:inline;
	width:188px;
	height:40px;
	text-align:center;
}

.nav ul li a{
	text-decoration: none;
	float: left;
	color: #FFFFFF;
	background-color: #333333;
	width:188px;
	height:40px;
}

.nav ul li a:hover{
	background-color: #000000;
	width:188px;
	height:40px;
}

#navContainer{
	width: 940px;
}

HTML CODE

Code:

<!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>Taranix Pty Ltd - 2010</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="whiteContainer">
	<div id="whiteBox">
    	<div id="navContainer">
			<div class="nav">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Partners</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
            </div>    
		</div>
        <div id="imageContainer">
        	asad
        </div>
	</div>
</div>
</body>
</html>

Here is a picture of my issue.
http://img176.imageshack.us/img176/9...gnmentissu.jpg

As you can see, the left of the navigation bar seems to almost have a padding of 20px or so (the black background behind home is the rollover).

Somehow it has that grey area on and left and a small white space on the right (which i presume is just numbers not matching up).

If anyone has any ideas on what I did wrong your help would be greatly appreciated.

Regards,

Mathew Hood

**europe451** · 05-25-2010, 04:31 PM

What exactly is the problem you are having? Is it the fact that there is the white space on the right?

**MathewHood** · 05-25-2010, 05:42 PM

Originally Posted by europe451

What exactly is the problem you are having? Is it the fact that there is the white space on the right?

Hey thanks for replying,

Umm as you can see on the navigation bar, the Home button is rolled over and has the black background colour.

However I wanted the navigation to just be wide enough for all of the buttons to fit nicely.

Here is a preview of what I plan to have the finished design looking like, hopefully this makes my issue clearer.

http://img191.imageshack.us/img191/9...nixpreview.jpg

Thanks for your help

**europe451** · 05-25-2010, 06:04 PM

Have you tried this:

Code:

#navContainer{
	width: 940px;
	padding-left:10px;

**azoomer** · 05-25-2010, 06:23 PM

Maybe this css would get you a little closer. Added a Meyer reset.

Code:

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;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	background-color: #5b5a5c;
	font-family: Century Gothic, Tahoma, Verdana, Arial;
}

#whiteContainer {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}


#whiteBox {
	background-color: #FFFFFF;
	width: 1000px;
	height:2000px;
}

.nav ul{
	color:#FFF;
	height: 40px;
	width:940px;
	
}

.nav ul li{
	list-style: none;
	display:inline;
	width:186px;
	height:40px;
	text-align:center;
}

.nav ul li a {
background-color:#333333;
color:#FFFFFF;
float:left;
height:30px;
padding-top:10px;
text-decoration:none;
width:188px;
}

.nav ul li a:hover{
	background-color: #000000;
	width:188px;
	height:30px;
}

#navContainer {
margin-left:auto;
margin-right:auto;
margin-top:20px;
padding-top:20px;
width:940px;
}

**coelloc123** · 05-25-2010, 06:37 PM

hey how are you doing i have an issue with with making the Nav Bar in general. i would like to use the nav bar from your site http://www.dynamicdrive.com/style/cs...rop_line_tabs/. and i want to change the color of the nav bar and to find out exactly how it is put into Dreamweaver. Please email me or PM me at your earliest convienence.

Christopher.coello@yahoo.com

thank you for reading this

**europe451** · 05-25-2010, 06:40 PM

coelloc123,

download the external files and open them in Dreamweaver and follow the directions of the tutorial.

**coelloc123** · 05-25-2010, 06:50 PM

the links are not files only coding

. it doesnt give the Bluedefault.gif and blueactive.gif

**europe451** · 05-25-2010, 07:01 PM

I didn't read the .css file but I didn't see anything on the tutorial page referring to BlueDefault.gif & BlueActive.gif.

However, the two images for download for the external files can be found at:

http://www.dynamicdrive.com/cssexamples/leftedge.gif
&
http://www.dynamicdrive.com/cssexamples/rightedge.gif