SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background 10px top 30px bottom

    I just received a Photoshop mock-up which you can see here as you can see the background from both columns is about 30 px from the bottom. What would be the best way to do this? Thank you in advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    if you have no other wrapper for the columns, it seems the ideal solution would be

    body{ padding-top:10px; padding-bottom:30px;}

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi dresden. Thanks for the response. I have another wrapper. For now I have taken one of Paul O'B's methods (absoluut positioned divs holding the background image) But that doesn't give the bottom margin, it only extends depending on the content. But is is a start
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by donboe View Post
    Hi dresden. Thanks for the response. I have another wrapper. For now I have taken one of Paul O'B's methods (absoluut positioned divs holding the background image) But that doesn't give the bottom margin, it only extends depending on the content. But is is a start
    If you are using my absolute column technique then you can specify bottom:30px instead of bottom:0 quite easily. Just give the inner content a padding bottom of 3px to keep it clear.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Here's an example although for IE6 you'd need to rub out the top part of the columns with the background of an inner element.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        height:100%;
    }
    p {margin:0 0 1em}
    body {
        background:#09f;
        color:#fff
    }
    #outer {
        width:800px;
        margin:auto;
        min-height:100%;
        position:relative;
        overflow:hidden
    }
    * html #outer {height:100%}
    #col1, #col2 {
        float:left;
        width:160px;
        padding:30px 10px;
        position:relative;
        z-index:2;
    }
    #col2 {
        float:right;
        width:580px;
    }
    .abs1, .abs2 {
        position:absolute;
        left:0;
        top:20px;
        z-index:1;
        bottom:30px;
        width:150px;
        opacity:0.4;
        -ms-filter: "Alpha(Opacity=40)";
        filter:Alpha(Opacity=40);
        background:#00f;
    }
    .abs2 {
        left:200px;
        width:600px;
    }
    * html .abs1, * html .abs2 {
        top:auto;
        height:999em;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="col1">
            <p>Test Column1</p>
        </div>
        <div id="col2">
            <p>Test column 2</p>
        </div>
        <div class="abs1"></div>
        <div class="abs2"></div>
    </div>
    </body>
    </html>

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, your in one word brilliant Mi Gado (means my god) you made my day thanks a lot
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


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
  •