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;
}
Before you post, read our: 
