Nav lists won’t space correctly!!!

[nchipping]

I am having trouble getting my navigation lists in my header to space properly, so that they can be viewable and used correctly. Here’s a screen shot of the problem:

http://meandmyback.com/provident-living … messed.bmp

Any help would be appreciated – I have tried a bunch of things and just can’t figure it out. Here’s the HTML, and then the CSS:

Code:

• LOGIN
• SIGN UP

• HOME
• FEATURES
• FAQS
• ABOUT US

3 STEPS
TO YOUR
SUCCESS…

1. TRACK

“You cannot improve that
which you do not track.”

Take control of your finances with
our easy-to-use tracking and
budgeting software and begin the
journey to financial freedom.

By the way, we thought it only
fair to tell you that this is the only
step our competitors provide. But
there are still 2 vital steps…

2. EVALUATE

• Over 100 powerful calculators created by our team of highly-specialized mathematicians gives you ultimate ability to see “what if” situations.
• Solid, provident advice in all major aspects of your financial life, provided by experts.

3. DECIDE

You will inevitably make some
decisions on your own, but when
it comes to your financial future,
you want to know you’re getting
the best advice possible.

We are assembling the most
qualified and wide team of
professional advisors in one
place than ever before.

The Success Spiral

What is it? Learn about this powerful concept, and why it is the foundation of our provident philosophy, and your financial success!

NOW FOR THE CSS

Code:

* {
margin:0;
padding:0;
}
#background {
background-color: #364565;
}
#container {
margin: 0 auto;
padding-top: 70px;
width: 910px;
padding-bottom:inherit;
}
#header {
height: 100px;
width: 647px;
font-family:Arial, Helvetica, sans-serif;
font-size:large;
background-color:#FFF;
}
#header ul {
list-style:none;
display:block;
float:right;
width: 300px;
}
#header ul li {
list-style:none;
float: right;
display:block;
font-size:10px;
margin-top: -30px;
width: 70px;
padding-left: 5px;
padding-right: 5px;
}
#headerimage {
margin:25px;
}
#header-login {
float:right;
margin: 0 auto;
margin-top: 36px;
}
#header-login ul li {
margin: 10px;
padding: 5px;
}
#main {
float: left;
width: 638px;
padding: 5px;
margin-top: 12px;
background-color:#FFF;
}
#main1 {
float:left;
width: 190px;
padding:5px;
margin: 5px;
text-align:right;
}
#main2 {
float: left;
width: 190px;
padding: 5px;
margin: 5px;
border-left: solid 1px #364565;
border-right: solid 1px #364565;
text-align:center;
}
#main2 ul li{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
#main3 {
float:right;
width:190px;
padding: 5px;
margin: 5px;
text-align:left;
}

#main-right {
float: right;
width:249px;
height:410px;
margin-top: -103px;
background-color: #FFF;
}
#main-right2 {
float:right;
width: 219px;
height:120px;
margin-left: 5px;
margin-top: 12px;
padding: 15px;
background-color: #E8A722;
font-family:Arial, Helvetica, sans-serif;
color: #364565;
}
#main-right2 p {
font-weight:500;
}
#align {
margin-left: 150px;
}
#align2 {
margin-left: 5px;
}
#main-right2 p b a {
text-decoration:none;
color: #364565;
border:none;
}
#main-right2 p b a:hover {
text-decoration: underline;
color: #999;
}
#main-right2 p b a:visited {
color: #364565;
text-decoration:none;
}
#h1 {
font-family: Arial, Helvetica, sans-serif;
margin-left:310px;
margin-top:-140px;
margin-bottom:12px;
}
.clear {
clear:both;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
}
img {
border:none;
}

[John Harris]

Your problem is

Code:

margin-top: -30px;

it would make more sense to use

Code:

margin-bottom: 30px;

OR

Code:

margin:0px 0px 30px 0px;

Also once the spacing is corrected you will notice that your navigation will appear "backwards" like

Code:

ABOUT US FAQS FEATURES HOME

To fix this u will need to change

Code:

#header ul {
float:right;
}
#header ul li {
float: right;
}

TO

Code:

#header ul {
float:left;
}
#header ul li {
float: left;
}

You may want to clean up the code some more though. It will definitely fix some of your problems down the road.

[Author]

Posts