Foros del Web - Ver Mensaje Individual

baccxus · #2 (**permalink**) 18/11/2005, 17:22

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>