Hola a todos.
Les comento mi problema.Estoy queriendo terminar el diseño principal de mi página de internet para agarrar práctica a la maquetación web.
Resulta que ,como van a ver en el código adjunto ,coloco una imagen dentro del segundo div de mi página,y pareciera como que el div anterior perdiera su padding inferior.
No ocurre lo mismo cuando reemplazo img por <p>.
He estado leyendo las especificaciones oficiales de css en www.w3.org ,me descargué en formato pdf las especificaciones de css 2 y tengo también el nivel 3.
Estudié los comportamientos de las cajas y esto no debería pasar.
¿qué es lo que se me pasó?
Acá les adjunto el código html de mi página ,que va a servir de plantilla para el resto de las páginas: (Aclaro:Sólo probé la página hasta ahora en firefox 31)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ventas Reino.</title>
<link rel="stylesheet" type="text/css" href="estilos_web.css" />
<script type="text/javascript" src="funciones.js" >
</script>
</head>
<body>
<div id="pagina">
<ul id="menu">
<li onmouseover="desplegar('capilares')" onmouseout="ocultar('capilares')">Capilares</li>
<li onmouseover="desplegar('facial')" onmouseout="ocultar('facial')" >Cuidado facial</li>
<li onmouseover="desplegar('corporal')" onmouseout="ocultar('corporal')">Cuidado corporal</li>
<li onmouseover="desplegar('beauty')" onmouseout="ocultar('beauty')">Reino beauty</li>
<li onmouseover="desplegar('fragancias')" onmouseout="ocultar('fragancias')">Fragancias</li>
<li>Chicos</li>
<li>Aromas</li>
<li onmouseover="desplegar('interior')" onmouseout="ocultar('interior')">Belleza interior</li>
</ul>
<br />
<ul id="capilares" onmouseover="desplegar('capilares')" onmouseout="ocultar('capilares')">
<li>Argan y Macadamia</li>
<li>Ortiga</li>
<li>Hair solutions</li>
<li>Henna</li>
<li>Almendras</li>
<li>Lino</li>
<li>Bambú</li>
</ul>
<ul id="facial" onmouseover="desplegar('facial');" onmouseout="ocultar('facial');">
<li>Power Hyaluronic</li>
<li>Vegetal lift</li>
<li>Argán</li>
<li>Genuine cell</li>
<li>Hydratante botanical</li>
<li>Camomila orgánica</li>
<li>Perfect oval</li>
<li>Wine elixir</li>
<li>Lifting hidratante</li>
<li>Antioxidante</li>
<li>Phytoactiva</li>
<li onmouseover="javascript:releaseEvents(Event.MOUSEO VER);desplegar('mas');desplegar('facial');" onmouseout="ocultar('mas');ocultar('facial');">M&a acute;s productos</li>
</ul>
<ul id="mas" onmouseover="desplegar('mas');desplegar('facial'); " onmouseout="ocultar('mas');ocultar('facial');" >
<li>Rejuvalene</li>
<li>Néctar</li>
<li>Collagenesse</li>
<li>Tratamiento</li>
<li>Dyamante cell</li>
<li>Abyssine</li>
<li>Hidracalme</li>
<li>Time release</li>
<li>H20 termal</li>
<li>Spa</li>
</ul>
<ul id="corporal" onmouseover="desplegar('corporal')" onmouseout="ocultar('corporal')">
<li>Bio pomada</li>
<li>Crema fiori</li>
<li>Camila</li>
<li>Citrus</li>
<li>Blueberry</li>
<li>Seda</li>
<li>Top modeling</li>
<li>Full action</li>
<li>Propóleos B</li>
<li>Eucalyptus</li>
<li>Beauty feet</li>
<li>Golden sun</li>
</ul>
<ul id="beauty" onmouseover="desplegar('beauty')" onmouseout="ocultar('beauty')">
<li>Ojos</li>
<li>Labios</li>
<li>Rostro</li>
<li>Manos</li>
</ul>
<ul id="fragancias" onmouseover="desplegar('fragancias')" onmouseout="ocultar('fragancias')">
<li>Femeninas</li>
<li>Masculinas</li>
</ul>
<ul id="interior" onmouseover="desplegar('interior')" onmouseout="ocultar('interior')">
<li>Suplementos</li>
<li>Infusiones</li>
<li>Propóleos plus</li>
<li>Eco reino</li>
</ul>
</div>
<div>
<p>Baño de crema con jojoba y almendras.</p>
<p><img src="Capilares/Almendras/da101.jpg"></p>
</div>
</body>
</html>
Acá adjunto el código css externo:
body {
background-image:url("fondo-de-pantalla.jpg");
background-attachment:fixed;
background-position:center;
}
#pagina {
position:relative;
width:1080px;
margin: 0 auto;
}
li {
list-style:none;
font-size:1.1em;
color:lime;
padding:5px 20px;
background-color:blue;
}
#menu li {
float:left;
}
#capilares,#facial,#corporal,#mas,#corporal,#beaut y,#fragancias,#interior{
position:absolute;
display:none;
z-index:1;
}
#capilares,#facial,#corporal,#beauty,#fragancias,# interior {
top:15px;
}
li:hover {
background-color:yellow;
}
#facial {
left:9.7%;
}
#mas {
top:14.5em;
left:27%;
}
#corporal {
width:163px;
left:23.1%;
}
#beauty {
width:134px;
left:38.1%;
}
#fragancias {
left:50.5%;
}
#interior {
width:150px;
left:78.3%;
}
div:nth-child(2) {
width:1000px;
position:relative;
margin:0 auto;
background-color:darkgreen;
border-radius:5em;
}
Les agradezco la ayuda que me puedan ofrecer.
