Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: alefaletti en 17 de Febrero 2017, 01:09
-
El HTML:
<!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
*{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;}
-
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
-
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.
-
Me refería a esta línea del código CSS:
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.
.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:
<div id="uno" class="divCuadrados"> </div>
<div id="dos" class="divCuadrados"> </div>
...
Saludos. ;D