CSS Alignment Issues - Horizontal List Navigation [Archive]

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

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

<!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/9760/navigationalignmentissu.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

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/9351/taranixpreview.jpg

Thanks for your help :)

europe451

05-25-2010, 06:04 PM

Have you tried this:

#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.

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/csslibrary/item/jquery_drop_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:confused:. 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

coelloc123

05-25-2010, 07:12 PM

much appreiciated

MathewHood

05-26-2010, 04:04 AM

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

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

Thankyou so much, that works perfectly.

Can you please just give me a bit more of a explanation of what you did so I can learn :)?

azoomer

05-26-2010, 06:20 AM

Hi MathewHood. The part of the css above the body tag is a Meyer reset (http://meyerweb.com/eric/tools/css/reset/). It helps in getting rid of unwanted margins and paddings and basically helps to get the page rendering the same way in different browsers. Next i deleted some some background color and margins in the the divs holding the navigation. Gave the navigation some top margin to make it look more like your picture. Gave the text some padding at the top and changed the height of the navigation. OK it's difficult to explain but basically just playing around until it looks more the way you want.
By far the best advice i could give you is to get the firefox add on that is called:

FIREBUG

Install it in firefox and learn to use it. It will take you leaps ahead. I promise, that is absolutely the most helpful thing plugin/ addon i have ever used. Try it and you will be surprised ( in a positive way)

MathewHood

05-26-2010, 06:28 AM

Thanks for that Azoomer. I will look into all that :)