Autor Tema: CSS Ejemplo float left y float right alinear elementos Ejercicio CU01035D (Leído 3893 veces)

wilfridocardena · « **en:** 13 de Mayo 2015, 00:48 »

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 - código html

Código: [Seleccionar]

<html>
<head>
<title>Ejercicio Float y Clear</title>
<link rel="stylesheet" type="text/css" href="clearfloat.css">
</head>
<body>

<div>
<div id="uno"></div>
<div id="dos"></div>
<div id="tres"></div>
<div id="cuatro"></div>
<div id="cinco"></div>
<div id="seis"></div>
<div id="siete"></div>
<div id="ocho"></div>
</div>

<div>
<div id="nueve"><p>Homer Jay Simpson (en Hispanoamérica, Homero Jay Simpson), más conocido como Homer J. Simpson o simplemente Homer Simpson, es uno de los personajes principales de la serie de televisión de dibujos animados Los Simpson. Es el padre de la familia protagonista y uno de los personajes centrales y más importantes de la serie. Fue creado por el dibujante Matt Groening e hizo su debut en televisión el 19 de abril de 1987, en el corto Good Night del programa El show de Tracey Ullman. El segundo nombre de Homer Simpson es un juego de palabras. Durante muchas temporadas no se supo qué había detrás de la «J» hasta que en el capítulo D'oh-in' In the Wind Homer descubre que su segundo nombre es «Jay» (pronunciación fonética en inglés de la letra «j»). De este modo, cuando Homer pronuncia en inglés su nombre, no se distingue si da la letra inicial del segundo nombre o éste al completo.

La voz original del personaje de Homer Simpson en inglés es de Dan Castellaneta. En España fue doblado hasta la undécima temporada por Carlos Revilla, a quien sustituyó Carlos Ysbert por el fallecimiento de Revilla. En Hispanoamérica hasta la decimoquinta temporada (incluida) fue doblado por Humberto Vélez, reemplazado tiempo después por Víctor Manuel Espinoza, más conocido como Otto Balbuena. Castellaneta ha ganado tres Premios Primetime Emmy como Mejor Actuación de Voz y una mención especial en los Premios Annie por interpretar la voz de Homer Simpson.</p></div>
</div>

<div>
<div id="diez"></div>
<div id="once"></div>
<div id="doce"></div>
</div>

<div>
<div id="trece"><p>Curso CSS aprenderaprogramar.com</p></div>
</div>



</body>
</html>

Respuesta - código css

Código: [Seleccionar]

#uno {width:50px; height:50px; margin-right:5px; background-color:blue; float:left;}
#dos{width:50px; height:50px;margin-right:5px; background-color:brown; float:left; }
#tres {width:50px; height:50px;margin-right:5px; background-color:green; float:left;}
#cuatro {width:50px; height:50px;margin-right:5px; background-color:gray; float:left;}
#cinco {width:50px;height:50px; margin-right:5px; background-color:yellow; float:left;}
#seis {width:50px;height:50px; margin-right:5px; background-color:blue; float:left;}
#siete {width:50px;height:50px; margin-right:5px; background-color:green; float:left;}
#ocho {width:50px;height:50px; margin-right:5px; margin-bottom:20px; background-color:gray; float:left;}

#nueve {width:100%; margin-top:20px; margin-bottom:20px; background-color:yellow; clear:both;  }


#diez {width:200px; height:50px; margin-right:5px; background-color:green; float:right;}
#once{width:200px; height:50px; margin-right:5px; background-color:blue; float:right;}
#doce {width:200px; height:50px; margin-right:5px; margin-bottom:20px; background-color:orange; float:right;}

#trece {width:100%; margin-right:5px; background-color:#DEB887; clear:both; }

Ogramar · « **Respuesta #1 en:** 14 de Mayo 2015, 09:11 »

Hola wilfrido!! al abrir el html en mi navegador se veía mal el texto y lo he corregido introduciendo <meta charset="utf-8"> dentro de las etiquetas <head> ... </head>. Te recomiendo que siempre incluyas el meta charset para asegurarte.

En pantalla has conseguido mostrar lo que pedía el ejercicio, pero hay cosas que puedes mejorar. El código tiene un problema: la repetición. En el código debemos tratar de evitar repetir.

Si miramos estas reglas vemos cómo hay repetición:

#uno {width:50px; height:50px; margin-right:5px; background-color:blue; float:left;}
#dos{width:50px; height:50px;margin-right:5px; background-color:brown; float:left; }
#tres {width:50px; height:50px;margin-right:5px; background-color:green; float:left;}

Deberías corregir el ejercicio para evitar la repetición. ¿Cómo? Todo lo que es común a varios elementos defínelo una sola vez. Para ello puedes usar un atributo class. Mira este ejemplo como referencia: https://www.aprenderaprogramar.com/foros/index.php?topic=2452.0

Salu2!

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: