Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Location
    Canyon Lake, Texas
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    When I remove height and min-height, the background disappears.

    The page giving me trouble is here: http://www.artquestbeauty.com/css/index.html

    If I take the "min-height:900px;" out of the content div's CSS, the background image "images/bgdouble.jpg" does not display anymore. However, with that min-height, the content div will not display beyond that 900 pixels. I've read a lot of posts on this kind of question and the advice is to remove float elements, but my float elements are important to the design. Anyone know how to get around this? I just want the content div to expand as needed.

    THANKS!


    HERE is the CSS:

    [CODE]@charset "utf-8";
    /* CSS Document */
    html {
    text-align: center;
    }

    body {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    text-align: center;
    margin: 0px;
    padding: 0px;
    }
    #content {
    position:relative;
    width:1000px;
    min-height:900px;
    z-index:1;
    margin-left:auto;
    margin-right:auto;
    background-image: url(images/bgdouble.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    border: thin solid #E8D7B9;
    text-align: center;
    }
    #text {
    top: 212px;
    border: medium none #069;
    position: absolute;
    height: 103px;
    width: 630px;
    text-align: justify;
    }

    #top {
    position:absolute;
    width:1000px;
    height:215px;
    z-index:2;
    background-image: url(images/top.png);
    background-repeat: no-repeat;
    top: 30px;
    }

    #leftimage {
    position:absolute;
    width:250px;
    height:300px;
    z-index:2;
    left: -20px;
    top: 325px;
    border: thin double #E8D7B9;
    background-image: url(../Images/PerfectSkin.gif);
    background-repeat: no-repeat;
    background-position: right top;
    }
    #intro {
    position:absolute;
    width:auto;
    z-index:3;
    top: 185px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    left: 6px;
    padding-left: 5px;
    text-align: justify;
    }
    h1 {
    font-size: 24px;
    font-weight: bold;
    color: #CAA560;
    font-style: oblique;
    letter-spacing: 0.2em;
    text-align: center;
    }
    h2 {
    font-size: 16px;
    color: #791B1B;
    font-style: italic;
    letter-spacing: .1em;
    padding-left: 24px;
    background-image: url(images/star.png);
    background-repeat: no-repeat;
    background-position: left top;
    height: 23px;
    }
    #foot {
    position:absolute;
    width:1000px;
    height:35px;
    z-index:2;
    bottom: -55px;
    padding-bottom: 0px;
    }
    #foot ul li {
    display: inline;
    list-style-type: disc;
    padding-left: 25px;
    background-image: url(images/star.png);
    background-repeat: no-repeat;
    background-position: left;
    }
    #middle {
    position:absolute;
    width:383px;
    height:316px;
    z-index:3;
    top: 315px;
    left: 249px;
    }
    #underimage {
    position:absolute;
    width:630px;
    height:115px;
    z-index:2;
    top: 630px;
    }
    #sb1{
    width: 1px;
    height: 130px;
    float: left;
    clear: left;
    margin: 0px;
    padding: 0px;
    }

    #sb2 {
    width: 225px;
    height: 300px;
    float: left;
    clear: left;
    margin: 0px;
    padding: 0px;
    }
    #sbr1{
    width: 375px;
    height: 130px;
    float: right;
    clear: right;
    margin: 0px;
    padding: 0px;
    }

    #sbr2 {
    width: 355px;
    height: 200px;
    float: right;
    clear: right;
    margin: 0px;
    padding: 0px;
    }
    #sbr3 {
    width: 375px;
    height: 20px;
    float: right;
    clear: right;
    margin: 0px;
    padding: 0px;
    }
    #sbr4 {
    width: 325px;
    height: 120px;
    float: right;
    clear: right;
    margin: 0px;
    padding: 0px;
    }
    #sbr5 {
    width: 380px;
    height: 105px;
    float: right;
    clear: right;
    margin: 0px;
    padding: 0px;
    }
    #sbr6 {
    width: 500px;
    height: 105px;
    float: right;
    clear: right;
    margin: 0px;
    padding: 0px;
    }
    #menu {
    position:relative;
    width:auto;
    height:auto;
    z-index:5;
    margin-left: auto;
    margin-right:auto;
    top: 0px;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    visibility: inherit;
    right: 0px;
    left: -2px;
    bottom: 0px;
    }
    #menu ul {
    padding: 0;
    list-style: none;
    font-size: 13px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    font-style: italic;
    font-weight: bolder;
    font-variant: small-caps;
    text-align: center;
    display: inline;
    }
    #menu a {
    display: block;
    width: auto;
    background-color: #A72254;
    font-weight: bold;
    color: #FFF;
    font-style: italic;
    font-variant: small-caps;
    letter-spacing: .2em;
    border: medium outset #CB9C56;
    text-decoration: none;
    text-align: center;
    padding-top: 1px;
    padding-right: 3px;
    padding-bottom: 1px;
    padding-left: 3px;
    font-size: 13px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    }
    #menu a:hover {
    display: block;
    width: auto;
    background-color: #FFF;
    font-weight: bold;
    color: #000;
    font-style: italic;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    border: medium outset #A72254;
    text-decoration: none;
    text-align: left;
    padding-top: 1px;
    padding-right: 3px;
    padding-bottom: 1px;
    padding-left: 3px;
    font-size: 13px;
    }
    #menu li {
    float: left;
    width: 166.6px;
    text-align: center;
    }
    #menu li ul {
    position: relative;
    width: 10em;

    }
    #menu li:hover ul {
    left: auto;
    background-color: #A72254;
    border-top-style: inset;
    border-right-style: inset;
    border-bottom-style: inset;
    border-left-style: inset;
    width: 125px;
    }
    #menu ul {
    padding: 0;
    list-style: none;
    font-size: 12px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    position: absolute;
    text-align: center;
    }
    #menu a {
    display: block;
    width: auto;
    background-color: #A72254;
    font-weight: normal;
    color: #FFF;
    font-style: italic;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    border: medium outset #CB9C56;
    text-decoration: none;
    text-align: center;
    padding-top: 1px;
    padding-right: 3px;
    padding-bottom: 1px;
    padding-left: 3px;
    }
    #menu a:hover {
    display: block;
    width: auto;
    background-color: #FFF;
    font-weight: normal;
    color: #000;
    font-style: italic;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    border: medium outset #A72254;
    text-decoration: none;
    text-align: center;
    padding-top: 1px;
    padding-right: 3px;
    padding-bottom: 1px;
    padding-left: 3px;
    }
    #menu li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    }

    #menu li:hover ul {
    left: auto;
    background-color: #A72254;
    border-top-style: inset;
    border-right-style: inset;
    border-bottom-style: inset;
    border-left-style: inset;
    width: 125px;
    }
    ________________________________________HERE IS THE HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>

    <link href="menu.css" rel="stylesheet" type="text/css" />

    <link href="wrap.css" rel="stylesheet" type="text/css" />
    <style type="text/css">

    </style>
    </head>

    <body>

    <div id="content">
    <div id="menu"><ul id="menu">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Services<img src="images/triangle.png" alt="SkinCareServices" width="18" height="12" border="0" /></a>
    <ul>
    <li><a href="#">Condition-Specific Treatments</a></li>
    <li><a href="#">Facials</a></li>
    <li><a href="#">Home Care</a></li>
    <li><a href="#">Lash and Brow Tinting</a></li>
    <li><a href="#">Lash Extensions</a></li>
    <li><a href="#">Makeup Application</a></li>
    <li><a href="#">Permanent Makeup</a></li>
    <li><a href="#">Skin Growth Removal</a></li>
    <li><a href="#">Tattoos</a></li>
    <li><a href="#">Tattoo Removal</a></li>
    <li><a href="#">Waxing</a></li>
    </ul>
    </li>

    <li><a href="#">Testimonials</a></li>
    <li><a href="#">FAQs</a></li>

    </ul></div>

    <div id="foot"><ul>
    <li>Patsy Keim
    </li>
    <li>1395 Sattler Road Suite #2</li>
    <li> Canyon Lake Professional Building
    </li>
    <li>Canyon Lake, TX 78132
    </li>
    <li>830 964-4315<br />
    <a href="contact.html">Contact Us</a>
    </li>
    </ul>

    <!--end of foot div--></div>
    <div id="top"></div>
    <div id="intro">
    <!--sandbag divs-->
    <div id="sb1"><span></span></div>
    <div id="sbr1"></div>
    <div id="sb2"><span></span></div>
    <div id="sbr2"></div>
    <div id="sbr3"></div>
    <div id="sbr4"></div>
    <div id="sbr5"></div>
    <div id="sbr6"></div>
    <!--end sandbag divs-->
    <h1>Skin Care for the whole Family</h1>
    <p>Offering everything your whole family needs for advanced skin care, anti-aging treatments and <a href="permanentmakeup.html">permanent cosmetics</a> in the Texas Hill Country. Whether you're looking for a <a href="facials.html">facial</a>, peel, professional <a href="makeup.html">makeup application</a> for a special event or a full skin care regimen to keep you looking your best for years to come, ArtQuest is here for you.
    <p>Our clients include men, women and children of all ages! Many moms take their young daughters to ArtQuest for a first facial or <a href="waxing.html">waxing</a> because they've already experienced the relaxing, gentle care that Esthetitician Patsy Keim delivers to all her clients. Gift certificates make a terrific gift for any occasion.</p>
    <p><a href="facials.html">Osmosis medi-facials</a> are a great value and include all organic ingredients that provide stunning results. Skin condition-specific treatments target trouble spots effectively. <a href="LashandBrow.html">Lash and brow tinting</a> and <a href="LashandBrow.html">lash extensions</a> are a safe, long-lasting way to enhance your eyes without makeup. A <a href="skintreatments.html">&quot;facial&quot; for your back</a> will give you the confidence you need to look fantastic for that special event.</p>
    <p>Call today for your free skin analysis and consultation.</p>
    <p>Offering everything your whole family needs for advanced skin care, anti-aging treatments and <a href="permanentmakeup.html">permanent cosmetics</a> in the Texas Hill Country. Whether you're looking for a <a href="facials.html">facial</a>, peel, professional <a href="makeup.html">makeup application</a> for a special event or a full skin care regimen to keep you looking your best for years to come, ArtQuest is here for you.
    <p>Our clients include men, women and children of all ages! Many moms take their young daughters to ArtQuest for a first facial or <a href="waxing.html">waxing</a> because they've already experienced the relaxing, gentle care that Esthetitician Patsy Keim delivers to all her clients. Gift certificates make a terrific gift for any occasion.</p>
    <p><a href="facials.html">Osmosis medi-facials</a> are a great value and include all organic ingredients that provide stunning results. Skin condition-specific treatments target trouble spots effectively. <a href="LashandBrow.html">Lash and brow tinting</a> and <a href="LashandBrow.html">lash extensions</a> are a safe, long-lasting way to enhance your eyes without makeup. A <a href="skintreatments.html">&quot;facial&quot; for your back</a> will give you the confidence you need to look fantastic for that special event.</p>
    <p>Call today for your free skin analysis and consultation.</p>

    </div>
    <div id="leftimage"></div>
    <!--end of text div-->
    </div>


    </body>
    </html>
    [CODE]

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It's not so much the floats as all the absolute positioning that's the problem here. Elements with absolute positioning are removed from the flow of the document, so in your case #content has nothing in it that isn't positioned absolutely except the menu - and hence the background image disappears without the min-height as the element isn't high enough to display it.

    I'd suggest removing all the position:absolute, top and left settings from the elements that sit directly under #content. You will then need to do some rework on the css of these elements to fit properly.

    Once this is done, these elements then sit in the normal flow, and hence #content will need to be higher to accommodate them, without the need for min-height.

    Whoever's telling you to remove floats is talking nonsense - there's no reason at all why the use of floats should be discouraged.

    Oh, and please wrap your code in code tags - the hash marks in the editing window - then the post doesn't get too lomng and it's easier to read.

  • Users who have thanked SB65 for this post:

    ontargetpro (10-19-2009)

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Location
    Canyon Lake, Texas
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you very much SB65. Just removing the absolute positioning from two of the elements (top and intro)did the trick. Then it didn't take much to get it all back where it belongs. I appreciate your help so much. I was getting really frustrated!

    On the comments. Sorry, I thought I had commented it out, but obviously I didn't.


  •  

    Tags for this Thread

    Posting Permissions

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