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

Jack_F

  • Visitante
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>
« Última modificación: 14 de Mayo 2017, 12:11 por Alex Rodríguez »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CSS. Clear css both no funciona texto no envuelve (CU01035D)
« 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. ;D

« Última modificación: 14 de Mayo 2017, 12:10 por Alex Rodríguez »

Jack_F

  • Visitante
Re:CSS. Clear css both no funciona texto no envuelve (CU01035D)
« 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 :)

 

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