Invisible Footer

HTML & CSS
1

Hey all, I’m designing my first site using only css and I can’t seem to make the footer appear. I’ve tried a bunch of variations, putting the footer inside and outside the main div but I can’t seem to get it to work(by work i mean I can’t get the repeating-x background to show up - although writing in <p> tags works ok). Any hints on what I’m doing wrong would be greatly appreciated!
Also there is a gap up top that doesn’t go away even using:

  • { margin:0; padding:0; } Any ideas?

Thanks!!!

CSS:

<!--Reset-->

* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }

<!--General-->

.cleaner {
	clear:both;
	margin: 0px;
	padding: 0px;
}

body {
	text-align:center;
	background-color:#000;
	margin: 0px;
}

div#wrapper {
	width: 960px;
	margin: 0 auto;
	background-color:#FFF;
	height: 1035px;
}


<!--Header-->
...


/*MENU */
 
...

<!--Cuerpo-->
div#cuerpo {
	height: 904px;
}

div#flash {
	height: 200px;
	background:url('../images/flashreplace.jpg') no-repeat;
}

div#quote {
	height: 205px;
	background:url('../images/quotes.gif') no-repeat bottom left;
}

div#quote h1 {
	font:25px bold Arial, Helvetica, sans-serif;
	color:#000;
	background:url('../images/red_arrow.gif') no-repeat center left;
	padding: 10px 0px 13px 60px;
	margin: 20px 0px 0px 10px;
	text-align: left;
}

div#quote p {
	color:#aaa;
	margin: 35px 50px 0px 155px;
	text-align: justify;
	font-size: 16px;
	font-weight: bold;
}

div#quote p span{
	color:#666;
	font-size: 16px;
	font-weight: bold;
	padding: 0px 0px 0px 535px;
}

div#bottomblock {
	height: 295px;	
}

div#products{
	height: 295px;
	float:left;
	width:450px;
	background:url('../images/moto.gif') no-repeat center left;
	margin: 10px 0px 0px 0px;
	overflow:hidden;
}

div#form {
	height: 295px;
	float:left;
	width:450px;
/*	background:url('../images/moto.gif') no-repeat center left;*/
	margin: 10px 0px 0px 0px;
	overflow:hidden;
}


div#products h1, div#form h1{
	font:25px bold Arial, Helvetica, sans-serif;
	color:#000;
	background:url('../images/red_arrow.gif') no-repeat center left;
	padding: 10px 0px 13px 60px;
	margin: 0px 0px 0px 10px;
	text-align: left;
}

div#products ul{
	margin: 25px 0px 0px 165px;	
}

div#products li{
	font-size: 19px;
	font-weight: bold;
	text-align: left;
	line-height: 30px;
	list-style-type: none;
	color:#333;
}

div#products li.light{
	color:#777;
}
div#products li.petit a{
	color:#09C;
	font-size:12px;
	text-decoration:none;	
}
div#products a{
}

div#time {
	height: 295px;
	width: 510px;
	float:left;
	background:url('../images/clock.gif') no-repeat center top;
	margin-top: 30px;
}

div#table{
	margin: 130px auto 0px auto;
	width: 340px;
	text-align:left;
}

div#table h2{
	font:Arial, Helvetica, sans-serif 16px bold;
	margin: 0px 10px;
	color:#666;
}

div#tleft {
	float:left;
}

div#tright {
	float:right
}




<!--Footer-->

div#footer{
	background:url('../images/footer.gif') repeat-x center top;
	height:120px;
	width:960px;
	clear:both;
	text-align:center;
	position: relative;
	background-color:#0F0;
	z-index: 1001;
	color:#FFF;
}

Html:

<body>
<div id="wrapper">
	<div id="header">
		<div id="logo">
		  <p>&nbsp;</p>
		</div>
		<!-- End Logo-->		
        <div id="menu">
        	<ul>
            	<li class="first"><a id="this" href="index.html">INICIO</a></li>
                <li><a href="empresa.html">LA EMPRESA</a></li>
                <li><a href="productos.html">PRODUCTOS Y SERVICIOS</a></li>
                <li><a href="contacto.html">UBICACI&Oacute;N Y CONTACTO</a></li>
            </ul>        
    </div> <!--End Menu-->       
        <div id="banner">
        </div> <!--End Banner-->          
    </div> <!--End Header-->		
    <div id="cuerpo">
        <div id="flash"></div> <!--End Flash-->    
    	<div id="quote">
        <h1> &iquest;Qu&eacute; dicen nuestros clientes?</h1>
        <p>Nullam ornare, enim vitae gravida tempor, turpis lacus feugiat nisl, vitae pulvinar dui ante a enim. Proin eleifend ipsum condimentum est feugiat lobortis. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam hendrerit posuere magna, at aliquet nisi volutpat nec. <br/><span>-Francesc Molino, Barcelona</span></p>
<!-- <p class="cleaner"></p>-->
   	  </div> <!--End Quote--> 
        <div id="bottomblock">
			
          <div id="products">
          <h1>Productos y Servicios</h1>
            	<ul>
                	<li>Mensajer&iacute;a Local</li>
                    <li class="light">Mensajer&iacute;a Nacional</li>
                    <li>Mensajer&iacute;a Internacional</li>
                    <li class="light">Otros Servicios</li>
                    <li>Sistema de trabajo</li>
                    <li class="petit"><a href="productos.html"><<leer m&aacute;s>></a></li>
				</ul>           
          </div>  <!--End Products-->
            <div id="time">
            <div id="table">
				<div id="tleft"><h2 class="table">Lunes - Viernes</h2>
				<h2 class="table">Agosto</h2></div>
				<div id="tright">
				<h2 class="table">8:30-19:00</h2><h2 class="table">8:30-14:30</h2>
			</div> <!--End Tright-->
            </div> <!--End Table-->
            </div> <!--End Time-->
 </div> <!--End Products-->
        </div> <!--End Bottom Block-->  
    </div> <!--End Cuerpo-->   
</div><!--End Wrapper-->
</body>
2

you dont seem to have any <div id=“footer”> on your html

3

Thanks for responding icecape. I’ve put the footer div in various ways, none of which worked. The last try allowed me to show the background image, but
it broke up the structure of the page…

I’ve had it like this:
</div> <!–End Bottom Block–>
<div id=“footer”></div>
</div> <!–End Cuerpo–>
</div><!–End Wrapper–>

this:

</div> <!–End Bottom Block–>
</div> <!–End Cuerpo–>
<div id=“footer”></div>
</div><!–End Wrapper–>

and this:

</div> <!–End Bottom Block–>
</div> <!–End Cuerpo–>
</div><!–End Wrapper–>
<div id=“footwrap”>
<div id=“footer”></div>
</div> <!–End Footwrap–>

4

Hi,

The html comments in your css is corrupting the styles and stopping it form working properly. Plus you have some odd characters in there such as “…” which are corrupting the selectors. validate your css regularly to spot the errors early on.:slight_smile:

Only CSS comments /* css comments */ can go in a css file (although when in the head you can wrap html comments around the whole css block but there is no need to do that these days and you should avoid doing so.

In an external css file only css comments are allowed.

In your html you seem to have an extra closing div for products which shouldn’t be there.

Remove the height from #wrap because you never want to set a height on your wrapper as that will stop it form being able to grow.

Correcting those errors should allow the footer just to work.


<!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>
* {
    margin:0;
    padding:0;
}
p {
    margin:5px 0 10px 0;
}
.cleaner {
    clear:both;
    margin: 0px;
    padding: 0px;
}
body {
    text-align:center;
    background-color:#000;
    margin: 0px;
}
div#wrapper {
    width: 960px;
    margin: 0 auto;
    background-color:#FFF;/*height: 1035px; nonsense */
}
div#cuerpo {
    height: 904px;
}
div#flash {
    height: 200px;
    background:url('../images/flashreplace.jpg') no-repeat;
}
div#quote {
    height: 205px;
    background:url('../images/quotes.gif') no-repeat bottom left;
}
div#quote h1 {
    font:25px bold Arial, Helvetica, sans-serif;
    color:#000;
    background:url('../images/red_arrow.gif') no-repeat center left;
    padding: 10px 0px 13px 60px;
    margin: 20px 0px 0px 10px;
    text-align: left;
}
div#quote p {
    color:#aaa;
    margin: 35px 50px 0px 155px;
    text-align: justify;
    font-size: 16px;
    font-weight: bold;
}
div#quote p span {
    color:#666;
    font-size: 16px;
    font-weight: bold;
    padding: 0px 0px 0px 535px;
}
div#bottomblock {
    height: 295px;
}
div#products {
    height: 295px;
    float:left;
    width:450px;
    background:url('../images/moto.gif') no-repeat center left;
    margin: 10px 0px 0px 0px;
    overflow:hidden;
}
div#form {
    height: 295px;
    float:left;
    width:450px;
    /*    background:url('../images/moto.gif') no-repeat center left;*/
    margin: 10px 0px 0px 0px;
    overflow:hidden;
}
div#products h1, div#form h1 {
    font:25px bold Arial, Helvetica, sans-serif;
    color:#000;
    background:url('../images/red_arrow.gif') no-repeat center left;
    padding: 10px 0px 13px 60px;
    margin: 0px 0px 0px 10px;
    text-align: left;
}
div#products ul {
    margin: 25px 0px 0px 165px;
}
div#products li {
    font-size: 19px;
    font-weight: bold;
    text-align: left;
    line-height: 30px;
    list-style-type: none;
    color:#333;
}
div#products li.light {
    color:#777;
}
div#products li.petit a {
    color:#09C;
    font-size:12px;
    text-decoration:none;
}
div#products a {
}
div#time {
    height: 295px;
    width: 510px;
    float:left;
    background:url('../images/clock.gif') no-repeat center top;
    margin-top: 30px;
}
div#table {
    margin: 130px auto 0px auto;
    width: 340px;
    text-align:left;
}
div#table h2 {
    font:Arial, Helvetica, sans-serif 16px bold;
    margin: 0px 10px;
    color:#666;
}
div#tleft {
    float:left;
}
div#tright {
    float:right
}
div#footer {
    background: url('../images/footer.gif') repeat-x center top;
    height:120px;
    width:960px;
    clear:both;
    text-align:center;
    position: relative;
    background-color:#0F0;
    z-index: 1001;
    color:#FFF;
}
#logo p {margin-top:0}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <div id="logo">
            <p>&nbsp;</p>
        </div>
        <!-- End Logo-->
        <div id="menu">
            <ul>
                <li class="first"><a id="this" href="index.html">INICIO</a></li>
                <li><a href="empresa.html">LA EMPRESA</a></li>
                <li><a href="productos.html">PRODUCTOS Y SERVICIOS</a></li>
                <li><a href="contacto.html">UBICACI&Oacute;N Y CONTACTO</a></li>
            </ul>
        </div>
        <!--End Menu-->
        <div id="banner"> </div>
        <!--End Banner-->
    </div>
    <!--End Header-->
    <div id="cuerpo">
        <div id="flash"></div>
        <!--End Flash-->
        <div id="quote">
            <h1> &iquest;Qu&eacute; dicen nuestros clientes?</h1>
            <p>Nullam ornare, enim vitae gravida tempor, turpis lacus feugiat nisl, vitae pulvinar dui ante a enim. Proin eleifend ipsum condimentum est feugiat lobortis. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam hendrerit posuere magna, at aliquet nisi volutpat nec. <br/>
                <span>-Francesc Molino, Barcelona</span></p>
            <!-- <p class="cleaner"></p>-->
        </div>
        <!--End Quote-->
        <div id="bottomblock">
            <div id="products">
                <h1>Productos y Servicios</h1>
                <ul>
                    <li>Mensajer&iacute;a Local</li>
                    <li class="light">Mensajer&iacute;a Nacional</li>
                    <li>Mensajer&iacute;a Internacional</li>
                    <li class="light">Otros Servicios</li>
                    <li>Sistema de trabajo</li>
                    <li class="petit"><a href="productos.html"><<leer m&aacute;s>></a></li>
                </ul>
            </div>
            <!--End Products-->
            <div id="time">
                <div id="table">
                    <div id="tleft">
                        <h2 class="table">Lunes - Viernes</h2>
                        <h2 class="table">Agosto</h2>
                    </div>
                    <div id="tright">
                        <h2 class="table">8:30-19:00</h2>
                        <h2 class="table">8:30-14:30</h2>
                    </div>
                    <!--End Tright-->
                </div>
                <!--End Table-->
            </div>
            <!--End Time-->
        </div>
        <!--End Bottom Block-->
    </div>
    <!--End Cuerpo-->
    <div id="footer">footer</div>
</div>
<!--End Wrapper-->
</body>
</html>

Hope it helps anyway :slight_smile:

5

Hey Paul,

Thanks for the advice! I was so focused on playing with the divs I didn’t realize the comments were done incorrectly. It worked like a charm!

The only thing is that there is still a gap up top, I validated and cleaned everything up - even using the wildcard with margin and padding at “0”, the gap doesn’t go away.

Any suggestions?

Thanks in advance

6

Hi,

There is no gap in my code above :slight_smile:

In my code I added a rule to kill the margin collapse on the logo element.


#logo p {margin-top:0}

If a child element has a top margin and there is no content between the child and the parent (such as padding or borders) then the margin becomes the top margin on the parent instead and will move the parent down.

This is what margin collapse does.

7

I’m sorry? What do you mean :slight_smile:

8

You are so awesome Paul!!!

Thanks for the advice and explanation, I had forgotten that about the child element.