Autor Tema: HTML y CSS ejercicio resuelto posicionamiento flotante Clear both float CU01035D  (Leído 2874 veces)

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Buenas buenas!!!! dejo mi resolucion para el ejercicio CU01035D del curso básico de desarrollo web con HTML y CSS. Tarde pero seguro...

CU01035D.html

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Clear CSS Both float - Curso aprenderaprogramar.com</title>
    <meta name="author" content="Hugo A. Segura" />
    <meta name="description" content="Clear CSS Float" />
    <meta name="keywords" content="curso, aprender a programar, html, css, clear, float,(CU01035D)" />   
    <meta charset="utf-8" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" type="text/css" href="CU01035D.css"/>
  </head>
  <body>
    <div class="ejera">
      <h1>Resolución ejercicio (CU01035D)</h1>
      <h2>Ejercicio A</h2>
      <div id="c1">Caja1</div>
      <div id="c2">Caja2</div>
      <div id="c3">Caja3</div>
      <div id="c4">Caja4</div>
      <div id="c5">Caja5</div>
      <div id="c6">Caja6</div>
      <div id="c7">Caja7</div>
      <div id="c8">Caja8</div>
      <div class="borrador"></div>
    </div>
    <div class="ejerb">
      <h2>Ejercicio B</h2>
      <div><span id="negrita">Lorem Ipsum</span> es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</div>
    </div>
    <div class="ejerc">
      <h2>Ejercicio C</h2>
      <div id="c9">Caja9</div>
      <div id="c10">Caja10</div>
      <div id="c11">Caja11</div>
      <div class="borrador"></div>
    </div>
    <div class="ejerd">
      <h2>Ejercicio D</h2>
      <div id="c12">&lt;&lt;Curso CSS aprenderaprogramar.com&gt;&gt</div>
    </div>
  </body>
</html>

CU01035D.css
Código: [Seleccionar]
/* Estilos aplicados al ejercicio entrega Nº 35
aprenderaprogramar.com (CU01035D)*/

*{
  font-family: Arial, sans-serif;
}

body{
  background-color: beige;
}

/* Ejercicio a */
h1, h2{text-align: center;}

#c1,#c2,#c3,#c4,#c5,#c6,#c7,#c8{
  width: 50px;
  height: 50px;
  margin-right: 5px;
  float: left;
}

#c1{background-color: #FEED9A;}
#c2{background-color: #A7A187;}
#c3{background-color: #878DA8;}
#c4{background-color: #D5D9EE;}
#c5{background-color: #A0ABD7;}
#c6{background-color: #75736A;}
#c7{background-color: #F6E594;}
#c8{background-color: #756D47;}

/* ejercicio b */

.ejerb h2{text-align: center;}
.ejerb div{
  background-color: yellow;
  margin-top: 20px;
  margin-bottom: 20px;
}

#negrita{
  font-weight: bold;
}

/* ejercicio c */

.ejerc div{
  width: 200px;
  height: 50px;
  margin-right: 5px;

}

#c9{background-color: #FEED9A; float: right;}
#c10{background-color: #D5D9EE; float: right;}
#c11{background-color: #F6E594; float: right;}

.borrador{
  clear: both;
  border: none;
  height: 0;
}

/* ejercicio d */
#c12{
  background-color: #DEB887;
}
« Última modificación: 11 de Septiembre 2016, 20:50 por Alex Rodríguez »
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Clear css both float (CU01035D)
« Respuesta #1 en: 10 de Septiembre 2016, 10:42 »
Hola hymsoft.

Está todo bien, muy bien ordenado y estructurado.

Por apuntar algo, podrías haberte ahorrado dos "float:right" habiendo escrito uno solo en ".ejerc div{...", hay que intentar siempre en repetir el menos código posible.


Saludos. ;D

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Re:Clear css both float (CU01035D)
« Respuesta #2 en: 10 de Septiembre 2016, 13:34 »
Hola Pedro, gracias por el comentario y la aclaración, supongo que a medida que tome confianza y practica, me ire acomodando con lo de las repeticiones :-)

Saludos!!!
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

 

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