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 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    22
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Navigation bar in centre?

    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

    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
    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;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto



    You can also center it like this example - http://nopeople.com/CSS%20tips/menu-...-ul/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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