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 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2007
    Location
    Michigan
    Posts
    36
    Thanks
    27
    Thanked 0 Times in 0 Posts

    Exclamation background colors

    I am trying to figure out the style declaration that will enable me to set background colors : left% / center% / right% , say i wanted the left to be #FFFFFF at 25%, the center #000000 at *, and right at 25%. does this make sense? i want to center my page on a black background with white on both sides, or any color combinations set to the positions I desire according to the needs of my pages layout.

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style type="text/css">
    * {margin:0; padding:0;}
    html {background:#fff; height:100%;}
    body {background:#000; color:#fff; width:50%; height:100%; margin:auto;}
    </style>
    
    </head>
    <body>
    <p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    SINCE you are cenetring the content area, the best way to do it will be make a "contentwrap" div that will be centered, and set the padding/margins to 0. give the this contentwrap div wtv background color u want, and then give the body the other background color u want

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,725
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    Quote Originally Posted by srule_ View Post
    SINCE you are cenetring the content area, the best way to do it will be make a "contentwrap" div that will be centered, and set the padding/margins to 0. give the this contentwrap div wtv background color u want, and then give the body the other background color u want
    That's exactly how it works in Fang’s example. I guess it is in older browsers where the body element had only limited stylability but in current browsers you could actually scrap the wrapper div and use the body as such.
    Also in XHTML you have to assign the general page background color to the html element since the body occupies only a part of the viewport.

  • #5
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by VIPStephan View Post
    That's exactly how it works in Fang’s example. I guess it is in older browsers where the body element had only limited stylability but in current browsers you could actually scrap the wrapper div and use the body as such.
    Also in XHTML you have to assign the general page background color to the html element since the body occupies only a part of the viewport.
    I prefer to make a contentwrap div incase i want to ad a boarder to somthing to it later, also gives one more area to add background images ext...

  • #6
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    The example will work in all modern browsers and IE6 & IE7 in standards mode.
    The canvas was 'moved' from body to html in IE6, earlier IE browsers will not display the page as intended. As a consiquence of the change the infamous scrollbar colors must be set in html not body
    Note that it is possible to have a background image in body and html


  •  

    Posting Permissions

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