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