18/11/2005, 15:55
| |||
| |||
| maquetear columnas tengo una duda, tengo la idea de hacer un layout para un website de esta manera:  los cuadros rojo y azul representarian menus, el cuadro verde la cabezera y el amarillo el pie de pàgina, y el centro, lo blanco, el contenido del sitio, asi que mi duda es como se podria maquetear algo asi en CSS? o forzosamente necesito usar tablas con col/row span ? |
|
18/11/2005, 17:22
| ||||
| ||||
| No veo porque tengas que usar tablas
Código:
body {margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;}
p {text-align: justify;}
table, tr, td {
border-collapse: collapse;}
table {
border-top: 1px solid red;
border-left: 1px solid red;
width: 95%;
margin: 0 auto;}
td {border-bottom: 1px solid red;
border-right: 1px solid red;}
thead {
font-weight:bold;
font-size: 1.25em;
color: white;
background-color: orange;}
caption {color: Orange;
margin-bottom: 5px;
font-size: 1.5em;
font-weight: bold;
}
#container {margin: 0 auto;
width: 760px;
position: relative;
}
#header {background-color: rgb(0, 255, 0);
width: 600px;
border-bottom: 1px solid black;
height: 99px;
float: left;
}
#left {background-color: red;
border-right: 1px solid black;
width: 159px;
float: left;
height: 500px}
#content {background-color: white;
width: 438px;
float: left;
height: 398px;
border: 1px dotted grey;
overflow: scroll;}
#right {background-color: blue;
width: 159px;
border-left: 1px solid black;
float: right;
position: relative;
height: 500px}
#footer {background-color: yellow;
float: left;
width: 600px;
border-top: 1px solid black;
height: 100px;}
Código HTML: <body> <div id="container"> <div id="left"> <ul> <li>Aprende xHTML </li> <li>Uso de etiquetas </li> <li>Diseño estructurado</li> <li>xHTML 2.0 Proximamente</li> </ul> </div> <div id="header"> <h1>Diseño con cajas CSS</h1> </div> <div id="content"> <p>El ideal del CSS es que el contenido valla separado del diseño, así se obtienen muchas ventajas en cuanto a buscadores, posicionamiento, uniformidad de sitios, carga más rápidas e incluso usar solo un contenido para diferentes medios (impresión, pantalla, móvil, etc), también la facilidad de hacer un cambio en el diseño de todo tu "site" con un solo archivo, otra de las ventajas que ofrece la separación del contenido y el diseño es que usuarios con limitaciones visuales puedan usar un lector de pantalla (sin problemas) y muchas más ventajas.</p> <p>Ahora, si deseas hacer un uso correcto de CSS, no debes usar "<table>" para estructurar tu "site", para eso existen las capas; los "<table>" son para poner contenido tabular, algo así como esto:</p> <table> <caption> Uso correcto de las tablas </caption> <thead><tr> <td>Nombre</td> <td>Apellido</td> <td>Cédula</td> <td>Dirección</td> </tr></thead> <tr> <td>Juan</td> <td>Pérez</td> <td>123456</td> <td>Arriba de la loma </td> </tr> <tr> <td>María</td> <td>Gómez</td> <td>654321</td> <td>Debajito de Juan Pérez </td> </tr> </table> <p>Las estructuras con css son fáciles de implementar, facilitan los cambios a futuro y ahorran tiempo, al principio no es cómodo usar CSS porque es "más código" pero con el tiempo y la experiencia puedes hacer mucho, ejemplos de diseños CSS pueden encontrar en:</p> <ol> <li><a href="http://www.camaleoncss.com/1/p1/camaleon.html" target="_blank">http://www.camaleoncss.com/1/p1/camaleon.html</a> </li> <li><a href="http://www.csszengarden.com/" target="_blank">http://www.csszengarden.com/</a></li> </ol> <p>Y aplicacion de css en tablas (para cuando lo necesites):</p> <ul> <li><a href="http://icant.co.uk/csstablegallery/" target="_blank">http://icant.co.uk/csstablegallery/</a></li> </ul> <p>Saludos,</p> </div> <div id="right"> <h2>Features</h2> <ul> <li>Accesibilidad</li> <li>Rápidez</li> <li>Facilidad</li> <li>y muchas más</li> </ul> </div> <div id="footer">© 2005 Baccxus Inc. Co. </div> </div> </body>
__________________ Al final del día hablar es gratis, codificar no lo es Última edición por baccxus; 18/11/2005 a las 17:42 |
