Autor Tema: HTML CSS crear muchos div Clear css both no funciona texto no envuelve CU01035D (Leído 1988 veces)

Jack_F · « **en:** 26 de Febrero 2017, 19:37 »

Hola amigos aqui de nuevo con otro ejercicio del curso básico de CSS, el CU01035D.

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

Normalmente uso la forma externa para el código CSS y, ahora use en interna.

Código HTML y CSS:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	    <head>
	    	    <title>Ejercicio CU01035D uso de las propiedades de clear y float y otras propiedades.</title>
	    	      <meta charset="utf-8" />
	    	        <style type="text/css">
	    	        	/*Una imagem de fondo para toda la web*/
	    	        	body{background-image: url(http://i44.photobucket.com/albums/f30/Jack_f1/img4_zps9bk4wtx1.png);}
	    	        	/*Bueno uaer la float left para el elemnto padre*/
	    	        	#parteA{float: left;  margin: 30px; border: solid; padding: 2%; background-color: #B0E0E6}
                             #parteA div{width: 50px; height: 50px; margin-left: 5px; border: solid; float: left;}
                               .uno{background-color: red;}
                                 .dos{background-color: blue;}
                                   .tres{background-color: grey;}
                                     .cuatro{background-color: yellow;}
                                       .cinco{background-color: orange;}
                                         .seis{background-color: pink;}
                                           .siete{background-color: green;}
                                             .ocho{background-color: #9370DB;}
                                             #parteB{margin-top: 20px; background-color: yellow; clear: both; text-align: center;}
                                             /*Tambien usare  la propiedad float para el padre*/
                                             #parteC{float: right; border: solid red; padding: 2%; background-color: #7FFFD4; margin: 30px;}
                                             #parteC div{width: 200px; height: 50px; margin-right: 5px; border: solid; float: right;}
                                              .nueve{background-color: #87CEFA;}
                                                .diez{background-color: #F0D58C;}
                                                  .once{background-color: #E9967A;}
                                                  #parteD{background-color: #DEB887; clear: both; text-align: center;}
	    	        </style>
	    </head>
	    <body>
	         <div id="parteA">
	    	   <div class="uno"></div>
	    	     <div class="dos"></div>
	    	       <div class="tres"></div>
	    	         <div class="cuatro"></div>
	    	           <div class="cinco"></div>
	    	             <div class="seis"></div>
	    	               <div class="siete"></div>
	    	                 <div class="ocho"></div>
	    	                   </div>
	    	                   <div id="parteB">Lo bueno de trabajar con ordenadores es que nunca te defraudan siempre estan disponible cuando lo necesitas.</div>
	    	                   <div id="parteC">
	    	                   	         <div class="nueve"></div>
	    	                   	           <div class="diez"></div>
	    	                   	             <div class="once"></div>
	    	                      </div>
	    	                      <div id="parteD">Curso CSS aprenderaprogramar.com</div>
	    </body>
</html>

pedro,, · « **Respuesta #1 en:** 28 de Febrero 2017, 10:30 »

Hola Jorgito.

El ejercicio funciona correctamente.

Solo comentarte que no sigues los enunciados como vienen descritos:
En el apartado a dice establecer margin-right y usastes margin-left.
En el apartado b, dice que establezcas un margen superior e inferior y solo estableciste el superior.
Apartados c y d todo correcto.

También recomendarte que empieces a usar una indentación correcta para que haga tus códigos mas legibles, de la forma que usas la indentación es complicado saber a que pertenece cada cosa.

Saludos.

Jack_F · « **Respuesta #2 en:** 04 de Marzo 2017, 21:40 »

Hola pedro.
Si, como siempre me olvido de algunos detalles, sin embargo, no comprendi la parte de que mi código debe ser mas legibles, quieres deir que tengo posicionarlos mas hacia la derecha.

Un abrazo

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

Noticias: