problema con mi pie de página adhesivo? [cerrado]

Por favor, eche un vistazo a mi código y ayúdeme con mi pie de página. Intenté todo lo que se me ocurrió y no puedo hacer que el pie de página permanezca en la parte inferior. Cuando logro que permanezca en la parte inferior, se superpone al contenido anterior cuando se cambia el tamaño de la ventana. La idea aquí es que el pie de página permanezca en la parte inferior de la página debajo del contenido y no se mueva cuando se cambia el tamaño de la ventana o se hace zoom.

el HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sgembardesign.com</title>

<!-----CSS Library----->
<link href="assets/CSS/style sheet.css" rel="stylesheet">

<!----- Java Script Library ----->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/my_code.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-           

ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">   

</script>
<style type="text/css">
    </style>


</head>
<body>

<div class="wrapper">
<div id="menu_bar">
    <div id="menu_li">
        <ul>
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="projects.html">projects</a></li>
            <li><a href="blog.html">blog</a></li>
        </ul>
    </div>
</div>
<hr noshade size="3">


<div id="catalogs">
    <div id="web">
    </div>

    <div id="photo">
    </div>

    <div id="mobile">
    </div>
</div>


<div class="push"></div>
<div class="footer">
    <img class="img" src="assets/img/logo.gif" alt="logo" width="500" height="300"/>
</div>

</div>

</body>
</html>


**The CSS**


*
{
margin: 0;
}
body
{
height: 100%;
background-image: url("../img/dark-metal-grid-5.jpg");
}
html
{
height: 100%;
}
.wrapper
{

width: 950px;
min-width: 950px;
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -142px;
border-bottom: 3px solid white;
sbackground:rgb(0,0,0); /* IE6/7/8 */
filter:alpha(opacity=60); /* IE6/7/8 */
background:rgba(0,0,0,0.6); /* Modern Browsers */
}

/*--------------menu items--------------*/

#menu_bar
{
width: 725px;
height: 95px;
float: left;
position: absolute;
padding: 4em;
}

a
{
color: white;
text-decoration: none;
position: relative;
left:95px;

}
ul
{
list-style-type: none;

}
li
{
display: inline;
margin-left: 20px;

}
#menu_li
{
font-size: 45px;
font-family: Impact, Charcoal, sans-serif;
line-height: 32px;


}
#menu_bar a:hover
{
text-decoration: none;
color: #C50F0F;
}

/*---------------hr------------------*/
hr
{
width: 950px;
color: #C50F0F;
background-color: #c50f0f;
position: absolute;
top: 105px;
border-width: 0;
line-height: 0;
height: 2px;
text-align: center;
}
/*---------------Catalogs-----------*/
#catalogs
{
text-align: center;
position: relative;
}

#web
{
width: 250px;
height:225px;
position:absolute;
top:200px;
overflow: hidden;
float: left;
left:40px;
background-color: #C50F0F;
background:rgba(255,0,0,0.4);
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
border: solid 3px black;

}

#photo
{
width: 250px;
height: 225px;
top: 200px;
position: absolute;
overflow: hidden;
display: inline;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background-color: #C50F0F;
background:rgba(255,0,0,0.4);
left: 37%;
border: solid 3px black;

}

#mobile
{
width: 250px;
height:225px;
position:relative;
top:200px;
overflow: hidden;
float: right;
right:40px;
background-color: #C50F0F;
background:rgba(255,0,0,0.4);
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
border: solid 3px black;
}

.push
{
height: 142px;
}

.footer
{

width: 950px;
height: 142px;
margin-top: -142px;
clear: both;
bottom: 0px;
sbackground:rgb(0,0,0); /* IE6/7/8 */
filter:alpha(opacity=60); /* IE6/7/8 */
background:rgba(0,0,0,0.6); /* Modern Browsers */
}

.img
{
position: relative;
top: -75px;
left: -75px;
}

preguntado el 24 de diciembre de 12 a las 15:12

jsfiddle.net/nhErc, eres bienvenido -

3 Respuestas

http://jsfiddle.net/Tc4be/

Bienvenido a SO. Sin embargo, esta es una pregunta bastante terrible. Tenga en cuenta lo que hice con ese jsFiddle. Creé una pequeña muestra observable de su problema.

Ahora el problema.

    <div class="push"></div>
    <div class="footer">
        <img class="img" src="assets/img/logo.gif" alt="logo" width="500" height="300"/>
    </div>

</div>

Necesita ser

    <div class="push"></div>
</div>   <!-- Footer Outside the Wrapper div --> 
<div class="footer">
        <img class="img" src="assets/img/logo.gif" alt="logo" width="500" height="300"/>
    </div>

Respondido el 24 de diciembre de 12 a las 15:12

¡Bien por ti por intentarlo! - Joseph en SwiftOtter

Hice lo que sugeriste y eso todavía no solucionó el problema. El pie de página todavía sigue la parte inferior de la ventana cuando se cambia el tamaño. - user1568811

Puede colocar el pie de página para arreglarlo:

.footer
{
    width: 100%;
    height: 142px;
    position: fixed;
    clear: both;
    bottom: 0;
    left: 0;
    sbackground:rgb(0,0,0); /* IE6/7/8 */
    filter:alpha(opacity=60); /* IE6/7/8 */
    background:rgba(0,0,0,0.6); /* Modern Browsers */
}

También ayuda agregar una cantidad igual de relleno al cuerpo, para que pueda desplazarse hasta el final del contenido:

body {
    padding-bottom: 142px;
}

Respondido el 24 de diciembre de 12 a las 15:12

Hola Steve. Lamentablemente, esto no solucionó el problema. Cuando se cambia el tamaño de la ventana, el pie de página aún se mueve con la parte inferior de la ventana. - user1568811

¡Decir ah! Pensé que eso era lo que querías que hiciera; de lo contrario, ¡no es realmente pegajoso! - Fenton

  • Obtenga el pie de página fuera del envoltorio según la respuesta de Joe
  • Añada overflow: hidden; de las personas acusadas injustamente llamadas footer clase.

JSFiddle

Respondido el 24 de diciembre de 12 a las 15:12

Gracias. Estoy siguiendo todas las sugerencias y todavía no funciona como me gustaría. - user1568811

Eso es desafortunado, agregué un enlace JSFiddle con los cambios aplicados al que publicaste. Parece estar funcionando para mí :( - marcelo de polli

hasta que reduzca la altura de la ventana y luego desplácese: su pie de página ya no se pega a la parte inferior del navegador. - darren wainwright

Fui al enlace JSFiddle y me pareció que el pie de página se superponía al div de contenido con los tres cuadrados rojos. - user1568811

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.