Css html

Discussion in 'Programming' started by xarzu, Jul 4, 2013.

to remove all ads.
  1. xarzu

    xarzu New Member

    Messages:
    16
    Hello forum. I have inherited a project. It uses CSS to format the body of the web page.

    Its appearance needs reworking. Right now it looks like a bock plopped in the middle of the browser window. I want it to have nice borders and a header going across the top and the bottom.

    Here is what it looks like now:
    [​IMG]

    Here is what I would like it to look like:
    [​IMG]

    I am not as experienced with CSS as I would like to be. But I was able to dig into the code and find where the html was formatted. I am writing this post now because I would prefer if this design was on a table rather than on the entire HTML page.

    The CSS element "html" is defined ni a "main.css" file like this:

    html{background-color:#eee;padding:0px;overflow:auto;height:100%;}html body,html form{background-image:url('../images/body-background.gif');
    width:1200px;margin:0px auto;box-shadow:0 0 15px 15px #bbbbbb;padding:0px;}
    the image
    ../images/body-background.gif
    is not the background of the whitespace on the right and left. This gif file is the background of the block in the middle.

    So, how do I make this declaration a table declaration instead of a declaration and format for the entire page? And once this change has been made, what sort of corresponding code changes do I need to do in other code files?
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,675
    No you wouldn't!!!!!!!

    And shouldn't.


    The ONLY way that is going to happen is by practicing, NOT giving up and stepping backwards fifteen years to use tables at the first hurdle.

    AND rather than applying a lot of rules to the html and body elements you should be adding a 'wrapper' element that is 100% wide 100% long and targeting that with the CSS.
     
  3. xarzu

    xarzu New Member

    Messages:
    16
    I would very much like to know how to add a wrapper element.

    The code was handed to me such that the html element is defined in a css. I am guessing you are saying I should abandon that?
     
  4. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,675
    HTML:
    <html>
    <head>
    </head>
    <body> 
          <div id="something">
    All content goes here.
    
          </div> <!-- /something -->
    </html>
    Then set 100% height on html, body and something, margins and padding to zero on body then your overall background is applied to 'something'
     
  5. Danielle

    Danielle New Member

    Messages:
    5
    Yup, and you could center your wrapper by adding:

    Code:
    .something{
    margin:0 auto;
    }
    
     
  6. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,675
    Only if it is a block element with a fixed width.
     

Share This Page