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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Feb 2007
    Posts
    217
    Thanks
    25
    Thanked 1 Time in 1 Post

    centering header

    I'm having trouble getting a header centered, the coding below speaks for itself, I've tried several things to get the header centered, however it doesnt do the job, how can I alter my coding so that the header will be horizontal centered?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>
    <style type="text/css">
    body {background: yellow;margin:0px;}
    .container { font-size:10px;width: 770px; text-align:center;margin-left:auto;margin-right:auto;}
    .header {background: url(header_top.jpg) top no-repeat;height:160px;}
    </style>

    </head>
    <body>
    <div class="container">
    <div class="header">
    test
    </div>
    </div>

    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Nov 2006
    Posts
    246
    Thanks
    13
    Thanked 26 Times in 24 Posts
    I don't really see a problem. I tried it in Firefox 2 and it worked fine. if it's centering the header without having the text inside it centered, you can just take out text-align:center; in .container. It'll remain centered without the text being centered. What browser(s) are you trying it in?

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by docock View Post
    […] the coding below speaks for itself […]
    Indeed, the code speaks for itself…

    Fix your site with the right doctype.

    P.S.: Rule number one in website development: First comes the content, then the styling. Before you start messing around with CSS put some real content. No need to style a “header” if that’s the only thing you currently have because with different content/meaning the approach of styling it is different later on.
    Last edited by VIPStephan; 12-28-2007 at 12:57 AM.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try this for size.

    Frank.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    
    <title>Untitled</title>
    <style type="text/css">
    body {background: yellow;
    width:100&#37;;
    margin:0px;
    color:#000;
    Font-size:1.2em;}
    
    .container { 
    font-size:1.5em;
    width: 100%; 
    text-align:center;
    margin-left:
    auto;margin-right:auto;}
    
    .header {
    background: url(header_top.jpg); 
    background: no-repeat;
    height:160px;
    text-align:center;}
    </style>
    
    </head>
    <body>
    <div class="container">
    <div class="header">
    test
    </div>
    </div>
    
    </body>
    </html>
    Last edited by effpeetee; 12-28-2007 at 10:40 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Although IDs would be more appropriate than classes.


  •  

    Posting Permissions

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