Hola a todos, estoy intentando maquetar una página muy senci lla con CSS pero tengo problemas con Firefox y Explorer 6 (no con el 7...) a la hora de centrarla en el navegador, el caso es que tengo un DIV contenedor con un borde y el problema es que el resto de DIV que están contenidos en éste quedan fuera y no lo "arrastran" hacia abajo, les dejo los códigos HTML y CSS a ver si alguien pudiera darme una explicación o si le pasa lo mismo... En el código original tengo los id bien puestos, pero como aquí parece que no deja ponerlos pues los he colocado fuera de las etiquetas (espero no incumplir las normas del foro).
Muchísimas gracias por adelantado. Un saludo!!
Código HTML:
Código:
<DOCTYPE>
<html>
<head>
<meta>
<title>Tutoriales :: INICIO ::</title>
<link>
</head>
<body>
<DIV>#contenedor
<DIV>#contenedor_interior
<DIV></DIV># cabecera
<DIV>#migas Estás en Inicio</DIV>
<DIV>#cuerpo
<DIV>#menu
<UL>
<LI><span class="opcionActiva" title="Enlace a Inicio">Inicio</span></LI>
<LI><a href="tutoriales.html" title="Enlace a Tutoriales">Tutoriales</a></LI>
<LI><a href="enlaces.html" title="Enlaces">Enlaces</a></LI>
<LI><a href="afiliados.html" title="Afíliate enviando tu banner">Afiliados</a></LI>
<LI><a href="contacto.html" title="Contacta con nosotros">Contacto</a></LI>
<LI><a href="colabora.html" title="¡Envíanos tus tutoriales!">Colabora</a></LI>
<LI><a href="publicidad.html">Publicidad</a></LI>
</UL>
</DIV>
<DIV>#contenido
<H1>Inicio</H1>
Bienvenido a esta web de tutoriales , desde aquí se pretende introducir al conocimiento de Photoshop y su entorno. Desde el menú lateral podrás acceder a las distintas secciones de esta web y, como no, a los tutoriales que se irán añadiendo en función de la disponibilidad de éstos.
<P>Otro parrafo por redactar</p>
</DIV>
</DIV>
</DIV>
</DIV>
</body>
</html>
Código CSS:
BODY {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
text-align: center;
}
#contenedor {
background-image: url(../imgs/img_fondo_contenedor.gif);
background-repeat: no-repeat;
width: 640px;
border: #666666 1px solid;
margin: 0 auto 0 auto;
position: relative;
}
#contenedor_interior{
position: relative;
}
#cabecera {
background-image: url(../imgs/img_cabecera.gif);
background-repeat: no-repeat;
height: 119px;
position: relative;
}
#migas {
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 85%;
color: #666666;
margin-top: 35px;
margin-bottom: 10px;
margin-left: 15px;
position: relative;
}
#migas A {
color: #CC0000;
position: relative;
}
#migas A:HOVER {
color: #FFFFFF;
background-color: #CC0000;
position: relative;
}
#cuerpo {
position: relative;
}
#menu {
text-align: left;
font-size: 85%;
position: relative;
float: left;
width: 25%;
}
#menu A {
color:#333333;
}
#menu A:HOVER {
color: #FFFFFF;
border: #DAC77C 1px solid;
background-color: #990000;
}
.opcionActiva {
color: #FFFFFF;
background-color:#990000;
border: #DAC77C 1px solid;
}
#contenido {
text-align: justify;
font-size: 90%;
color:#666666;
position: relative;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
float: left;
width: 70%;
}
#contenido A:HOVER {
text-decoration: underline;
}
.advertencia {
color: #000000;
background-color: #FFFF99;
}
UL {
list-style: url(../imgs/img_dot.gif);
line-height: 25px;
}
A {
color: #993300;
text-decoration: none;
}
H1 {
color: #990000;
text-align: left;
