Foros del Web » Creando para Internet » CSS »

Elemento imagen mueve a su contenedor.

Estas en el tema de Elemento imagen mueve a su contenedor. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/09/2014, 14:07
 
Fecha de Ingreso: febrero-2014
Ubicación: Rosario
Mensajes: 59
Antigüedad: 7 años, 11 meses
Puntos: 2
Elemento imagen mueve a su contenedor.

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&uacute;</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&oacute;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&oacute;leos plus</li>
<li>Eco reino</li>
</ul>
</div>
<div>
<p>Ba&ntilde;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.

Etiquetas: background, color, elemento, hover, html, mueve, página, width
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 01:50.