SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    37
    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

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,501
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Off Topic:

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

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by guido2004 View Post
    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


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
  •