CSS question

Discussion in 'Web Design and Development' started by TodVader, Feb 11, 2008.

  1. TodVader macrumors 6502a

    TodVader

    Joined:
    Sep 27, 2005
    Location:
    Quebec, Canada
    #1
    I just started learning CSS with a book I bought. I made this page: www.freewebs.com/csstesting/index2.html . I made this URL for testing purposes because this is just a template I'm testing.

    The sidebar with buttons will be there on all pages.

    The sidebar where it says multiple times "test" is a page specific sidebar. It's a different DIV called "pagenav".

    The sidebar where it says adsense will have ads specific to the page (banner, adsense, etc).

    The header is still not done and I will add other graphics in there to make it look more filled up.

    I will add a styled top navbar similar to the footer but with graphic buttons at the top of the page under the header. (this will make the transition from header to content more "round" and less "square" like it is now.

    Here comes my question:
    I want the left and right sidebars to continue to have their background color down to the footer.

    Like it is now, which ever one is the longest will go down and the other one will cut like you see on the test website.

    If the content is longer than the 2 sidebars, both will cut before the footer.

    is there anything I can do about this?

    Also, any comments on the style? I did all this in about 3-4 hours so I can/will change some stuff for sure.

    Thanks and sorry for my poor english, it's the best I can do :eek:.
     
  2. macgruder macrumors 6502

    Joined:
    Oct 29, 2007
    Location:
    UK
    #2
    Wrap your 3 columns in a div called #content or something. Give #content a background image.
     
  3. big_malk macrumors 6502a

    Joined:
    Aug 7, 2005
    Location:
    Scotland
    #3
    Make one div which contains everything, and has your background, arrange your other divs accordingly inside it. It will extend to the longest content inside it, and the background will continue right across all the content.
    You may need to put something like "<p style='clear: both'> </p>" at the end just inside the big div to fix the layout for IE if I remember correctly, maybe not.

    Set your centre div to have a white background and it will cover up the grey background.

    Edit: What he said, was a bit slow with this post lol
     
  4. TodVader thread starter macrumors 6502a

    TodVader

    Joined:
    Sep 27, 2005
    Location:
    Quebec, Canada
    #4
    For this , use this address: http:www.freewebs.com/csstesting/index2.html

    Thanks to both of you for answering my question. After doing it though, I have a small problem. First, here's what I did:

    Insert <div id="page"> right before my left navigation div and closed it right after the right nav div. I set the middle background white and put a minimum of 1000px(I will probably lower that) height or else some grey would appear if there is less content than the sidebars.

    In my style-sheet, I did this:

    div#page
    {
    background-color: #A2A2A2;
    }

    I tried other stuff in there too but couldn't fine the solution to my problem.

    There is space in between my header and my sidebars/content area. I cannot seem to get it to disappear.

    Thanks for any help or tips!

    p.s. nevermind the nonmatching colors in the header, I will fix this soon.
     
  5. macgruder macrumors 6502

    Joined:
    Oct 29, 2007
    Location:
    UK
    #5
    This should not be a problem if you do correctly. You need a background image to #page. I can't see the gap on the page you have right now.
     
  6. TodVader thread starter macrumors 6502a

    TodVader

    Joined:
    Sep 27, 2005
    Location:
    Quebec, Canada
    #6
    Could you please post a screenshot of what you see at the top? I just put a 1px white image as a background and removed the 1000px min-height and it did the grey in the content area.

    EDIT: Use this address sorry: www.freewebs.com/csstesting/index2.html
     
  7. big_malk macrumors 6502a

    Joined:
    Aug 7, 2005
    Location:
    Scotland
    #8
    Try putting you header div inside the page div, and try explicitly setting margins to 0px.
     
  8. macgruder macrumors 6502

    Joined:
    Oct 29, 2007
    Location:
    UK
    #9
    Code:
    *{
    margin: 0;
    border: 0;
    padding: 0;
    }
    might help.

    As will buying CSS Edit which will pay for itself in time saved in a day.
     

Share This Page