Member Avatar for jelly46

Why is my footer not appearing at the bottom properly. I applied clear:both; yet noting.

http://www.vellosdesigns.com/newsite/build-2/

Please can you help?

Thanks

  • 2 Contributors
  • 4 Replies
  • 101 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by jelly46
Member Avatar for JorgeM

I looked at the site, I don't see what appears to be a footer. I'll look at the source code once I'm in front of a PC as I assume that i'll be able to see an element that has an ID or class that resembles a footer.

In the mean time, this link may help you with regard to Pushing a Footer to the Bottom of the Web Page

Edited by JorgeM
Member Avatar for jelly46

Hello JorgeM

If you closely the footer is behind the two bottom images.

Thanks for your help.

Member Avatar for JorgeM

OK, so now I see the footer text... In any case, what I did was basically take your content and include it in the template (link above) that I use when I want to create a page with a "sticky" footer. I tested this code on my local machine and it appears to be OK. feel free to tweak it if you find a slight problem as I really didn't have time to validate your styling. When it comes to the sticky footer, margins, padding, floats, etc.. can cause the footer not to stick as expected...

remove the <base> element that I included in the <head> section, just needed that to be able to access your jQuery and images. In addition, remove/modify the background-color I applied on the footer. needed that to see if the footer was actually on the bottom.

<!DOCTYPE html>
<html>
<head>
<base href="http://www.vellosdesigns.com/newsite/build-2/" />
<style>
    html, body {height: 100%;margin: 0;background:#000;}
    h1{color:#787979;}

    #wrapper {min-height:100%;margin: 0 auto -75px;}
    #header {min-width:100%;height:150px;float:left}
    #headerContent {width:1112px;margin:0 auto;}
    #separator, #footer {height:180px;}
    #content {margin:0 auto;width:1112px;padding:15px;}
    #footer {min-width:100%;float:left;color:#fff;background-color:#7f7f7f}
    #footerContent {margin: 0 auto;width:1112px;padding:10px 0px;}

    .address {color:#787979; text-align:right; font-size:12px; float:right; line-height:190%;}
    #gallery {background:#FFF; height:450px;}
    #navcontainer {float:right; margin-top:15px;}
    #navlist li { display: inline; list-style-type: none;  }
    #navlist li a:link {text-decoration:none; color:#787979; font-size:12px;  margin-left:25px;}
    .smallpics {width:545px; height:180px; float:left; margin-top:40px;}
    .s-pic-b,.s-pic-d {margin-left:20px;}
    .s-pic-c,.s-pic-d {padding-top:50px;}
    div.fadehover {position: relative;  }
    img.a {position: absolute;  left: 0;top: 0; z-index: 10; }
    img.b {position: absolute;  left: 0;top: 0; }

</style>

<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script type='text/javascript'>
    $(document).ready(function(){
        $("img.a").hover(
            function() {
                $(this).stop().animate({"opacity": "0"}, "slow");
            },
        function() {
            $(this).stop().animate({"opacity": "1"}, "slow");
        });
    });
</script>

</head>
<body>
  <div id="wrapper">
     <div id="header">
         <div id="headerContent">
            <p><span class="address">Whetstone - 020-8888-8888 <br />Kensington - 020-8888-8888</span></p>
            <img src="logo.png" />
            <div id="navcontainer">
                <ul id="navlist">
                <li><a href="#">Bespoke</a></li>
                <li><a href="#">Contemporary</a></li>
                <li><a href="#">Achitecture &amp; Interiors</a></li>
                <li><a href="#">Management &amp; Build</a></li>
                <li><a href="#">Contact Us</a></li>
                </ul>
            </div>  
         </div>
     </div>
     <div style="clear:both;"></div>
     <div id="content">
            <div id="gallery"></div>

            <div class="smallpics s-pic-a">
                <h1>Bespoke</h1>
                <div class="fadehover">
                    <a href=""><img src="a-bw.png" alt="" class="a" /><img src="a-color.png" alt="" class="b" /></a>
                </div>
            </div>

            <div class="smallpics s-pic-b">
                <h1>Contemporary</h1>
                <div class="fadehover">
                    <a href=""><img src="b-bw.png" alt="" class="a" /><img src="b-color.png" alt="" class="b" /></a>
                </div>
            </div>

            <div class="smallpics s-pic-c">
                <h1>Achitecture &amp; Interiors</h1>
                <div class="fadehover">
                    <a href=""><img src="c-bw.png" alt="" class="a" /><img src="c-color.png" alt="" class="b" /></a>
                </div>
            </div>

            <div class="smallpics s-pic-d">
                <h1>Management &amp; Build </h1>
                <div class="fadehover">
                    <a href=""><img src="d-bw.png" alt="" class="a" /><img src="d-color.png" alt="" class="b" /></a>
                </div>
            </div>
            <div style="clear:both;"></div>   


     </div>
     <div id="separator"></div>
  </div>
  <div id="footer">
      <div id="footerContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  </div>
</body>
</html>
Member Avatar for jelly46

JorgeM thank you mate, thank you so much.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.