Help with horizontal nav links please

Get Started
1

Hi all,

I am trying to place my links on the bottom of my horizontal nav bar but i can’t seem to work out where i am going wrong. Any help would be much appreciated.

Here is my code

<!DOCTYPE html>

<head>
<meta charset="utf-8" />
<title>All cooped up</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>

<body>

<!--container content-->
<div id="container">

  <!--header content-->
  <div id="header">
  <h1>All cooped up</h1>
  </div>
  <!--end of header content-->

  <!--horiznav content-->
  <div id="horiznav">
  <ul id="navlist">
  <li><a href="index.html">Home</a></li>
  <li><a href="myaccount.html">My Account</a></li>
  <li><a href="viewcart.html">View Cart</a></li>
  <li><a href="about.html">About Us</a></li>
  <li><a href="contact.html">Contact Us</a></li>
  <li><a href="delivery.html">Delivery</a></li>
  <li><a href="terms.html">Terms & Conditions</a></li>
  </ul>
  </div>
  <!--end of horiznav content-->


  <!--leftnav content-->
  <div id="leftnav">
  <p>This is the leftnav</p>
  </div>
  <!--end of leftnav content-->

  <!--content content-->
  <div id="content">
  <p>This is the content</p>
  </div>
  <!--end of content content-->

  <!--footer content-->
  <div id="footer"><p>This is the footer</p>
  </div>
  <!--end of footer content-->

</div>
<!--end of container content-->
</body>
</html>

@charset "utf-8";
/* CSS Document */

body {
	background-color:#6FF;
	margin:0 auto;
	padding:0;
}
#container {
	background-color:#fff;
	width: 1000px;
	height:690px;
	margin:0 auto;
	padding:0;
}
#header {
	background-image:url(images/header.png);
	background-color:#fff;
	width:1000px;
	height:120px;
	margin:0;
	padding:0;
	position:relative;
}
#header h1 {
	color:#fff;
	position:absolute;
	top:10px;
	left:20px;
	border: solid 3px #fff;
}
#navlist {
	position:absolute;
	top:80px;
	width:1000px;
	height:30px;
	background:#069;
	padding:3px 0;
	margin-left:0;
	border-bottom:1px solid #006;
	font:bold 12px Verdana, Geneva, sans-serif;
}
#navlist li {
	list-style:none;
	margin:0;
	display:inline;
}
#navlist li a {
	
	color:#fff;
	background:#009;
	padding:3px 0.5em;
	margin-left:3px;
	border:1px solid #778;
	border-bottom:none;
	text-decoration:none;
}
#navlist li a:visited {
	color:#000;
}
#navlist li a:hover {
	color:#000;
	background:#AAE;
	border-color:#227;
}
#navlist li a#current {
	background:white;
	border-bottom:1px solid white;
}
#leftnav {
	background-color:#fff;
	width:190px;
	height:500px;
	float:left;
	margin-top:15px;
	margin-left:10px;
	border: solid 2px #ccc;
	border-radius:5px;
}
#content {
	background-color:#fff;
	width:770px;
	height:500px;
	border: solid 2px #ccc;
	border-radius:5px;
	margin-top:15px;
	margin-right:10px;
	margin-bottom:5px;
	float:right;
}
#footer {
	background-color:#FFF;
	width:1000px;
	height:30px;
	margin-top:520px;
	border-top: solid 3px #CCC;
	clear:both;
2
Off Topic:

Next time please use the appropriate code tags around the code you post. It makes for easier reading

3

Hi there foshan,

Add the following to the bottom of your #navlist li a declaration:

position:relative;
top:15px;

This is however, a bit of a hack.
A typical technique for making a horizontal nav bar is to float the containing <ul> and its <li> elements to the left, then set the <a> elements to display block, before applying some padding to them.
Maybe you might like to check out this article: http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/

HTH

4
5

Thanks for the advice i’ll do that next time