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 to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help me center menu bar

    Im trying to make the basic of a website. But I center both my header and the menu bar still both arent in the center.

    IMAGE



    CSS

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    #Header {
    	background-image:url(images/header%20top.png);
    	background-position:center top;
    	margin-top: 100px;
    	height: 280px;
    	width: 900px;
    	margin-left: auto;
    	margin-right:auto;
    }
    
    body {
    	background-image: url(images/webpattern.png);
    	background-repeat: repeat;
    	background-position: left top;
    }
    
    ul#awesome-menu {
    	width: 900px; margin: 0px auto;
    	list-style: none;
    	background-position:center;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    ul#awesome-menu li { display: inline; }
    	
    ul#awesome-menu li a {
    	display: block; float: left; height: 50px;
    	background-image:url(images/menu-sprite.png); text-indent: -9999px;
    }
    
    	ul#awesome-menu li a.home {
    		width: 180px; background-position: 0 0;	
    	}
    	
    	ul#awesome-menu li a.download {
    		width: 180px; background-position: -180px 0;	
    	}
    	
    	ul#awesome-menu li a.store {
    		width: 180px; background-position: -360px 0;	
    	}
    	
    	ul#awesome-menu li a.forum {
    		width: 180px; background-position: -540px 0;	
    	}
    	
    	ul#awesome-menu li a.contact {
    		width: 180px; background-position: -720px 0;	
    	}
    	
    	
    	ul#awesome-menu li a.home:hover, ul#awesome-menu li a.home:focus {
    		background-position: 0 -50px;	
    	}
    	
    	ul#awesome-menu li a.download:hover, ul#awesome-menu li a.download:focus {
    		background-position: -180px -50px;	
    	}
    	
    	ul#awesome-menu li a.store:hover, ul#awesome-menu li a.store:focus {
    		background-position: -360px -50px;	
    	}
    	
    	ul#awesome-menu li a.forum:hover, ul#awesome-menu li a.forum:focus {
    		background-position: -540px -50px;	
    	}
    	
    	ul#awesome-menu li a.contact:hover, ul#awesome-menu li a.contact:focus {
    		background-position: -720px -50px;	
    	}
    	
    
    a { outline: none; }
    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>Epic</title>
    
    <link rel="stylesheet" href="style.css" type="text/css" />
    
    </head>
    
    <body>
    
    
    
    <div id="Header"></div>
    
    <ul id="awesome-menu">
    	<li><a href="#home" class="home">Home</a></li>
        <li><a href="#download" class="download">Download</a></li>
        <li><a href="#store" class="store">Store</a></li>
        <li><a href="#forum" class="forum">Forum</a></li>
        <li><a href="#contact" class="contact">Contact</a></li>
    </ul>
    
    </body>
    </html>

  • #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 Theteva,
    Some redundancy in your CSS there, margin: 0 auto; sets your left/right margins so there is no need to set those again.

    Try making your CSS look like this to center it -
    Code:
    ul#awesome-menu {
    	width: 900px; 
    margin: 0 auto;
    padding: 0;
    	list-style: none;
    	background-position:center;
    }
    I didn't try it but that gap your seeing looks like ul's default 40px left padding.
    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

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It worked thanx very much


  •  

    Posting Permissions

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