Foros del Web » Creando para Internet » CSS »

div superpuestos

Estas en el tema de div superpuestos en el foro de CSS en Foros del Web. Buenos días, Os escribo mi código por si me podeis ayudar en esta duda. Quiero conseguir que el div "footer" quede, un trozo superior, por ...
  #1 (permalink)  
Antiguo 11/07/2007, 02:59
 
Fecha de Ingreso: junio-2007
Mensajes: 37
Antigüedad: 10 años, 6 meses
Puntos: 0
div superpuestos

Buenos días,
Os escribo mi código por si me podeis ayudar en esta duda.
Quiero conseguir que el div "footer" quede, un trozo superior, por debajo del div "contenido" de manera que queden superpuestos.
He estado probando con position y z-index pero no debe ser la solución o no doy con la combinación.:serio
Supongo que para MF será de una forma y para IE de otra. De todas formas no me sale en ninguno de los dos.
Agradecería vuestra ayuda.

Este es el codigo:

Código:
/* CSS Document */
* {
	margin: 0px;
	padding: 0px;
}
a:link,a:visited {
	color: #000000;
	text-decoration: none;
}

a:hover,a:active {
	text-decoration: underline;
}
img{
	border: 0px;
}
.limpia{
	clear: both;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-table;
}
body{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding: 0px;
	margin: 0px;
	font-size: 12px;
}
#container{
	width: 762px;
	background-repeat: repeat-x;
	margin: 0px auto;
	height: auto;
	background-image: url(../imagenes/header_background.jpg);
	border-left: 1px solid #007a63;
	border-right: 1px solid #007a63;
	z-index: -2;
	}

#izq{
	width: 170px;
	float: left;
	margin-left: 6px;
	padding-bottom: 5px;
	clear: left;
	margin-top: 10px;
}
#logo{
	margin-bottom: 10px;
}
#tit_rotulo{
	margin-bottom: 7px;
}
#link1{
	background-color: #FFFFFF;
	background-image: url(../imagenes/rotulo.jpg);
	height: 65px;
	background-repeat: no-repeat;
	border: #007a63 1px solid;
	margin-top: 10px;
	text-indent: 5px;
	padding: margin;
}
#link2{
	background-color: #FFFFFF;
	background-image: url(../imagenes/rotulo.jpg);
	height: 65px;
	background-repeat: no-repeat;
	border: #007a63 1px solid;
	margin-top: 10px;
	text-indent: 5px;
}
#link3{
	background-color: #FFFFFF;
	background-image: url(../imagenes/rotulo.jpg);
	height: 65px;
	background-repeat: no-repeat;
	border: #007a63 1px solid;
	margin-top: 10px;
	padding-left: 5px;
}
#contenido{
	width: 565px;
	float: right;
	margin-right: 4px;
	z-index: -1;
}
#cabecera{
	height: 10px;
	width: 565px;
	padding-bottom: 20px;
}
#cabecera ul {
	text-align: right;
}

#cabecera li {
	display: inline;
	padding-left: 5px;
	padding-right: 3px;
	border-right: 1px solid #6F6F6F;
}

#cabecera li.home {
	background-image: url("");
	background-repeat: no-repeat;
	background-position: 0;
}
#imagen{
	width: 565px;
}
#formacion{
	background-color: #CCCCCC;
	width: 565px;
	height: 25px;
	text-indent: 15px;
	border-bottom: #007a63 5px solid;
}
#ruta{
	background-color: #CCCCCC;
	width: 559px;
	text-indent: 10px;
	border-left: #007a63 5px solid;
	border-right: #007a63 1px solid;
}
#interior_contenido{
	width: 548px;
	padding-left: 15px;
	border: #007a63 1px solid;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #FFFFFF;
}
#footer{
	height: 41px;
	background-image: url(../imagenes/bottom_background.jpg);
	background-position: bottom;
	background-repeat: repeat-x;
	width: 762px;
	margin: 0px auto;
	border-left: 1px solid #007a63;
	border-right: 1px solid #007a63;
	padding-top: 10px;
	z-index: -3;
}
Código:
<body>
<div id="container" class="clearfix">

<div id="izq">
<div id="logo"><img src="imagenes/logo.jpg"/></div>
<div id="link1"><div id="tit_rotulo"><span><strong>Contacta con nosotros</strong></span></div><p><img src="imagenes/telefono.jpg" alt="Telefono" style="margin: 0px 5px -2px 0px;"/ >902 42 55 99</p><p><img src="imagenes/sobre.jpg" alt="Correo" style="margin: 0px 5px -2px 0px;"/><a href="#">email</a></p></div>
<div id="link2"><div id="tit_rotulo"><a href="#"><span><strong>Centros Certificados</strong></span></a></div><p>Formación</p><p>Oficial  </p></div>
<div id="link3"><div id="tit_rotulo"><a href="#"><span><strong>Busque su curso</strong></span></a></div>
<p>Utilice nuestro buscador de cursos
por provincias</p>
</div>
</div>


<div id="contenido" >
<div id="cabecera" >
<ul>
					<li class="home"><a href='index.asp' title="">Home</a></li>
					<li class=""><a href='sitemap.asp' title="">Mapa del Sitio</a></li>
					<li class=""><a href='contacto.asp' title="contacto con Sage SP formación">Contacto</a></li>
	</ul>
</div>
<div id="imagen"><img src="imagenes/img_derecha.jpg" alt="Sage SP formacion"/ ></div>
<div id="formacion">
  <h4>FORMACIÓN</br></h4>
</div>
<div id="ruta" > <a href="index.asp"><h5>Home</h5></a></div>
<div id="interior_contenido"><p>texto.texto.texto.texto.texto.texto.texto.
texto.texto.texto.texto.texto.texto.texto.texto.</p><br/><p><strong>Formación y Certificación Oficial </strong>, una garantía única para las Pymes </p><br/><p>Además toda la formación le puede resultar gratuita mediante el <strong>modelo.</strong></p><br/><p>Compruebe sus conocimientos</p></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
Gracias
  #2 (permalink)  
Antiguo 11/07/2007, 03:56
 
Fecha de Ingreso: julio-2007
Mensajes: 30
Antigüedad: 10 años, 5 meses
Puntos: 1
Re: div superpuestos

Hola,

quizás ya lo hayas intentado pero prueba a meter el <div id="footer"></div> dentro del contenido.

Así yo creo que quedaría superpuesto al contenido.

Y, quizás, para asegurar de que el footer se mantiene abajo creo que si le aplicas el estilo "margin-bottom:auto", lo empuja hacia la parte inferior de la capa "contenido".

Pero no sé, es algo que se me ha ocurrido ahora, no sé si te funcionará...
  #3 (permalink)  
Antiguo 11/07/2007, 06:55
 
Fecha de Ingreso: junio-2007
Mensajes: 37
Antigüedad: 10 años, 6 meses
Puntos: 0
Re: div superpuestos

Gracias por tu respuesta.
Intente lo de incluir el div footer en el div contenedor pero no salía lo esperado.
La segunda opción que me indicas no la he puesto en práctica aún ( aunque espero hacerlo en cuanto pueda) porque al final utilice esto y me funcionó:

Código:
height: 41px;
	background-image: url(../imagenes/bottom_background.jpg);
	background-position: bottom;
	background-repeat: repeat-x;
	width: 762px;;
	margin: -2em auto 0;;
	border-left: 1px solid #007a63;
	border-right: 1px solid #007a63;
	padding-top: 10px;
	z-index: 0;
Creo que esta basado de todas formas en lo que tu dices.
Muchas gracias y un saludo
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 11:11.