SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    25
    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,401
    Mentioned
    147 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,312
    Mentioned
    178 Post(s)
    Tagged
    8 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
    25
    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
    25
    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
  •