SitePoint Sponsor

User Tag List

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

    100% height container - 250px;

    I would like to have a 100% height container (transparant overlay), but instead of having the container stretch from top to bottom I would like the container to start at approx. 250px from the top. is this possible using CSS or should I work with a very high background-image with a 250px transparant section at the top?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you don't need IE6 support then you could do it like this.

    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%
    }
    #outer {
        width:960px;
        margin:-1px auto 0;
        min-height:100%;
        position:relative;
        border-top:1px solid #fff;
    }
    * html #outer {
        height:100%
    }
    #inner {
        margin:250px 0 0;
        width:960px;
        position:relative;
        z-index:2;
    }
    .overlay {
        position:absolute;
        z-index:1;
        width:960px;
        left:0;
        top:250px;
        bottom:0;
        border:1px solid #000;
        background:red;
    }
    * html .overlay{display:none;}
    * html #inner{background:red;border:1px solid #000;width:958px;}
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="inner">
            <h1>Test</h1>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
        <div class="overlay"></div>
    </div>
    </body>
    </html>
    Depending on the exact design there could be a simpler way and you just colour the whole 100% high container and then just rub out the top part with a 250px white background colour (or whatever colour needs to match underneath).

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    An easier approach may be to instead of trying to start it 250px from the top, to put an element over it to erase the top 250px back to whatever you are doing underneath it.

    Though I'd have to see what it is you are actually trying to do... no code, no images, no help.


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
  •