Autor Tema: CSS posicionar div propiedad position static relative absolute fixed CU01032D  (Leído 3471 veces)

freddychpo

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 10
    • Ver Perfil
Citar
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

Código: [Seleccionar]
<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

Código: [Seleccionar]
.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;
}
« Última modificación: 09 de Octubre 2015, 09:46 por César Krall »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
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.

freddychpo

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 10
    • Ver Perfil
Hola Pedro,

Si, justo me di cuenta del espacio cuando probe el codigo en mi navegador.

Gracias.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".