Foros del Web » Creando para Internet » CSS »

desaparece el pie

Estas en el tema de desaparece el pie en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/07/2008, 08:52
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 18 años, 3 meses
Puntos: 0
desaparece el pie

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
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #2 (permalink)  
Antiguo 09/07/2008, 08:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: desaparece el pie

Sí, mejor ver el código.

Mikel.
  #3 (permalink)  
Antiguo 09/07/2008, 09:25
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 18 años, 3 meses
Puntos: 0
Respuesta: desaparece el pie

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;}
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #4 (permalink)  
Antiguo 09/07/2008, 15:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: desaparece el pie

Prueba añadiendo esto a tu css:

#pie img {position: relative;}

Mikel.
  #5 (permalink)  
Antiguo 10/07/2008, 03:11
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 18 años, 3 meses
Puntos: 0
Respuesta: desaparece el pie

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.
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #6 (permalink)  
Antiguo 10/07/2008, 04:01
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: desaparece el pie

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:11.