SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Literally pulling my hair out! on a deadline!

    Hi guys, another amazing footer-div-madness thread! I apologize in advance.

    Everything was going fantastic until I ran into sticky footer issues. Once I solved those, It's now an issue of making my simple #content div stretch to meet the footer every time. I mean, 60&#37; of the time it works, but I'm at 1900x1200 and I don't think my "< /br>"solution is very cross-browser friendly, nor very intelligent.

    I think i've just read too many tutorials on sticky footers that either my positioning settings are way off, or my HTML structure is helter-skelter.
    In any event, my client is very demanding, and I'd like to resolve this issue ASAP.

    TL;DR: The #content div will not stretch to meet the footer. Help! Can't post links as of yet..

    Here's the HTML: hXXp://pastebin.com/HAWxpKR3 - forgot to edit out all the rollover code, whoops
    Here's the CSS: hXXp://pastebin.com/qj7ABVRG

    and the site in question: hXXp://pixelbloq.com/img/probalos.jpg

    thanks in advance,

    bloq
    Last edited by spikeZ; Mar 15, 2010 at 17:00. Reason: email addresses removed!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph, thanks for posting those. Afraid to say I've read most already...
    This isn't so much a stick footer issue as it is that my content div will not stretch to meet the footer at the bottom of the viewport.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Can you post a link to the site in question? It makes everything much easier considering we can actually see colors and images and it makes debugging so much faster since we don't have to make an offline copy of your page to test on
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  5. #5
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, just replace the XX

    hXXp://pixelbloq.com/web/ogilvy/html/

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

    You have fallen into the usual 100&#37; height trap and the methods you are using are completely incorrect for what you want to achieve.

    For example you have set your #content element to 100% high but an element can only base it's height on a parent that has a height defined. If the parent is auto height (i.e. height set by content) or if it only has a min-height applied then it cannot base it's height on anything and collapses to auto.

    If by some chance the parent did have a set height then the layout would still be broken because you would now have an element inside a parent that was 100% high had a top margin of 61px and starts half way down the page to begin with.

    That would mean your #content was now about 150% high and thus breaking out of the parent and breaking the layout. It would also means that real content inside #content could never grow pass the height set.

    Suffice to say you cannot use 100% height in that way which is why we have a faq explaining the issue (see my sig for a link to the faqs).

    You have one shot at 100% height and that is the first element on the page that has the min-height:100% applied. This is the only element that will stretch to the bottom and if you want a background to extend to the footer then you must use it on this element.

    You can easily apply background colours to your header elements etc to rub out the bits you don't want to see at the top and to create the illusion that the content is starting some way down the page.

    It is impossible to start an element half way down the page and then say "just go to the bottom" (unfortunately).

    Use the main container for your background and just rub out the bits you want to be in another background colour by using the inner elements.

    The faq also explains how to apply a sticky footer correctly because the method you are using is an old and broken method and won't work properly in ie7, ie8 and opera.

    The sticky footer in the forum faq is the only one in the world that works in all those browsers (the original sticky footer was actually created here in the forums with my help around 2003 so we are very experienced with its problems here).

    Also remove that clip rule from #content as it makes no sense and only applies to absolutely positioned elements anyway.

    Without access to the images etc I couldn't see what the page was supposed to look like but this is a rough idea of what you need to do.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>CompanyName - PageName</title>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="description" content="Description" />
    <meta name="keywords" content="Keywords" />
    <meta name="author" content="pixelbloq" />
    <link href="../css/styles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    @charset "utf-8";
    /* CSS Document */
    
    * {
        padding: 0;
        margin: 0;
        border: 0;
    }
    #main {
        padding-bottom: 100px;
    }  /* must be same height as the footer */
    html, body {
        padding:0;
        height:100%;
        margin:0;
    }
    body{
        background:#000 url(../img/bg_tile.gif);
    }
    #container {
        min-height:100%;
        position:relative;
        margin: auto;
        width: 915px;
        font-size: 62.5%;
        background: #D2D4D1;
    }
    * html #container{height:100%}
    #header {
        background:#000;
        height: 175px;
        width: 915px;
        padding-top: 25px;
        text-align: left;
        position: relative;
    }
    #content {
        margin-right: auto;
        margin-left: auto;
        text-align: left;
        width: 915px;
        position: relative;
        overflow: auto;
        padding-top: 61px;
    }
    #content p {
        padding-right: 215px;
        padding-bottom: 50px;
        padding-left: 50px;
        font-family: Tahoma, Geneva, sans-serif;
        color: #000;
        text-decoration: none;
        word-spacing: 0.1em;
        text-align: left;
        letter-spacing: 0.05em;
        line-height: 1.2em;
        font-size: 1.1em;
    }
    #navbar {
        height: 41px;
        width: 915px;
        position: absolute;
        background:green;
    }
    #langBar {
        height: 20px;
        width: 915px;
        position: absolute;
        margin-top: 41px;
    }
    #footer {
        position:relative;
        height:100px;
        width: 915px;
        clear: both;
        margin-top: -100px;
        margin-right: auto;
        margin-left: auto;
        background:#000;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        display: inline-block;
    }
    /* Hides from IE-mac \*/
    * html .clearfix {
        height: 1%;
    }
    .clearfix {
        display: block;
    }
    /* End hide from IE-mac */
    /*Opera Fix*/
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
    h1, h2, p {
        padding:0 10px;
    }
    #container:after {
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    
    
    
    </style>
    </head>
    <body onload="MM_preloadImages('../img/nav_r_ocoiffureandspa.jpg','../img/nav_r_services.jpg','../img/nav_r_staff.jpg','../img/nav_r_events.jpg','../img/nav_r_consult.jpg','../img/nav_r_press.jpg','../img/nav_r_contact.jpg')">
    <div id="container">
        <div id="main" class="clearfix">
            <div id="header"></div>
            <div id="navbar"> <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('O Coiffure and Spa','','../img/nav_r_ocoiffureandspa.jpg',1)"><img src="../img/nav_ocoiffureandspa.jpg" alt="O Coiffure and Spa" name="O Coiffure and Spa" width="132" height="41" border="0" id="O Coiffure and Spa" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','../img/nav_r_services.jpg',1)"><img src="../img/nav_services.jpg" alt="Salon and Spa Services" name="services" width="130" height="41" border="0" id="services" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('staff','','../img/nav_r_staff.jpg',1)"><img src="../img/nav_staff.jpg" alt="Our Staff" name="staff" width="130" height="41" border="0" id="staff" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Events','','../img/nav_r_events.jpg',1)"><img src="../img/nav_events.jpg" alt="Events" name="Events" width="130" height="41" border="0" id="Events" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Consult','','../img/nav_r_consult.jpg',1)"><img src="../img/nav_consult.jpg" alt="Consult O Coiffuire" name="Consult" width="131" height="41" border="0" id="Consult" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Press','','../img/nav_r_press.jpg',1)"><img src="../img/nav_press.jpg" alt="O Coiffure Press and Media" name="Press" width="130" height="41" border="0" id="Press" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../img/nav_r_contact.jpg',1)"><img src="../img/nav_contact.jpg" alt="Contact O Coiffure &amp; Spa" name="Contact" width="132" height="41" border="0" id="Contact" /></a> </div>
            <div id="langBar"> <img src="../img/langBar.jpg" alt="Language Bar" width="915" height="20" border="0" usemap="#language" />
                <map name="language" id="language">
                    <area shape="rect" coords="846,2,913,20" href="languageChange" />
                </map>
            </div>
            <div id="content">
                <p>THIS IS THE DIV CONTENT THAT WON'T STRETCH! </p>
            </div>
        </div>
    </div>
    <div id="footer"><img src="../img/footer.png" alt="footer" width="915" height="100" border="0" usemap="#Map" />
        <map name="Map" id="Map">
            <area shape="rect" coords="336,24,375,45" href="index.html" alt="O Coiffure &amp; Spa" />
            <area shape="rect" coords="393,22,475,44" href="#" alt="Privacy Policy" />
            <area shape="rect" coords="496,23,575,43" href="#" alt="Terms of Use" />
            <area shape="rect" coords="596,21,663,44" href="#" alt="Contact O Coiffure &amp; Spa" />
            <area shape="rect" coords="786,32,885,49" href="http://www.pixelbloq.com" target="_blank" />
        </map>
    </div>
    </body>
    </html>
    Hope that helps

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ok I see you posted a link

    Here it is with your images in place.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>CompanyName - PageName</title>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="description" content="Description" />
    <meta name="keywords" content="Keywords" />
    <meta name="author" content="pixelbloq" />
    <link href="../css/styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    <style type="text/css">
    @charset "utf-8";
    /* CSS Document */
    * {
        padding: 0;
        margin: 0;
        border: 0;
    }
    /*Opera Fix*/
    body:before {/* thanks to Maleika (Kohoutec)*/
        content:"";
        height:100&#37;;
        float:left;
        width:0;
        margin-top:-32767px;/* thank you Erik J - negate effect of float*/
    }
    #outer:after {/* thank you Erik J - instead of using display table for ie8*/
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    #main {
        padding-bottom: 100px;
    }  /* must be same height as the footer */
    html, body {
        padding:0;
        height:100%;
        margin:0;
    }
    body {
        background: url(http://pixelbloq.com/web/ogilvy/img/bg_tile.gif);
    }
    #container {
        min-height:100%;
        margin: auto;
        width: 915px;
        font-size: 62.5%;
        background:#D2D4D1;
    }
    * html #container {
        height:100%
    }
    #header {
        background:#000 url(http://pixelbloq.com/web/ogilvy/img/main_header.png) no-repeat 0 25px;
        height: 175px;
        width: 915px;
        padding-top: 25px;
        text-align: left;
    }
    #content {
        margin: auto;
        text-align: left;
        width: 915px;
        overflow: auto;
        position: relative;
    }
    #content p {
        padding-right: 215px;
        padding-bottom: 50px;
        padding-left: 50px;
        font-family: Tahoma, Geneva, sans-serif;
        color: #000;
        text-decoration: none;
        word-spacing: 0.1em;
        text-align: left;
        letter-spacing: 0.05em;
        line-height: 1.2em;
        font-size: 1.1em;
    }
    #navbar {
        height: 41px;
        width: 915px;
    }
    #langBar {
        height: 20px;
        width: 915px;
    }
    #footer {
        height:100px;
        width: 915px;
        clear: both;
        margin-top: -100px;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        background:#191a18;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        display: inline-block;
    }
    /* Hides from IE-mac \*/
    * html .clearfix {
        height: 1%;
    }
    .clearfix {
        display: block;
    }
    /* End hide from IE-mac */
    </style>
    </head>
    <body onload="MM_preloadImages('../img/nav_r_ocoiffureandspa.jpg','../img/nav_r_services.jpg','../img/nav_r_staff.jpg','../img/nav_r_events.jpg','../img/nav_r_consult.jpg','../img/nav_r_press.jpg','../img/nav_r_contact.jpg')">
    <div id="container">
        <div id="main" class="clearfix">
            <div id="header"></div>
            <div id="navbar"> <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('O Coiffure and Spa','','../img/nav_r_ocoiffureandspa.jpg',1)"><img src="http://pixelbloq.com/web/ogilvy/img/nav_ocoiffureandspa.jpg" alt="O Coiffure and Spa" name="O Coiffure and Spa" width="132" height="41" border="0" id="O Coiffure and Spa" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','../img/nav_r_services.jpg',1)"><img src="http://pixelbloq.com/web/ogilvy/img/nav_services.jpg" alt="Salon and Spa Services" name="services" width="130" height="41" border="0" id="services" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('staff','','../img/nav_r_staff.jpg',1)"><img src="http://pixelbloq.com/web/ogilvy/img/nav_staff.jpg" alt="Our Staff" name="staff" width="130" height="41" border="0" id="staff" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Events','','../img/nav_r_events.jpg',1)"><img src="http://pixelbloq.com/web/ogilvy/img/nav_events.jpg" alt="Events" name="Events" width="130" height="41" border="0" id="Events" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Consult','','../img/nav_r_consult.jpg',1)"><img src="http://pixelbloq.com/web/ogilvy/img/nav_consult.jpg" alt="Consult O Coiffuire" name="Consult" width="131" height="41" border="0" id="Consult" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Press','','../img/nav_r_press.jpg',1)"><img src="http://pixelbloq.com/web/ogilvy/img/nav_press.jpg" alt="O Coiffure Press and Media" name="Press" width="130" height="41" border="0" id="Press" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../img/nav_r_contact.jpg',1)"><img src="http://pixelbloq.com/web/ogilvy/img/nav_contact.jpg" alt="Contact O Coiffure &amp; Spa" name="Contact" width="132" height="41" border="0" id="Contact" /></a> </div>
            <div id="langBar"> <img src="http://pixelbloq.com/web/ogilvy/img/langBar.jpg" alt="Language Bar" width="915" height="20" border="0" usemap="#language" />
                <map name="language" id="language">
                    <area shape="rect" coords="846,2,913,20" href="languageChange" />
                </map>
            </div>
            <div id="content">
                <p>O Coiffure & Spa was created in 1981 to provide a foundation for the advancement of beauty, therapy, and holistic body treatment in the heart of Montreal. Our goal is to provide sanctuary and relaxation, a departure from the frenzy of urbanized life.</p>
                <p>Through this, O Coiffure & Spa interface and facilitate professional service with a complete and nurturing environment. In synthesizing the ideals of beauty, wellness, and relaxation we afford our customers the highest levels of satisfaction. O Coiffure and Spa strives to eliminate the traditional barriers between client and service by emphasizing the importance of establishing respectful and sustainable bonds.</p>
                <p>We at O Coiffure & Spa strictly adhere to wholly transparent and straightforward business practices. As each client is unique, so is our approach to treatment – our professional staff uses products of the highest quality to ensure the development of personalized programs, catering not only to immediate needs, but also promoting health of body and mind in the long-term.</p>
                <div id="spacemain"></div>
                </p>
            </div>
        </div>
    </div>
    <div id="footer"><img src="http://pixelbloq.com/web/ogilvy/img/footer.png" alt="footer" width="915" height="100" border="0" usemap="#Map" />
        <map name="Map" id="Map">
            <area shape="rect" coords="336,24,375,45" href="index.html" alt="O Coiffure &amp; Spa" />
            <area shape="rect" coords="393,22,475,44" href="#" alt="Privacy Policy" />
            <area shape="rect" coords="496,23,575,43" href="#" alt="Terms of Use" />
            <area shape="rect" coords="596,21,663,44" href="#" alt="Contact O Coiffure &amp; Spa" />
            <area shape="rect" coords="786,32,885,49" href="http://www.pixelbloq.com" target="_blank" />
        </map>
    </div>
    </body>
    </html>

  8. #8
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I could kiss you I'm so relieved...thanks a bunch. Big love.

    I just replaced the colors you set with my bg tile and voila. I had a feeling it was the 100% issue, especially in getting something midway down the screen to extend infinitely (impossible). That was why I was fiddling with positioning (relative and abs), ergo the clip.

    Onto new things! do you recommend using a flash text replacer for custom font headings (I'm fairly comfortable with flash), or just exporting a .png for each one? If i choose the latter, do I define a css for each heading, or just make a generalized one, e.g. '.imgh24'

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by origen View Post

    Onto new things! do you recommend using a flash text replacer for custom font headings (I'm fairly comfortable with flash), or just exporting a .png for each one? If i choose the latter, do I define a css for each heading, or just make a generalized one, e.g. '.imgh24'
    I prefer plain text but then I'm not a graphic designer

    Sifr or cufon are ok.

    If you want to use pngs then make sure you have some replacement text in the html for screen readers and the like to make sense of it.

  10. #10
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PROPER DEMO LINK IN POST BELOW

    I've decided to forgo the flash\js text replacement and just use PNG. What are the drawbacks you mention of using png over gif for display text?

    Anyway, new problem.

    I'm trying to add a little flavour to the bottom of the page, and getting an image to sink to the bottom of my content div down to the footer (a sticky image?) I've read things on getting img content to the bottom of a div, but nothing seems to explain it in the context of a site using a sticky footer.

    imageWrapper and bottomImage are the two new divs that aren't playing well with the footer. Yet again I think it's a positioning problem mixed in with margin, or perhaps it isn't possible at all?



    HTML:
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    	<title>O Coiffure & Spa :: Montreal's Finest Urban Spa and Salon</title>
    	<meta http-equiv="Content-Language" content="en-us" />
    	<meta http-equiv="imagetoolbar" content="no" />
    	<meta name="MSSmartTagsPreventParsing" content="true" />
    	<meta name="O Coiffure & Spa, " content="Description" />
    	<meta name="O Coiffure & Spa, O, Coiffure, Spa, Montreal, Ogilvy, Salon, Downtown" content="Keywords" />
    	<meta name="author" content="pixelbloq" />
     
     
     
    <link href="../css/styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
     
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
     
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
     
     
     
     
     
     
    <body onload="MM_preloadImages('../img/nav_r_ocoiffureandspa.jpg','../img/nav_r_services.jpg','../img/nav_r_staff.jpg','../img/nav_r_events.jpg','../img/nav_r_consult.jpg','../img/nav_r_press.jpg','../img/nav_r_contact.jpg')">
    <div id="container">
    <div id="main" class="clearfix">
            <div id="header"><img src="../img/main_header.png" width="915" height="175" alt="O Coiffure &amp; Spa" longdesc="http://ocoiffureandspa.com" /></div>
     
            <div id="navbar"> <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('O Coiffure and Spa','','../img/nav_r_ocoiffureandspa.jpg',1)"><img src="../img/nav_ocoiffureandspa.jpg" alt="O Coiffure and Spa" name="O Coiffure and Spa" width="132" height="41" border="0" id="O Coiffure and Spa" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','../img/nav_r_services.jpg',1)"><img src="../img/nav_services.jpg" alt="Salon and Spa Services" name="services" width="130" height="41" border="0" id="services" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('staff','','../img/nav_r_staff.jpg',1)"><img src="../img/nav_staff.jpg" alt="Our Staff" name="staff" width="130" height="41" border="0" id="staff" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Events','','../img/nav_r_events.jpg',1)"><img src="../img/nav_events.jpg" alt="Events" name="Events" width="130" height="41" border="0" id="Events" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Consult','','../img/nav_r_consult.jpg',1)"><img src="../img/nav_consult.jpg" alt="Consult O Coiffuire" name="Consult" width="131" height="41" border="0" id="Consult" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Press','','../img/nav_r_press.jpg',1)"><img src="../img/nav_press.jpg" alt="O Coiffure Press and Media" name="Press" width="130" height="41" border="0" id="Press" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../img/nav_r_contact.jpg',1)"><img src="../img/nav_contact.jpg" alt="Contact O Coiffure &amp; Spa" name="Contact" width="132" height="41" border="0" id="Contact" /></a> </div>
     
            <div id="langBar"> <img src="../img/langBar.jpg" alt="Language Bar" width="915" height="20" border="0" usemap="#language" />
                <map name="language" id="language">
                    <area shape="rect" coords="846,2,913,20" href="languageChange" />
                </map>
            </div>
     
            <div id="content">
            	<div id="h1img"></div>
              <p>O Coiffure & Spa was created in 1981 to provide a foundation for the advancement of beauty, therapy, and holistic body treatment in the heart of Montreal. Our goal is to provide sanctuary and relaxation, a departure from the frenzy of urbanized life.<br />
    <br />
     
    Through this, O Coiffure & Spa interface and facilitate professional service with a complete and nurturing environment. In synthesizing the ideals of beauty, wellness, and relaxation we afford our customers the highest levels of satisfaction. O Coiffure and Spa strives to eliminate the traditional barriers between client and service by emphasizing the importance of establishing respectful and sustainable bonds.<br />
    <br />
     
    We at O Coiffure & Spa strictly adhere to wholly transparent and straightforward business practices. As each client is unique, so is our approach to treatment – our professional staff uses products of the highest quality to ensure the development of personalized programs, catering not only to immediate needs, but also promoting health of body and mind in the long-term.<br />
    <br /> 
     
     
     
    </p>
    <div id="imageWrapper">
       <img src="../img/footer_woman2.png" width="915" height="210" id="bottomImage" alt="woman" />
       </div>
     
     
            </div> <!--end content div-->
        </div> <!--end main div-->
    </div> <!--end container div-->
     
    <div id="footer"><img src="../img/footer.png" alt="footer" width="915" height="100" border="0" usemap="#Map" />
    <map name="Map" id="Map">
            <area shape="rect" coords="336,24,375,45" href="index.html" alt="O Coiffure &amp; Spa" />
            <area shape="rect" coords="393,22,475,44" href="#" alt="Privacy Policy" />
            <area shape="rect" coords="496,23,575,43" href="#" alt="Terms of Use" />
            <area shape="rect" coords="596,21,663,44" href="#" alt="Contact O Coiffure &amp; Spa" />
            <area shape="rect" coords="786,32,885,49" href="http://www.pixelbloq.com" target="_blank" />
        </map>
    </div>
     
    </body>
     
    </html>

    and css:
    Code CSS:
    /* CSS Document */
     
    * {
        padding: 0;
        margin: 0;
        border: 0;
    }
    #main {
    	padding-bottom: 100px;
    }  /* must be same height as the footer */
    html, body {
        padding:0;
        height:100&#37;;
        margin:0;
    }
    body{
    	background-color: #000;
    	background-image: url(../img/bg_tile.gif);
    }
    #container {
    	min-height:100%;
    	position:relative;
    	margin: auto;
    	width: 915px;
    	font-size: 62.5%;
    	background-color: #E7EEE6;
    }
    * html #container{height:100%}
    #header {
    	height: 175px;
    	width: 915px;
    	padding-top: 25px;
    	text-align: left;
    	position: relative;
    	background-image: url(../img/bg_tile.gif);
    }
     
    #navbar {
    	height: 41px;
    	width: 915px;
    	position: absolute;
    	z-index: 2;
    }
    #langBar {
        height: 20px;
        width: 915px;
        position: absolute;
        margin-top: 41px;
    }
    #content {
        margin-right: auto;
        margin-left: auto;
        text-align: left;
        width: 915px;
        position: relative;
        overflow: auto;
        padding-top: 61px;
    }
    #content p {
    	padding-right: 215px;
    	padding-bottom: 50px;
    	padding-left: 50px;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #000;
    	text-decoration: none;
    	word-spacing: 0.1em;
    	text-align: left;
    	letter-spacing: 0.05em;
    	line-height: 1.25em;
    	font-size: 1.1em;
    }
    #h1img {
    	background-image: url(../img/headers/philosophy.png);
    	height: 26px;
    	width: 273px;
    	margin-top: 25px;
    	margin-right: 0px;
    	margin-bottom: 20px;
    	margin-left: 50px;
    }
     
    #imageWrapper {
    	position: relative;
    } /* height is for display purposes only */
    #bottomImage {
    	position: absolute;
    	bottom: 0;
    } 
     
    #footer {
    	position:relative;
    	height:100px;
    	width: 915px;
    	clear: both;
    	margin-top: -100px;
    	margin-right: auto;
    	margin-left: auto;
    	background-image: url(../img/bg_tile.gif);
    }
     
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        display: inline-block;
    }
    /* Hides from IE-mac \*/
    * html .clearfix {
        height: 1%;
    }
    .clearfix {
        display: block;
    }
    /* End hide from IE-mac */
    /*Opera Fix*/
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
    h1, h2, p {
     
    }
    #container:after {
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }

    thanks in advance, again!

  11. #11
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and here's the demo link: http://pixelbloq.com/web/ogilvy/test/html/

    clarification: image i'm referring to is footer_woman2.png

  12. #12
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by origen View Post
    ..., and getting an image to sink to the bottom of my content div down to the footer (a sticky image?) I've read things on getting img content to the bottom of a div, but nothing seems to explain it in the context of a site using a sticky footer.

    imageWrapper and bottomImage are the two new divs that aren't playing well with the footer. Yet again I think it's a positioning problem mixed in with margin, or perhaps it isn't possible at all?
    ...
    The AP image would rather move to be last in code inside the block it is positioned in.
    Code:
          </div> <!--end content div-->
        </div> <!--end main div-->
      <div id="imageWrapper">
        <img src="../img/footer_woman2.png" id="bottomImage" alt="woman" height="210" width="915">
      </div>
    </div> <!--end container div-->
    Css changes:
    Code:
    #imageWrapper {
    	position: absolute;
    	bottom: 100px;
    }
    /*
    #bottomImage { /* remove this */
    	position: absolute;
    	bottom: 0;
    }
    */
    Happy ADD/ADHD with Asperger's

  13. #13
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mmmmmmmm....yummy. a million thanks, my golden friend.


Tags for this Thread

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
  •