Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.

« previous next »
Pages: [1]   Go Down

Author Topic: stupid css...  (Read 3187 times)

0 Members and 1 Guest are viewing this topic.

yanng1

    Topic Starter


    Beginner

    stupid css...
    « on: December 08, 2008, 09:04:20 AM »
    I'm new w/ CSS.  need help.  my page has styles applied to the <html> and the <body> tags.

    the <HTML> tag has color dark Blue, the <body> has dark grey.

    thing is, I can't make the dark gray body extend all the way to the bottom of every page in the site.  some pages are 'longer' than others.  on the longer pages
    I the grey background of the body stops where my screen stops.

    So if I scroll down, the gray background of the body tag ends. but the body continues.
    looks horrible.
    the css code for my body tag is:

    body{
       background-image: url('http://www.site.com /pic/mainBG.png');
            height:100%; width:865px;
            margin-bottom:0px; margin-right:auto;
            margin-left:auto;  margin-top:0px;"
       }

    can anyone tell me whats wrong?
       







    Logged

    ChrisXPPro



      Adviser

    • Forever Learning
      • Thanked: 4
      • ACB Systems
    • Computer: Specs
    • Experience: Experienced
    • OS: Windows XP
    Re: stupid css...
    « Reply #1 on: December 08, 2008, 09:34:09 AM »
    Common problem - let me reproduce a small item gleaned from the web which should help ...... it outlines this type of problem from standpoint of a side column but the principle can be applied generally.  BTW - check out http://w3schools.com - lots of useful info.

    Quote
    One of the disadvantages of CSS is its inability to be controlled vertically, causing one particular problem which a table layout doesn't suffer from. Say you have a column running down the left side of the page, which contains site navigation. The page has a white background, but you want this left column to have a blue background. Simple, you assign it the appropriate CSS rule:

    Code: [Select]
    #navigation
    {
    background: blue;
    width: 150px
    }

    Just one problem though: Because the navigation items don't continue all the way to the bottom of the screen, neither does the background colour. The blue background colour is being cut off half way down the page, ruining your great design. What can you do!?

    Unfortunately one of the only solutions to this is to cheat, and assign the body a background image of exactly the same colour and width as the left column. You would use this CSS command:

    Code: [Select]
    body
    {
    background: url(blue-image.gif) 0 0 repeat-y
    }

    This image that you place in the background should be exactly 150px wide and the same blue colour as the background of the left column. The disadvantage of using this method is that you can't express the left column in terms of em, as if the user resizes text and the column expands, it's background colour won't.

    Using this method the left column will have to be expressed in px if you want it to have a different background colour to the rest of the page.
    Logged
    Ain't technology great - until it goes wrong!

    kpac

    • Web moderator
    • Moderator


      • Hacker

    • kpac®
      • Thanked: 184
      • Yes
      • Yes
      • Yes
    • Certifications: List
    • Computer: Specs
    • Experience: Expert
    • OS: Windows 7
    Re: stupid css...
    « Reply #2 on: December 08, 2008, 10:28:46 AM »
    You don't really need a color attribute to the <html> tag. I don't think that will do anything to be honest.

    I also wouldn't set the body to a width. You would be better off using a div#container in the CSS.
    Logged

    ChrisXPPro



      Adviser

    • Forever Learning
      • Thanked: 4
      • ACB Systems
    • Computer: Specs
    • Experience: Experienced
    • OS: Windows XP
    Re: stupid css...
    « Reply #3 on: December 08, 2008, 11:21:35 AM »
    Following on kpac ..... if the html tag is addressed in css then it can be useful I believe to have a color mentioned - after a bg image url - which means that if any delay in bg image loading there is a color to show first which could be in a similar hue.

    I agree with kpac re don't assign a width to body .... as he says - use a div which is often called a wrapper ... such as, example ......

    Code: [Select]
    #wrapper {
    background:url(img/background.jpg) #FFFFEE;
    color:#303030;
    margin:0 auto;
    padding:1px 5px;
    width:760px;
    text-align: left;
    }
    The text-align left is part of a centering hack.
    Logged
    Ain't technology great - until it goes wrong!
    Pages: [1]   Go Up
    « previous next »