Help with horizontal nav links please.

**foshan** · Dec 14, 2012 14:12

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

Code HTML4Strict:

<!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>

Code CSS:

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

**guido2004** · Dec 14, 2012 15:32

Off Topic:

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

**Pullo** · Dec 14, 2012 15:47

Hi there foshan,

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

Code CSS:

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-simpl...avigation-bar/

HTH

**foshan** · Dec 14, 2012 17:02

Originally Posted by Pullo

Hi there foshan,

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

Code CSS:

position:relative;
top:15px;

Thanks very much Pullo very helpful

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-simpl...avigation-bar/

HTH

**foshan** · Dec 15, 2012 06:05

Originally Posted by guido2004

Off Topic:

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

Thanks for the advice i'll do that next time

User Tag List

Thread: Help with horizontal nav links please.

Thread Tools

Display

Help with horizontal nav links please.

Bookmarks

Bookmarks

Posting Permissions