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.
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.
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.
ResponderEliminarEjemplo simple, conciso y super util ! Gracias, con esto entende bien el uso de div!
ResponderEliminarEcha un vistazo alos frameworks de javascript como mootools, jquery, ...
ResponderEliminarTambié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 { }
Muy interesante. Gracias
ResponderEliminar