...

View Full Version : Navigation bar in centre?



muzammil
12-17-2010, 03:07 AM
Dear Awsome Coders.
Would you please help me find out how can i put this horizontal menu bar in the centre of my container???:(
here is the html code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">
<h1>WA CLEANING SPOT</h1>
<h3>Finding cleaning services was never so easy</h3>
</div>
<div id="menu">
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
<li><a href="#">Page 6</a></li>
<li><a href="#">Page 7</a></li>
</ul>
</div>
<div id="leftpart">
<h2>Are you looking for a Cleaner?</h2>
<a href="#">Book Now</a>
<p>Elit. Primis ante sapien felis arcu facilisi elementum. Curae; montes mauris laoreet quam cum. Fermentum mi eu nunc conubia odio. Venenatis sodales est per habitant integer. Sociosqu adipiscing.</p>
</div>
<div id="rightpart">
<h2>Are you looking for cleaning job?</h2>
<a href="#">Apply Here</a>
<p>Elit. Primis ante sapien felis arcu facilisi elementum. Curae; montes mauris laoreet quam cum. Fermentum mi eu nunc conubia odio. Venenatis sodales est per habitant integer. Sociosqu adipiscing.</p>
</div>
<div id="footer">
<p>&copy; Copy righted by WA CLEANING SPOT</p>
</div>
</div>

</body>
</html>


here is the css code


@charset "utf-8";
/* CSS Document */

#container
{
width:1000px;
margin:0 auto;
border:1px solid;
}

#header
{
background-color:#960;
height:140px;
width:100%;
border:1px dotted;
}
#header h1, h3
{
padding:0px;
margin:0px;
color:#fff;
}
#menu
{
width:1000px;
}
#menu ul
{
padding:0px;
margin:0px;
list-style-type:none;
}
#menu ul li
{
float:left;
border:1px solid #FFF;
}
#menu ul li a:link,a:visited
{
text-decoration:none;
background-color:#960;
padding:6px;
color:#FFF;
text-align:center;
display:block;
width:125px;
font-size:20px;
}
#menu ul li a:hover,a:active
{
background-color:#C60;
}


#leftpart
{
background-color:#fff;
width:499px;
float:left;
border-right:1px dashed;
}
#leftpart h2
{
text-align:center;
}


#leftpart a:link,a:visited
{
display:block;
background-color:#960;
text-decoration:none;
color:#fff;
width:100px;
text-align:center;
padding:5px;
font-weight:bold;
margin:0 auto;

}

#leftpart a:hover,a:active
{
background-color:#C60;
}
#leftpart p
{
margin:20px;
font-size:20px;
}

#rightpart
{
background-color:#fff;
width:500px;
float:right;
}
#rightpart h2
{
text-align:center;
}
#rightpart a:link,a:visited
{
display:block;
background-color:#960;
text-decoration:none;
color:#fff;
width:100px;
text-align:center;
padding:5px;
font-weight:bold;
margin:0 auto;
}
#rightpart a:hover,a:active
{
background-color:#C60;
}
#rightpart p
{
margin:20px;
font-size:20px;
}

#footer
{
background-color:#FFF;
height:50px;
clear:both;
border:1px dotted;
}
#footer p
{
text-align:center;
}

Excavator
12-17-2010, 03:28 AM
Hello muzammil,
The easiest way might be to give the ul a width and center it with margin: 0 auto;
That works like this:
To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto



You can also center it like this example - http://nopeople.com/CSS%20tips/menu-h_centered-ul/index.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum