Autor Tema: CSS y HTML Float Clear ejemplo de uso texto envuelve cajas div y fondo CU01035D  (Leído 2811 veces)

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
El HTML:

Código: [Seleccionar]
<!DOCTYPE html>

<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSSFlotanteClearejfinal(36).css">
</head>

<body>

<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 id="texto"> Con texto </div>

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

</br>
<div id="fondo"> Curso CSS aprenderaprogramar.com </div>

</body>

</html>

y el CSS

Código: [Seleccionar]
*{font-family: calibri;}

div {width:50px; height:50px; margin-right:5px; float:left;}

#uno {background-color:green;}
#dos {background-color:blue;}
#tres {background-color:pink;}
#cuatro {background-color:red;}
#cinco {background-color:brown;}
#seis {background-color:yellow;}
#siete {background-color:orange;}
#ocho {background-color:gray;}

#texto {background-color:yellow; margin-top:20px; margin-bottom:20px; width:1920px; height:20px; clear:both;}

#nueve {margin-right:5px; width:200px; height:50px; background-color:green; float:right;}
#diez {margin-right:5px; width:200px; height:50px; background-color:red; float:right;}
#once {margin-right:5px; width:200px; height:50px; background-color:blue; float:right;}

#fondo {background-color:#DEB887; width:1920px; height:20px; clear:both;}


« Última modificación: 09 de Mayo 2017, 17:59 por Alex Rodríguez »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Ejercicio Final (CU01035D) : Float - Clear
« Respuesta #1 en: 18 de Febrero 2017, 19:44 »
Hola aleffaletti.

Tu respuesta hace lo que pedía el ejercicio, te digo alguna cosa a mejorar.

Si le das estilo a las etiquetas div, estarás obligad@ cada vez que uses un div con distintas propiedades a establecer unas nuevas, lo ideal es que los div que usen esas propiedades tengan una clase.
Y cuando se dice usar el ancho disponible, lo mejor es usar 100%, porque no todos los dispositivos donde veamos la página tendrán la medida que especificaste.

Saludos. ;D

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Re:Ejercicio Final (CU01035D) : Float - Clear
« Respuesta #2 en: 20 de Febrero 2017, 23:47 »
Gracias Pedro!

Una cosa que no entiendo; a los div no les asigne estilos. Vos decis se los aplique? seria mejor?

Entiendo lo del 100%.

Muchas gracias de nuevo.

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Ejercicio Final (CU01035D) : Float - Clear
« Respuesta #3 en: 21 de Febrero 2017, 15:52 »
Me refería a esta línea del código CSS:

Código: [Seleccionar]
div {width:50px; height:50px; margin-right:5px; float:left;}
Lo que quería decirte es que sería mejor que esas propiedades se las asignases a los elementos que pertenezcan a una clase en concreta y no generalizar con todos los div que se pueden crear en un documento, porque habrá elementos div que no quieras que tengan ningún estilo u otros distintos.


Código: [Seleccionar]
.divCuadrados {width:50px; height:50px; margin-right:5px; float:left;}
Y a los div que quieras que tengan ese estilo añadirles la clase como atributo:

Código: [Seleccionar]
<div id="uno" class="divCuadrados"> </div>
<div id="dos"  class="divCuadrados"> </div>
...

Saludos. ;D

 

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