desaparece el pie

PedroRodas · #1 (**permalink**) 09/07/2008, 08:52

Hola, tengo posicionado mi pie de pagina para que quede siempre abajo, usando el codigo que proporciono mikel.

Me funciona muy bien en todas las secciones de mi pagina, pero se me plantea un problema. En la seccion de contacto tengo un formulario, y para alinear los campos de texto he usado el posicionamiento relativo del contenedor, y absoluto de los campos de texto. asi consigo la alineacion que necesito ( saque esta forma de posicionar de librosweb). El problema es que este position:relative del contenedor es que hace que no se vea el pie. En cuanto quito este atributo desaparece el problema, pero pierdo alineacion de mis campos de texto.

Si es necesario os paso el codigo para que lo podais ver mejor.

muchas gracias

Mikmoro · #2 (**permalink**) 09/07/2008, 08:54

Sí, mejor ver el código.

Mikel.

PedroRodas · #3 (**permalink**) 09/07/2008, 09:25

Ahi lo llevas fijate que al quitarle el position relative al contenedor, aparece la imagen que pones en el div pie.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>.: Portafolio - Pedro Rodas :. Contacto.</title>
<link href="css/contacto.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="contenedor">
	<?php include("cabecera.html"); ?>
	<p>Contacta conmigo y solicita presupuesto sin compromiso.</p>
    <form action="contacto.php" method="post" enctype="multipart/form-data" name="frm">
		<div class="absolute"><label for="contacto">(*) Persona de contacto:</label><input name="contacto" type="text" id="contacto" size="25"></div>
		<div class="absolute"><label for="email">(*) E-mail:</label><input name="email" type="text" id="email" size="25"></div>
		<div class="absolute"><label for="telefono">(*) Tel&eacute;fono:</label><input name="telefono" type="text" id="telefono" size="25"></div>
		<div class="absolute"> <label for="archivo">Archivo:</label><input name="archivo" type="file" class="form"></div> 
		<div class="absolute"> <label for="comentario">Comentarios:</label><textarea name="comentario" cols="40" rows="7" class="form" id="comentario"></textarea></div> 		
		<div id="botones"><input name="borrar" type="button" value="borrar" onclick="location.href='contacto.php'">
						  <input name="datos_enviados" type="submit" value="Enviar"></div>
		<div><span>(*): Campos obligatorios.</span></div>
	</form>
</div>
<div id="pie">
<img src="pon_tu_alguna_con_este_tamaño" width="768px" height="50px">
</div>
</body>
</html>

aqui el css:

/

Código HTML:

* 								Estilos generales								*/
*{margin:0;padding:0;outline: 0;}
html,body {margin:0;padding:0;height:100%;outline: 0; }
body{background:#fff url(../imgs/fondo_arriba_trabajos.jpg) repeat-x;}
/* 								Contenedor									*/
#contenedor{
width:768px;
    min-height:100%;
    height: auto!important;
    height:100%;
margin: 0px auto;
background:#fff;
font: normal 0.8em Verdana, Arial, Helvetica, sans-serif;
position:relative;
}
/*								 Cabecera									*/
#cabecera{
clear:both;
width:768px;
height:195px;
background:#f63 url(../imgs/banner_contacto.jpg) no-repeat;
}
/*								 Pie										*/
#pie{
clear:both;
text-align:center;
background:#ff0 url(../imgs/fondo_pie1.jpg) repeat-x;
height:50px;
margin-top: -50px;
}
#contenedor div.absolute{ margin-top:0.5em;}
p.alerta {padding:0 0 0 25px;background:url(img_1/alerta2.png) no-repeat;}
p.titulo {font:normal 1.2em Verdana, Arial, Helvetica, sans-serif;}
#contenedor div.absolute input,textarea{ position: absolute; left: 250px;}
label { line-height: 25px;}
#botones{ clear:both;margin-top:12em;margin-bottom:1em;}

Mikmoro · #4 (**permalink**) 09/07/2008, 15:21

Prueba añadiendo esto a tu css:

#pie img {position: relative;}

Mikel.

PedroRodas · #5 (**permalink**) 10/07/2008, 03:11

si, muchas gracias Mikel, como siempre. Ya habia estudiado antes el posicionamiento, y ahora lo he vuelto a hacer. Aun asi no veo claramente que conflicto se estaba creando en mi css, y porque el añadirle el codigo que me has dado lo arregla.

Serias tan amable de explicarmelo por encima??

muchas gracias de nuevo.

Mikmoro · #6 (**permalink**) 10/07/2008, 04:01

Bueno, en este caso, al dar posición al contenedor se ve afectado por los padding, los margin y los deplazamientos, de manera que desplazaba hacia abajo la imagen. Al darle posición también a esta, gana posición dentro de la caja donde estaba y así queda asentada en ella, ya que esa caja estaba fuera del contenedor.

El asunto principalmente es que las posiciones relativa y absoluta siempre son con respecto a su caja contenedora, por eso es recomendable usarlas (principalmente la relativa), porque eso evita muchos problemas con los márgenes y desplazamientos, sobre todo en IE.

Mikel.