SitePoint Sponsor

User Tag List

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

    Unhappy Invisible Footer

    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:
    ----

    Code:
    <!--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:
    -----

    HTML Code:
    <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">&lt;&lt;leer m&aacute;s&gt;&gt;</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. #2
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you dont seem to have any <div id="footer"> on your html

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    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.

    Code:
    <!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">&lt;&lt;leer m&aacute;s&gt;&gt;</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

  5. #5
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by roigron View Post
    Hey Paul,


    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
    Hi,

    There is no gap in my code above

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

    Code:
    #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. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jhonnyD2 View Post
    could not us here use the hidden form....Paul?
    I'm sorry? What do you mean
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    You are so awesome Paul!!!

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


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
  •