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 to the CF scene
    Join Date
    Nov 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry CSS need centered

    i've been workin at this for about 3 hours and i'm about to pull my hair out. all i need is this centered
    Code:
    <html>
    <head>
    <title>
    </title>
    <style>
    body {
      background-image: url('img/bkg.jpg');
    }
    .clearall {
      clear: both;
      display: hidden;
    }
    #navbar{
      display: block;
      padding: 0px 20px 0px 20px;
      border-top: 5px solid #dddddd;
      border-bottom: 5px solid #dddddd;
      float: left;
    }
    #navbar a #home{
      float: left;
      width: 124px;
      height: 35px;
      background-image: url('img/welcome.gif');
    }
    #navbar a #photos{
      float: left;
      width: 124px;
      height: 35px;
      background-image: url('img/photos.gif');
    }
    #navbar a #aboutus{
      float: left;
      width: 124px;
      height: 35px;
      background-image: url('img/aboutme.gif');
    }
    
    </style>
    </head>
    <body>
    <div id="centerme">
    <div id="navbar">
      <a href="index.htm"><div id="home"></div></a>
      <a href="photos.htm"><div id="photos"></div></a>
      <a href="aboutus.htm"><div id="aboutus"></div></a>
      <div class="clearall"></div>
    </div>
    <div class="clearall"></div>
    </div>
    
    </body>
    </html>
    can anyone help

  • #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 wolfyeb,
    To center something you need 3 things:
    1. DocType
    2. width
    3. margin:0 auto;


    Give this a try:
    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
    <style type="text/css">
    body {
      background: #ccc url('img/bkg.jpg');
    }
    #centerme {
    	width: 412px;
    	margin: 0 auto;
    	background: #69C;
    }
    #navbar{
    	display: block;
    	padding: 0px 20px 0px 20px;
    	border-top: 5px solid #dddddd;
    	border-bottom: 5px solid #dddddd;
    	overflow: auto;
    }
    	#navbar #home a,
    	#navbar #photos a,
    	#navbar #aboutus a{
    		float: left;
    		width: 124px;
    		height: 35px;
    	}
    	#navbar #home a {background: #960 url(img/welcome.gif);}
    	#navbar #photos a {background: #9C9 url(img/photos.gif);}
    	#navbar #aboutus a {background: #CC9 url(img/aboutme.gif);}
    </style>
    </head>
    <body>
        <div id="centerme">
            <div id="navbar">
                <div id="home"><a href="index.htm"></a></div>
                <div id="photos"><a href="photos.htm"></a></div>
                <div id="aboutus"><a href="aboutus.htm"></a></div>
            <!--end navbar--></div>
        <!--end centerme--></div>
    </body>
    </html>
    Last edited by Excavator; 11-03-2009 at 07:26 AM.
    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
    •