Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    navbar is not positioning where i want to please help

    Hello guys I want my navbar to be displayed inside the navbar con on the center of the page just under the header but its displaying on top left of the page.

    Please help here is my code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="all" href="style.css" />
    </head>
    <body>
    <div id="layout-top">
    	<div id="header-con">
    		<div id="header">
    		</div>
    	</div>
    </div>
    <div id="layout-bottom">
    	<div id="navbar-con">
    		<ul id="navlist">
    		  <li><a id="n1" href="index.html">Home</a></li>
    		  <li><a id="n2" href="aboutme.html">About Me</a></li>
    		  <li><a id="n3" href="whatioffer.html">What I Offer</a></li>
    		  <li><a id="n4" href="howdoistart.html">How do I Start</a></li>
    		  <li><a id="n5" href="tnotes.html">Training Notes</a></li>
    		  <li><a id="n6" href="externallinks.html">External Links</a></li>
    		  <li><a id="n7" href="contactme.html">Contact Me</a></li>
    		</ul>
    	</div>
    
    </div>
    </body>
    </html>
    Code:
    * {margin:0px;padding:0px;top:0px;left:0px;}
    body
    {
    	text-align: center;
    	background-color: #44607e;
    	background: url(images/page_bg.gif);
    	text-align: center;
    	font: 12px arial, sans-serif;
    	color: #464544;
    }
    
    #layout-top
    {
    padding-top: 20px;
      background: top left url(images/page_bg_top.gif) repeat-x;
      height: 226px;
      margin: auto;
    }
    
    #layout-bottom
    {
      height: 300px;
      width: 798px;
      background-color: pink;
      margin: auto;
    }
    
    #header-con
    {
    	text-align: left;
    	margin: auto;
    	width: 798px;
    
    }
    
    #header{
    	background-image: url(images/header.jpg);
    	height: 226px;
    	width: 798px;
    	left: 0px;
    	top: 0px;
    }
    
    #navbar-con
    {
    
    height: 30px;
    width: 798px;
    background-color: red;
    }
    
    #navlist{
    	margin: auto;
    	white-space: nowrap;
    	position: absolute;
    	height: 27px;
    	width: 798px;
    	margin: 0 auto;
    }
    #navlist li{
    	display: inline;
    	list-style-type: none;
    }
    #navlist a {
    	padding: 3px 10px;
    	background-image: url(images/button.gif);
    	height: 20px;
    	width: 91px;
    	display: inline;
    	position: absolute;
    	text-align: center;
    	color: #fff;
    	text-decoration: none;
    }
    #navlist a:hover{background-image: url(images/buttonover.gif);}
    #n1{left: 0px;}
    #n2{left: 111px;}
    #n3{left: 222px;}
    #n4{left: 333px;}
    #n5{left: 444px;}
    #n6{left: 555px;}
    #n7{left: 666px;}
    #leftside{
    	float: left;
    }
    Attached Thumbnails Attached Thumbnails navbar is not positioning where i want to please help-untitled.jpg  
    Last edited by foster10; 05-25-2011 at 04:26 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Drop all position:absolute; and top/left properties from your CSS and check again.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That worked great thanks abduraooft


  •  

    Posting Permissions

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