Autor Tema: Ejemplo float left y float right CSS Ejercicio resuelto CU01035D del tutorial  (Leído 3581 veces)

jimmorrison

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 51
  • la programacion es vida
    • Ver Perfil
Enunciado:

Citar
Define un documento HTML donde a través del uso de las propiedades float y clear y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con este aspecto:
a) En primer lugar se deben mostrar 8 cajas div de 50x50 píxeles, con margin-right de 5 píxeles para cada una de ellas, y cada una de ellas con distinto color de fondo, alineadas en horizontal hacia la izquierda gracias al uso de float left.
b) En segundo lugar se debe mostrar un div con un texto y color de fondo amarillo, con margen superior e inferior de 20 píxeles, abarcando todo el ancho disponible.
c) En tercer lugar se deben mostrar 3 cajas div de 200x50 píxeles, con margin-right de 5 píxeles para cada una de ellas, y cada una de ellas con distinto color de fondo, alineadas en horizontal hacia la derecha gracias al uso de float right.
d) En cuarto lugar un div de fondo de color #DEB887 que ocupe todo el ancho disponible y contenga el texto <<Curso CSS aprenderaprogramar.com>>

 

Nota: si es necesario, usa los div contenedores auxiliares que te sean necesarios.


Respuesta:

html

Código: [Seleccionar]
<html> <head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/ejercicio_clear.css">
</head>
<body>

<div id="caja1" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja2" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja3" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja4" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja5" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja6" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja7" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja8" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="cajas_1" class="cajas_1">
uno cajas
</div>
<div id="cajas_2" class="cajas_1">
dos cajas
</div>
<div id="cajas_3" class="cajas_1">
tres cajas
</div>
<div id="cajas_1_4" class="cajas_2">
Curso CSS aprenderaprogramar.com
</div>
<footer>
hecho por carlos enrique gil chong
</footer>
</body>
</html>

css

Código: [Seleccionar]
*{
margin: 0px;
padding: 0px;}

.cajas{
width: 50px;
height: 50px;
margin-right: 5px;
float: left;
}

#caja1{
background-color: red;}
#caja2{
background-color: blue;}
#caja3{
background-color: brown;
}
#caja4{
background-color: black;
}
#caja5{
background-color: yellow;
}
#caja6{
background-color: purple;
}
#caja7{
background-color: orange;
}
#caja8{
background-color: silver;
}

.texto{
text-align: center;
background-color: yellow;
}

.cajas_1{
width: 200;
height: 50px;
margin-right: 5px;
float: right;
}

#cajas_1{background-color: green;}
#cajas_2{background-color: blue;}
#cajas_3{background-color: orange;}

#cajas_1_4{
background-color: #DEB887;
font-size: 5em;
text-align: center;
}

footer{
text-align: center;
font-size: 50px;
font-family: arial;}
« Última modificación: 27 de Abril 2015, 09:41 por César Krall »

Mastermind

  • Experto
  • *****
  • Mensajes: 536
    • Ver Perfil
Re:clear CSS both (CU01035D)
« Respuesta #1 en: 26 de Abril 2015, 21:55 »
Hola


Citar
En primer lugar se deben mostrar 8 cajas div de 50x50 píxeles, con margin-right de 5 píxeles para cada una de ellas, y cada una de ellas con distinto color de fondo, alineadas en horizontal hacia la izquierda gracias al uso de float left.

Lo veo bien hecho


Citar
En segundo lugar se debe mostrar un div con un texto y color de fondo amarillo, con margen superior e inferior de 20 píxeles, abarcando todo el ancho disponible.

Esto no lo veo, parece que falta¿?

Saludos ;)
 

 

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".