Hola Arantza, en primer lugar felicitarte porque el código se ve bien estructurado y has cumplido perfectamente con lo que pedía el ejercicio.
Sobre cuestiones a corregir o mejorar:
- El color de fondo del texto "Bienvenidos a aprenderaprogramar.com" (tu div1) debe ser #DEB887, según el enunciado. Te ha faltado incluir este color.
- Entre div3 y div 5 se repiten muchas propiedades. Es mejor agrupar todo lo común en una regla y dejar las especificidades para otra regla. Esto es aplicable a todas las reglas
- CLEAR:left; es preferible escribirlo en minúsculas clear:left;
- text-align:center; se repite en todas las reglas. Mejor subirlo a una regla de nivel superior, con lo que sólo hay que escribirlo una vez.
Tener en cuenta que siempre se puede plantear el código de distintas maneras. A continuación inserto un código alternativo que usa porcentajes para expresar los anchos. No está "perfectamente cuadrado", de hecho he probado en dos navegadores y no se ve igual en ambos, pero la idea simplemente es ver que se puede resolver algo de distinta manera.
Archivo prueba css11.html
<html>
<head>
<title>hoja con cajas float</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="prueba css11.css">
</head>
<body>
<div id="contenedor">
<div id="div1">Bienvenidos a aprenderaprogramar.com</div>
<div id="div2">Menú
<ul>
<li>Cursos</li>
<li>Humor</li>
<li>Divulgación</li>
</ul></div>
<div id="central">
<div id="div3">Conoce las últimas novedades del lenguaje JavaScript.</div>
<div id="div5">Artículo sobre Gimp, un programa de software libre para el diseño gráfico.</div>
</div>
<div id="div4">Espacio reservado para publicidad</div>
<div id="div6">Contacta con nosotros</div>
<div id="div7">Aviso legal</div>
</div>
</body>
Archivo prueba css11.css
/* estilos prueba css11*/
*{font-family:Arial;}
#contenedor{width: 100%; height: 200px; text-align:center;}
div div{border: solid grey 2px; padding: 2px; margin-bottom:5px; margin-left:2px; }
#div1{width:98%; height: 30px; background-color: #DEB887;}
#div2, #div4 {width: 24%; height: 140px; float: left; }
#div3, #div5{width: 98%; height: 51px; background-color: #ADD8E6; margin-top:6px;}
#div3{background-color: #ADD8E6; }
#div5{background-color: #90EE90;}
#div6, #div7 {width: 48.5%; height: 30px; float: left; }
#div6{ clear:left;}
#div6{background-color: #DDA0DD; }
#central{float:left; width: 48%; height:140px; }
Saludos
Tema: ejercicio CU01036D# CSS maquetar en columnas con div y float width px o % (Leído 6191 veces)
RSS -
WAP2