Buscar en este blog

Cargando...

jueves, 22 de noviembre de 2007

HTML. div en lugar de table II

La distribución del contenido html es posible sin el uso de tablas.

En el ejemplo podemos distribuir el contenido típico de cabecera, menu a la derecha y contenido a la izquierda.

Con el uso de los estilos
float: left;
float: right;

clear: left;
clear: both;

Podemos distribuir el contenido de nuestra web sin necesidad de tablas.

Echar un vistazo al ejemplo más completo en HTML organizar el contenido con divs

También ejemplos visuales de divs con distintos css en la propiedad de display

Y cómo no la w3c con su guía de referencia rápida de css y xhtml:
Guía de Referencia CSS 2.1
Guía de Referencia XHTML


<div id="cabecera" style="border: 1px solid blue;">
cabecera
</div>
<div id="cabecera2" style="border: 1px solid blue; clear: both;">
cabecera2
</div>
<div id="menu" style="float: left; border: 1px solid blue; width: 200px;">
<div>menu 1</div>
<div>menu 2</div>
<div>menu 3</div>
<div>menu 4</div>
</div>
<div id="contenido" style="border: 1px solid blue; margin-left: 225px;">
contenido1
contenido2<br />
<div>contenido3</div>
<div>contenido4</div>
</div>
<div id="derecha" style="float: right;">
derecha
</div>

<div id="pie" style="border: 1px solid blue; clear: both">
pie
</div>
<div id="tabla" style="float: left; margin-top: 10px;">
tabla
<div style="float: left; border: 1px solid blue; width: 50px;">
A
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
B
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
C
</div>
<div style="float: left; width: 50px; border: 1px solid blue;">
D
</div>
<div style="float: left; width: 50px; border: 1px solid blue;">
E
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
F
</div>
<div style="clear: left;">
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
H
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
I
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
J
</div>
<div style="float: left; width: 50px; border: 1px solid blue;">
K
</div>
<div style="float: left; width: 50px; border: 1px solid blue;">
L
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
M
</div>
</div>

Visita también la parte I de este mismo tema.

4 comentarios:

nau123 dijo...

Como hacer para que al hacer clic sobre cualquiera de los menus aparezca su contenido en el espacio donde estan los contenidos 1, 2, 3 etc.

Marco dijo...

Ejemplo simple, conciso y super util ! Gracias, con esto entende bien el uso de div!

mugedoc dijo...

Echa un vistazo alos frameworks de javascript como mootools, jquery, ...

También hay varias entradas sobre este tema
Mootools

Javascript framework: mootools, prototype, jquery

Lo que necesitas lo puedes hacer con javascript, pero hay cosas que con CSS sin necesidad de programación se pueden conseguir
element:HOVER { }

Sergio dijo...

Muy interesante. Gracias