Forums

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:

<!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\" />
<link href=\"style/style.css\"  rel=\"stylesheet\" type=\"text/css\" />
<title>Provident Money</title>
</head>
<body>
<div id=\"background\">
	<div id=\"container\">
		<div id=\"header\">
        <ul id=\"header-login\">
            	<li><a href=\"#\">LOGIN</a></li>
                <li><a href=\"#\">SIGN UP</a></li>
            </ul>
        <img id=\"headerimage\" alt=\"Provident Money\" src=\"images/main-icon.gif\" />
        	
        	<ul>
            	<li><a href=\"#\">HOME</a></li>
                <li><a href=\"#\">FEATURES</a></li>
                <li><a href=\"#\">FAQS</a></li>
                <li><a href=\"#\">ABOUT US</a></li>
            </ul>                
        </div>
        <div id=\"main\">
        <img id=\"align\" src=\"images/round-arrows.gif\" />
        <h1 id=\"h1\">3 STEPS<br />
        TO YOUR <br />
        SUCCESS...</h1>
        <br />
        <div id=\"main1\">
            	<h3>1. TRACK</h3><br />
            	<p>\"You cannot improve that<br /> which you do not track.\"</p><br />
                <p>Take control of your finances with
our easy-to-use tracking and
budgeting software and begin the
journey to financial freedom.</p><br />
                <p>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...</p>
			<br />
            <a href=\"#\"><img style=\"margin-top:1px;\" src=\"images/learn-more.gif\" /></a>
            </div>
          <div id=\"main2\">
            	<h3>2. EVALUATE</h3><br />
                <ul>
                	<li>Over 100 powerful calculators created by our team of highly-specialized mathematicians gives you ultimate ability to see \"what if\" situations.</li><br />
                    <li>Solid, provident advice in all major aspects of your financial life, provided by experts.</li>
                </ul>
             	<br />
                <a href=\"#\"><img style=\"margin-top: 60px;\" src=\"images/demo.gif\" /></a>
            </div>
            <div id=\"main3\">
            	<h3>3. DECIDE</h3><br />
                <p>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.</p><br />
                <p>We are assembling the most
qualified and wide team of
professional advisors in one
place than ever before.</p>
			<br />
            <a href=\"#\"><img style=\"margin-top: 48px;\" src=\"images/join-free.gif\" /></a>
            </div>
        </div>
        <div id=\"main-right\">
        <img alt=\"People\" src=\"images/people.gif\" />
        </div>    
        <div id=\"main-right2\">
        	<p><b><a href=\"#\">The Success Spiral <img id=\"align2\" alt=\"Go Arrow\" src=\"images/goarrow.gif\" /></a></b></p><br />
        	<p>What is it?  Learn about this powerful concept, and why it is the foundation of our provident philosophy, and your financial success!</p>
        </div>
        <div class=\"clear\"></div>
        <img style=\"background-repeat:repeat\" src=\"images/background.gif\" />
        </div>
        </div><!--END OF CONTAINER, AND THUS THE ENTIRE PAGE! -->
</div><!--END OF BACKGROUND COLOR, AND THUS THE ENTIRE PAGE! -->
</body>
</html>

NOW FOR THE CSS


* {
	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

margin-top: -30px;

it would make more sense to use

margin-bottom: 30px;

OR

margin:0px 0px 30px 0px;

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

ABOUT US  FAQS  FEATURES  HOME

To fix this u will need to change

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

TO

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

treehouse : what would you like to learn today?

Forums

Nav lists won't space correctly!!!