Autor Tema: Ejemplo float CSS clear divs flotantes alinear a izquierda o derecha CU01035D (Leído 4229 veces)

Elanti · « **en:** 05 de Junio 2015, 03:46 »

Citar

EJERCICIO

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. Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

Mi solución:

Archivo html:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="ejercicio sobre float y clear">
<meta name="keywords" content="float, clear, html, css, tutorial">
<meta name="author" content="elanti">
<title>Ejercicio float y clear</title>
<link type="text/CSS" rel="stylesheet" href="ejercicio float y clear.css">
</head>
<body>
<div class="izq" id="una"></div>
<div class="izq"id="dos"></div>
<div class="izq"id="tres"></div>
<div class="izq"id="cuatro"></div>
<div class="izq"id="cinco"></div>
<div class="izq"id="seis"></div>
<div class="izq"id="siete"></div>
<div class="izq"id="ocho"></div>
<div id="auxiliar1"></div>
<div id="amarillo">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.

Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.

Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex.

Eum hinc argumentum te, no sit percipit adversarium, ne qui feugiat persecuti. Odio omnes scripserit ad est, ut vidit lorem maiestatis his, putent mandamus gloriatur ne pro. Oratio iriure rationibus ne his, ad est corrumpit splendide. Ad duo appareat moderatius, ei falli tollit denique eos. Dicant evertitur mei in, ne his deserunt perpetua sententiae, ea sea omnes similique vituperatoribus. Ex mel errem intellegebat comprehensam, vel ad tantas antiopam delicatissimi, tota ferri affert eu nec. Legere expetenda pertinacia ne pro, et pro impetus persius assueverit.

Ea mei nullam facete, omnis oratio offendit ius cu. Doming takimata repudiandae usu an, mei dicant takimata id, pri eleifend inimicus euripidis at. His vero singulis ea, quem euripidis abhorreant mei ut, et populo iriure vix. Usu ludus affert voluptaria ei, vix ea error definitiones, movet fastidii signiferumque in qui.
</div>
<div class="der"id="first"></div>
<div class="der"id="second"></div>
<div class="der"id="third"></div>
<div id="auxiliar2"></div>
<div id="último">Curso CSS aprenderaprogramar.com</div>
</body>
</html>

Archivo css:

Código: [Seleccionar]

.izq{width:50px;
     height:50px;
     margin-right:5px;
     float:left;}
#una{background-color:red;}
#dos{background-color:blue;}
#tres{background-color:green;}
#cuatro{background-color:black;}
#cinco{background-color:orange;}
#seis{background-color:magenta;}
#siete{background-color:cyan;}
#ocho{background-color:olive;} 
#amarillo{margin-top:20px;
          margin-bottom:20px;
          background-color:yellow;
          width:100%;
          clear:left;}
.der{width:200px;
     height:50px;
     margin-right:5px;
     float:right;}
#first{background-color:darkblue;}
#second{background-color:darkred;}
#third{background-color:darkgreen;}
#último{background-color:#DEB887;
        width:100%;
        clear:right;}
#auxiliar1{clear:both;}        
#auxiliar2{clear:both;
          height:20px; }

Gracias.

Ogramar · « **Respuesta #1 en:** 07 de Junio 2015, 22:06 »

Hola elanti todo bien, exactamente lo que pedía el ejercicio, a seguir así!

En algunos lugares no dejas espacio entre dos atributos de etiqueta html, te recomiendo que siempre dejes el espacio

<div class="izq" id="una"></div> , bien tiene espacios
<div class="izq"id="dos"></div> , no tiene espacios

Salu2

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

Noticias:

Autor Tema: Ejemplo float CSS clear divs flotantes alinear a izquierda o derecha CU01035D (Leído 4229 veces)

Elanti

Ejemplo float CSS clear divs flotantes alinear a izquierda o derecha CU01035D

Ogramar

Re:Ejemplo float CSS clear divs flotantes alinear a izquierda o derecha CU01035D

Preguntas y respuestas

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

Noticias:

Autor Tema: Ejemplo float CSS clear divs flotantes alinear a izquierda o derecha CU01035D (Leído 4229 veces)

Elanti

Ejemplo float CSS clear divs flotantes alinear a izquierda o derecha CU01035D

Ogramar

Re:Ejemplo float CSS clear divs flotantes alinear a izquierda o derecha CU01035D

Preguntas y respuestas

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