Hola pitu
He revisado el ejercicio y hay algunas cosas a comentar.
La alineación en vertical se explica más adelante en el curso (creo que ya has llegado).
En el enunciado se decía lo siguiente:
Nota: los anchos de los elementos serán del 100 % disponible si es todo el ancho (por ejemplo <<Bienvenidos>>), del 25 % si es una columna simple (por ejemplo <<Menú>>) y del 50 % si es una columna doble (por ejemplo <<Artículo sobre Gimp>>).
Sin embargo tú has fijado los anchos usando valores en pixeles, por ejemplo #caja1{width:796px; ...
Ten en cuenta que quizás en la pantalla donde tú has visto el ejercicio es de 800 pixeles de ancho y estos valores de pixeles son correctos, pero ¿qué ocurre si la pantalla donde lo mira otra persona tiene 2048 pixeles de ancho por ejemplo, o si tiene 496 pixeles de ancho? Lo que ocurrirá es que el ancho no será el de toda la pantalla (que era lo que pedía el ejercicio).
Esto se puede solucionar usando los valores en %, de ese modo siempre se toma el % respecto a la pantalla, de modo que en todas las pantallas el ancho será el mismo en proporción a la pantalla.
La explicación sobre el uso de porcentajes la puedes leer en
www.aprenderaprogramar.com/foros/index.php?topic=1647Con las alturas no se suele hacer esto, ya que normalmente se considera que a lo ancho no hay scroll pero a lo alto sí, de modo que los anchos sí suelen fijarse usando pixeles.
Me surge una duda: En #caja2 que tenemos un menú, al haber centrado el texto arriba para todas las cajas, ¿como resuelvo el hecho de que el menú quede desordenado? Yo usé text-align para esa caja en particular, pero supongo que debe haber una manera de que quede mejor?
La solución que has usado no es mala. De todas formas, cuando quieras aplicar una regla específica para un fragmento de código, crea una subdivisión específica y aplícales las reglas que desees. En la parte que preguntas podrías haber definido por ejemplo:
<div id="caja2" class="div2">Menú
<ul class="lista">
<li>Cursos</li>
<li>Humor</li>
<li>Divulgación</li>
</ul>
</div>
Y aplicar una regla como .lista {text-align:left;}
Por último indicarte una cosa que sería interesante hacer: evitar la repetición de código unificando en una regla múltiples repeticiones.
Por ejemplo la caja2, caja3, caja5 y caja 6 tienen float:left;
En lugar de repetir en todas las reglas puedes crear una regla como esta:
#caja2, #caja3, #caja5, #caja6 {float:left;}
Si haces esto con todas las repeticiones relevantes tendrás un código más breve, más legible y más fácil de mantener.
Te recomiendo que reescribas el ejercicio teniendo en cuenta todo lo indicado, te servirá para mejorar.
Saludos
Tema: Maquetar página web con CSS varias columnas FLOAT. Ejercicio resuelto CU01036D: (Leído 3516 veces)
RSS -
WAP2