Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: ARANTZA en 22 de Noviembre 2014, 21:51
-
Envío el ejercicio a ver si alguien está en ello y lo ve bien o propone otra solución más fácil.
Gracias!
Código 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="div3">Conoce las últimas novedades del lenguaje JavaScript.</div>
<div id="div4">Espacio reservado para publicidad</div>
<div id="div5">Artículo sobre Gimp, un programa de software libre para el diseño gráfico.</div>
<div id="div6">Contacta con nosotros</div>
<div id="div7">Aviso legal</div>
</div>
</body>
Código CSS:
/* estilos prueba css11*/
*{ font-family:Arial}
#contenedor{width: 600px; height: 200px;}
div{border: solid grey 2px; padding: 2px; margin: 1px;}
/*anchura div1: 600 -padding6 -border4 =590*/
#div1{width:590px; text-align: center; height: 30px}
/*anchura div2= 590/4=147*//*altura div2=200 -div1 30 -div6 30 -border12 -margin5 -padding12= 125*/
#div2 {width: 150px; height: 111px; float: left; text-align: center;}
/*anchura div3= 590 -div 146 -div5 146 -border12 -margin5 -padding12=269*/
/*altura div3=111/2=55 -border6 =49*/
#div3{width: 269px; height: 51px; float:left; text-align: center; background-color: #ADD8E6;}
#div4{width: 151px; height: 111px; float:right; text-align: center;}
#div5{width: 269px; height: 50px; float:left; text-align: center; background-color: #90EE90;}
/*anchura div6y7=590/2= 295 -border4 -margin2= 289*/
#div6{width: 290px; height: 30px; CLEAR:left; text-align: center; background-color: #DDA0DD;float: left;}
#div7{width: 290px; height: 30px; text-align: center;float: right;}
-
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
-
Muchas gracias Mario, me gusta mucho tu propuesta sobretodo porque al englobar las dos cajas centrales en un div #central evitamos todos los problemas que yo he tenido para colocar cada cajita en su sitio.
Gracias!