SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with a CSS Layout

    Hey Everyone-

    I am working on a big project and chose a 3 column layout from http://www.bluerobot.com as my start. I have done some fairly good research on CSS layout, but I am definitely going to have some struggles along the way.

    Right now I am trying to add a header to the layout. I want it to stretch as wide as the broswer window while maintaining a 20px border on the left and right. I can't seem to get it to work. Could someone help me out?

    The page is RIGHT HERE

    Thanks!

    Also-

    I plan on using an image for the header. I'm not exactly sure what the height will be and it may change throughout the construction. Is there anyways to set it so that no matter how tall the header, the 3 columns are still 5 px below?
    Last edited by Adam P.; Jul 19, 2002 at 18:58.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  2. #2
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #header{
    background-color: #EEE;
    border: solid 1px #000;
    margin-left: 20px;
    margin-right: 20px;
    }
    ----Adopt-a-Sig----
    Your message here!

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2001
    Posts
    439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and to keep the 3 columns 5px below, add:
    margin-bottom:5px;

  4. #4
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    K, here it is now: http://www.help4newbies.com/css/exp4.html

    The margin-bottom works for the center column b/c it is positioned relatively. But the outer columns are positioned absolutely, so the margin-bottom doesn't do anything to them. Any workaround? Maybe someone can just help me clean up the code a bit?

    Thanks

    Also, I plan on adding more boxes in the side columns - how could I do this? Thanks!
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2001
    Posts
    439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all the margins looked fine for me on all columns.....

    anyway, if you want to add more boxes in the side columns, you can simply add more <div's> within whichever column you like....

    but if you want to add more boxes to a side column that are not part of the existing boxes, you should setup a container div....for example, use #navalpha as a container, with no background or border properties, then just place all the other <div's> you want inside that with the appropriate styles.....

    hope that made some sense....if you need any specific help, let me know.....

    cheers

  6. #6
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey, thanks!

    I know that the margins look fine, but that's because the outer columns are positioned absolutely - top:76px. I want to make it so that the margins work BECAUSE OF the margin-bottom:5px in the header DIV.

    Basically, I want this to be the end result to be close to this:



    A bunch of boxes with a 5px gap between all of them. (DEC IMG stands for decorative image).

    Thanks!
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  7. #7
    SitePoint Evangelist
    Join Date
    Oct 2001
    Posts
    439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    achieving that should be no problem...

    if you dont want to use absolute positioning, you could do it with fixed width columns....that way all the margin stuff will work fine....the only problem is the columns wont be liquid....(I dont know if you want them liquid or not)

    for your layout, I would just set up master divs for each page section, and then fill the boxes in.....

    if you want me to do a sample of that layout, I would be glad to give it a go....

  8. #8
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by mvd
    achieving that should be no problem...

    if you dont want to use absolute positioning, you could do it with fixed width columns....that way all the margin stuff will work fine....the only problem is the columns wont be liquid....(I dont know if you want them liquid or not)

    for your layout, I would just set up master divs for each page section, and then fill the boxes in.....

    if you want me to do a sample of that layout, I would be glad to give it a go....
    Actually, the two outercolumn are fixed width. Only the center one isn't (which is how I want it to be).

    I think I know what you're saying about the DIVs. It's just that this is my first time working with a CSS layout and I'm still not sure how everything works.

    If you have time, I would really appreciate a sample. But don't feel obligated - only if you have time.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com


Bookmarks

Posting Permissions

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