1
Aprender a programar desde cero / Maquetar página web con CSS varias columnas FLOAT. Ejercicio resuelto CU01036D:
« en: 06 de Julio 2015, 21:39 »
Hola a todos. Dejo mi solución al ejercicio CU01036D:
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?
Y otra pregunta (no sé si lo veremos más adelante): Cómo centrar el texto u/o elementos a lo alto? O sea, verticalmente.
Gracias!
Citar
Define un documento HTML donde a través del uso de la propiedad float y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con este aspecto:...
Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejercicio CU01036D</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CU01036D.css">
</head>
<body>
<div class="div1">
<div id="caja1" class="div2">Bienvenidos a aprenderaprogramar.com</div>
<div id="caja2" class="div2">Menú
<ul>
<li>Cursos</li>
<li>Humor</li>
<li>Divulgación</li>
</ul>
</div>
<div id="caja3" class="div2">Conoce las últimas novedades del lenguaje JavaScript.</div>
<div id="caja4" class="div2">Espacio reservado para publicidad</div>
<div id="caja5" class="div2">Artículo sobre Gimp, un programa de software libre para el diseño gráfico.</div>
<div id="caja6" class="div2">Contacta con nosotros</div>
<div id="caja7" class="div2">Aviso legal</div>
</div>
</body>
</html>
Código: [Seleccionar]
/*CSS para ejercicio CU01036D*/
.div1{width:800px;text-align:center;}
.div2{border:solid black;}
#caja1{width:796px;height:45px;background-color:#DEB887;text-align:center;font-family:arial;font-size:25px; font-weight:bold;border-width:2px 2px 1px 2px;}
#caja2{height:116px;float:left;width:196px;border-width:1px 1px 1px 2px;text-align:left;}
#caja3{background-color:#ADD8E6;width:399px;float:left;height:57px;border-width:1px;}
#caja4{width:197px;height:116px;float:right;border-width:1px 2px 1px 1px;}
#caja5{background-color:#90EE90;width:399px;float:left;height:57px;border-width:1px;}
#caja6{background-color:#DDA0DD;height:50px;float:left;width:438px;border-width:1px 1px 2px 2px;}
#caja7{height:50px;float:right;width:356px;border-width:1px 2px 2px 1px;}
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?
Y otra pregunta (no sé si lo veremos más adelante): Cómo centrar el texto u/o elementos a lo alto? O sea, verticalmente.
Gracias!