SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overflow: Hidden is overriding background image

    Ok, last I was able to get the MainContent div to fill in the rest down to the end of the page height with white by specifying overflow:hidden and adding background-color: #fff; to my MainContent div which sites inside MainContainer div.

    Ok, but it's completely painting and negating out my background that #MainContent has set so we lose the background.

    The effect we want is to show the background but once the background ends, fill the rest of the page (at that width) all with white moving down to the end of the page.

    http://www.codezest.com/post/site5.png (MainContent is outlined in red)

    <body>
    <div id="MainContainer">

    <!-- Header -->
    <div id="HeaderMain">
    HeaderMain
    <div id="HeaderContainer">

    </div>

    </div>

    <!-- TopNav Bucket -->
    <div id="SubHeaderMain">
    SubHeaderMain
    <!-- user control -->
    </div>

    <!-- Main Content -->
    <div id="MainContent">


    <div id="LefNavMain">LeftNavMain</div>
    <div id="ProductMainContent">

    </div>
    <div id="ProductRightNav">

    </div>
    <div id="ProductSubAreaMain">

    </div>
    <div id="tabs">

    <ul class="tabImages">
    <li><a href="#PContent"><span><img id="imgPersTab" width="262" height="67" src="/Content/Images/Product/tabA_1.gif" /></span></a></li>
    <li><a href="#OContent"><span><img id="imgOtherPersTab" width="304" height="67" src="/Content/Images/Product/tabA_2.gif" /></span></a></li>
    <li><a href="#RContent"><span><img id="imgRTab" width="216" height="67" src="/Content/Images/Product/tabA_3.gif" /><img id="imgRTab_long" width="304" height="67" src="/Content/Images/Product/tabsB_2.gif" /></span></a><img id="imgTopRightTabFiller" width="216" height="67" src="/Content/Images/Product/tabsE_3.gif" /></li>
    </ul>
    <div id="TabsMain">
    <div id="PersonalizationTabContent">
    <!-- form here -->

    </div>

    <div id="OthersPersonalizedContent">

    --- content Here ---

    </div>
    <div id="ReviewsAndRatingsContent">

    --- Content Here ---

    </div>
    </div>
    </div>
    <div id="TabsMainBottom"></div>

    <div id="ButtonCrossSellMain"></div>

    <!-- Footer -->
    <div id="FooterMain"></div>

    </div>
    </div>
    </body>


    /* CLEAR STYLES
    =====================================================================*/

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100&#37;;
    vertical-align: baseline;
    background: transparent;
    font-family: Helvetica, Arial, sans-serif;
    }

    * {
    padding:0;
    margin:0;
    }



    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }

    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }

    /* remember to highlight inserts somehow! */
    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }

    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    .clearfix:after, .colrow:after
    {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }

    .clearfix, .colrow {display:inline-block;}
    /* Hide from IE Mac \*/
    .clearfix, .colrow {display:block;}
    /* End hide from IE Mac */

    /* Fixes gaps between images issue - Dave */
    img{display:block;}

    /*
    =====================================================================
    STYLES
    =====================================================================
    */



    /* Global Elements
    =====================================================================*/

    body
    {
    background-color: #FAF6F3;
    background-image: url(/content/images/site/backgroundfill.jpg);
    background-repeat: repeat-x;
    margin: 0 auto 0 auto;
    color: #666666;
    font-size: 11px;
    }

    input[type="text"]
    {
    height: 25px;
    vertical-align: middle;
    border: 1px solid #EAE8E1;
    background: transparent url(/content/images/site/textboxgradient.png);
    background-repeat: repeat-x;
    }

    input[type="radio"]
    {
    vertical-align: middle;
    }



    /* Global IDs & Classes
    =====================================================================*/

    #HeaderMain
    {
    width: 970px;
    height: 167px;
    margin: 0px auto 0px auto;
    float: left;
    }

    #MainContainer
    {
    background: url(/content/images/site/990.jpg) no-repeat center top ;
    margin: 0px auto 0px auto;
    width: 990px;
    overflow: hidden;
    }

    #MainContent
    {
    width: 970px;
    margin: 0px auto 0px auto;
    min-height:1000px;
    overflow: hidden;
    background-color: #fff;
    /*border: 1px solid blue;*/
    }

    #SubHeaderMain
    {
    float: left;
    height: 35px;
    width: 970px;
    margin: 0px auto 0px auto;
    /*border: 1px solid green;*/
    }

    /* ----- Web Form related styles ----- */

    /* group form elements & also creates rows
    rather than "hacks" which would be: <br> or use of empty divs */
    fieldset
    {
    background: url(/content/images/site/horizline.jpg) no-repeat 0 100%;
    margin: 5px 0px 0px 0px;
    }

    .formLabel
    {
    font-size: 14px;
    margin: 10px 37px 0px 0px;
    vertical-align:text-top;
    text-align: right;
    width: 220px;
    float: left;
    }

    /* for text next to radiobuttons, checkboxes, etc.
    that require a diff color */
    .fieldInlineLabel
    {
    color: #000;
    vertical-align: middle;
    }

    .formField
    {
    margin: 10px 10px 0px 0px;
    float: left;
    }

    .rowSeperator
    {
    background-image: url(/content/images/site/horizline.jpg) no-repeat;
    }

    /* ----- Error related styles ----- */

    /* includes * next to form fields */
    .requiredText
    {
    color: #7F1517;
    text-align: right;
    margin: 10px 0px 0px 0px;
    float: left;
    }


    /* Product - Main Page
    =====================================================================*/

    #LefNavMain
    {
    float: left;
    width: 170px;
    margin-right: 8px;
    height: 1100px;
    /*border: 1px solid green;*/
    }

    #ProductMainContent
    {
    float:left;
    width:625px;
    margin-right: 8px;
    height:344px;
    /*border: 1px solid green;*/
    }

    #ProductRightNav
    {
    float: right;
    height: 434px;
    width: 135px;
    margin: 0px 0px 10px 0px;
    padding-bottom: 1px;
    margin-top: -1px;
    /*border: 1px solid green;*/
    }

    #ProductSubAreaMain
    {
    width: 625px;
    height: 88px;
    margin: 0px 10px 0px 0px;
    float: left;
    /*border: 1px solid green;*/
    }


    /* aligns the tabs horizontally & flush bottom */

    #tabs
    {
    display: inline-block;
    /*border: 1px solid green;*/
    }

    #tabs li a
    {
    float: left;
    display: inline;
    vertical-align: bottom;
    }

    #tabs li
    {
    float: left;
    display: inline;
    vertical-align: bottom;
    }

    /* end horizontal alignment */

    #TabsMain
    {
    background: url(/content/images/product/sides.gif);
    background-repeat: repeat-y;
    width: 782px;
    float:left;
    /*border: 1px solid green;*/
    }

    #TabsMainBottom
    {
    background: url(/content/images/product/bottom.gif) no-repeat;
    height: 24px;
    width: 782px;
    float: left;
    }

    #ButtonCrossSellMain
    {
    width: 775px;
    float: left;
    height: 178px;
    }

    /* Personalization Form */

    #PersonalizationTabContent
    {
    width: 740px;
    margin: 0px auto 0px auto;
    text-align: center;
    }

    #PersonalizationForm
    {

    display: inline;
    width: 739px;
    float: left;
    }
    Last edited by espresso; Apr 9, 2009 at 13:38.

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How long is the 990.jpg background image on #MainContainer ? Once the overflow is set on #MainContent, it should push #MainContainer to the full height to continue revealing 990.jpg without having to use the white background on #MainContent - if the graphic isn't long enough, you may need to extend it.

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >>>if the graphic isn't long enough, you may need to extend it.

    The graphic definitely is not long enough and can't be. The content within the MainContent will very, it will dynamically change in height so there's no way to have an image long enough since the height will change dynamically. That's why the end of that image goes to a solid color so we can fill in the "rest" downward after that image ends.

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A background colour on #MainContainer won't be of much use either, as it will be wider than the actual background graphic. The extension will need to be behind the main background, so probably the only way to do it would be to enclose #MainContainer within another wrapping div (#Outer ?) and apply a centred, vertically repeating, 970px wide background image to that (and remove the background colour from #MainContent).

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, we don't want to obviously paint a solid color with a pic. So you're saying add an extra wrapper. I guess I could do that and set its background color to whatever offwhte color we want it to pick up with once the MainContainer image ends. If I make that wrapper the same width as the MainContainer can't that cause some issues down the road when 2 divs are the same size?

    Further, it's just amazing to me that I'd have to add another div just to paint a solid color so that the end of the background Picture in MainContainer will be filled down to the rest of the page with that solid color. I guess another div is the only option....but man, I feel divitis now.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by espresso View Post
    So, we don't want to obviously paint a solid color with a pic.
    Well, you will have to, as the fill colour needs to be narrower than #MainContainer and also needs to be behind its background graphic. Such a graphic will only be a very small file size due to only one colour.

    It may be possible to utilise both the html and body elements here to avoid an extra div - will play with this and get back (very late here and need sleep ... ).


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
  •