Foros del Web » Creando para Internet » CSS »

maquetear columnas

Estas en el tema de maquetear columnas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/11/2005, 15:55
 
Fecha de Ingreso: agosto-2005
Mensajes: 32
Antigüedad: 12 años, 4 meses
Puntos: 0
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 ?
  #2 (permalink)  
Antiguo 18/11/2005, 17:22
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
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&ntilde;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&ntilde;o, as&iacute; se obtienen muchas ventajas en cuanto a buscadores, posicionamiento, uniformidad de sitios, carga m&aacute;s r&aacute;pidas e incluso usar solo un contenido para diferentes medios (impresi&oacute;n, pantalla, m&oacute;vil, etc), tambi&eacute;n la facilidad de hacer un cambio en el dise&ntilde;o de todo tu "site" con un solo archivo, otra de las ventajas que ofrece la separaci&oacute;n del contenido y el dise&ntilde;o es que usuarios con limitaciones visuales puedan usar un lector de pantalla (sin problemas) y muchas m&aacute;s ventajas.</p>
<p>Ahora, si deseas hacer un uso correcto de CSS, no debes usar &quot;<table>&quot; para estructurar tu "site", para eso existen las capas; los &quot;<table>&quot; son para poner contenido tabular, algo as&iacute; como esto:</p>
<table>
	<caption>
Uso correcto de las tablas
</caption>
<thead><tr>
<td>Nombre</td>
<td>Apellido</td>
<td>C&eacute;dula</td>
<td>Direcci&oacute;n</td>
</tr></thead>
<tr>
<td>Juan</td>
<td>P&eacute;rez</td>
<td>123456</td>
<td>Arriba de la loma </td>
</tr>
<tr>
<td>Mar&iacute;a</td>
<td>G&oacute;mez</td>
<td>654321</td>
<td>Debajito de Juan P&eacute;rez </td>
</tr>
</table>
<p>Las estructuras con css son f&aacute;ciles de implementar, facilitan los cambios a futuro y ahorran tiempo, al principio no es c&oacute;modo usar CSS porque es "m&aacute;s c&oacute;digo" pero con el tiempo y la experiencia puedes hacer mucho, ejemplos de dise&ntilde;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&aacute;pidez</li>
<li>Facilidad</li>
<li>y muchas m&aacute;s</li>
</ul>
</div>
<div id="footer">&copy; 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
  #3 (permalink)  
Antiguo 18/11/2005, 17:27
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Y por supuesto, la imagen:

Saludos,
__________________
Al final del día hablar es gratis, codificar no lo es
  #4 (permalink)  
Antiguo 18/11/2005, 18:45
 
Fecha de Ingreso: agosto-2005
Mensajes: 32
Antigüedad: 12 años, 4 meses
Puntos: 0
interesante, necesito leer mas sobre capas, muchas gracias por todo, probare esto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:02.