Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: freddychpo en 07 de Octubre 2015, 07:03
-
Define un documento HTML con un div padre (divPadre), dentro del cual existan otras 3 cajas contenedoras div (div1, div2 y div3), cada una de ellas con unas dimensiones de 300x300px, 40 píxeles de margin en todas direcciones, 30 píxeles de padding en todas direcciones y un background color diferente. Usando posicionamiento relativo genera un desplazamiento de los div de la siguiente manera:
a) El div 1 deberá desplazarse 200 píxeles a la derecha y 100 píxeles hacia abajo respecto a lo que sería su posición normal.
b) El div 2 deberá desplazarse 50 píxeles a la izquierda y 50 píxeles hacia arriba respecto a lo que sería su posición normal.
c) El div 3 deberá desplazarse 450 píxeles a la derecha y 300 píxeles hacia arriba respecto a lo que sería su posición normal.
html
<html>
<head>
<title> Ejercicio 32 - CSS </title>
<link rel="stylesheet" href="estilosEjer32.css" >
</head>
<body>
<div id="divPadre">
<div id="Box1" class="box"></div>
<div id="Box2 " class="box"></div>
<div id="Box3" class="box"></div>
</div>
</body>
</html>
css
.box{
width:300px;
height:300px;
margin:40px;
padding:30;
}
#Box1 {
background-color:grey;
position:relative; left:200px; top:100px;
}
#Box2 {
background-color:yellow;
position:relative; right:50px; bottom:50px;
}
#Box3 {
background-color:green;
position:relative; left:450px; bottom:300px;
}
-
Hola freddychpo.
Tu ejercicio está bien resuelto, hace exactamente lo que pide el enunciado.
Lo único en esta linea que pongo abajo se te coló un espacio entre Box2 y las comillas.
<div id="Box2 " class="box"></div>
Saludos.
-
Hola Pedro,
Si, justo me di cuenta del espacio cuando probe el codigo en mi navegador.
Gracias.