SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Threaded View

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with horizontal nav links please.

    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;
    Last edited by guido2004; Dec 14, 2012 at 15:32. Reason: added code tags


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •