Tabla Vs Divs

elwolos · #1 (**permalink**) 21/02/2008, 07:36

Hola a todos!
Creo que es un tema ya conocido, pero bueno me cuesta despegarme de las tablas.
Quiero preguntarles sobre este codigo.

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style> 
   body { 
    margin:0; 
    padding:0; 
    text-align:center; 
   } 

   #content {
	text-align:left;
	margin:auto;
	background-color:#ff0;
	width:870px;
	height:inherit;
   } 

   #cabecera { 
    width: 870px; 
    height:70px; 
    background-color:#f00; 
   } 

   #menu {
	width:175px;
	height:inherit;
	float:left;
	background-color:#888;
   } 

   #contenido { 
    width:536px; 
    height:auto; 
    float:left; 
    background-color:#ccc; 
   } 

   #menuDer {
	float:left;
	width:159px;
	height:inherit;
	background-color:#0f0;
   } 

   #pie { 
    clear:both; 
    width:870px; 
    height:50px; 
    background-color:#0f0; 
   } 
</style> 

</head>

<body>

<div id="content"> 
  <div id="cabecera">asd</div> 
  <div id="menu">asd</div> 
  <div id="contenido">lkjhkjhkjh<br />kjhgjhjhg<br />lkjkjlkj<br />likjl</div> 
  <div id="menuDer">asdkjhkjh</div> 
  <div id="pie">asd</div> 
</div> 

</body>
</html>

Bueno si hago esto con tablas no tendria el siguiente problema
como veran el contenido de la pagina es mas largo que los menues de los costados, el tema es que yo quiero que los menues acompañen a la caja central, si uso tablas eso es automatico, como entonces, puedo hacerlo con divs???
Muchas Gracias!!!

eContento · #2 (**permalink**) 21/02/2008, 08:46

Venga,
A ver si te sirve este ejemplo de como diseñar un CSS con tres columnas.
http://www.cristalab.com/tutoriales/131/

Yo creo que lo han explicado bastante clarito

Un saludo,
eContento

elwolos · #3 (**permalink**) 21/02/2008, 08:56

Bueno si.. pero no dice lo que busco...
lo que yo quiero es que las 3 columnas bajen juntas.
si alguna tiene mas texto que otra que empuje a las demas... que no se note que estan separadas...

hades87 · #4 (**permalink**) 21/02/2008, 09:06

metes los 3 divs dentro de un contenedor, al contenedor le das un height: auto, a las celdas les das un height del 100%, y listo, de esa forma ves tu caja auto ajustable.

elwolos · #5 (**permalink**) 21/02/2008, 10:01

No me funciono...
hice un div y meti esos 3 adentro y le di auto y 100% a los otros 3 y no paso nada... ¿?

cleft · #6 (**permalink**) 21/02/2008, 10:21

Si cuando dices "yo quiero que los menues acompañen a la caja central" te refieres a que el color de fondo de estas capas llegue hasta el final del alto de la capa central, independientemente de sus heights, entonces, te recomiendo utilizar "faux columns" (www.alistapart.com/articles/fauxcolumns/"), que sencillamente es poner una imagen de fondo en tu capa central, que visualmente generara la division de las columnas.

elwolos · #7 (**permalink**) 21/02/2008, 10:42

Sip! eso es lo que queria...
Igualmente me parece una solucion media rara, vez, para eso me gustan mas las tablas, es mas odrenado!
¿No eran mejor las tablas? Dice que son muy vuelteras, pero me parece mas ordenado, bah! que se yo...

cleft · #8 (**permalink**) 21/02/2008, 10:57

Pues, lo de ser bueno o mejor no es lo que importa. Si no: la semantica. Utilizar los elementos para lo que fueron creados.
Las tablas son para crear datos tabulares. :)

Hay muchas maneras de crear lo que deseas, asi que, por ahi puedes encontrar alguna mas simple (siempre a traves de CSS) de la que te postee.
Pero si tienes alguna duda, solo nos avisas. :D

PosProdukcion · #9 (**permalink**) 21/02/2008, 11:21

Justamente en alineamiento y expansión vertical de DIVs es donde falla un poco el CSS, parece que para la version 3 lo estan teniendo en cuenta...

Por lo demás, sin duda es mucho más versátil y flexible que el diseño con tablas, mira, este libro creo que hace una explicación muy buena del CSS, para ir leyéndolo a ratos:

http://www.librosweb.es/css/

Igual hay veces que es más sencillo tirar de tablas y no pasarse una semana para arreglar algo que debería ser sencillo, pero según vas profundizando en el CSS te vas dando cuenta de su potencial...

Suerte

jrarce · #10 (**permalink**) 17/10/2008, 13:22

Bueno, una forma más elegante de solucionar esto sin tener que usar una imagen, es poner las 3 columnas dentro de un mismo DIV, y poner este div con el css que te explico al lado al final de las tres columnas, por ejemplo

<div id="contenedor">

<div id="columna1">Contenido</div>
<div id="columna2">Contenido</div>
<div id="columna3">Contenido</div>

<div class="clear"></div>

</div>

En el .css los atributos de .clear serían:

.clear {
clear: both;
display: block;
height: 1px;
overflow: hidden;
margin: 0;
padding: 0;
}

En cuanto a las ventajas sobre usar DIVs y CSS, les recomiendo el siguiente artículo que enumera al menos 10 argumentos por los cuales es mejor hacer la maquetación usando DIVs y CSS:

Null_ · #11 (**permalink**) 18/10/2008, 11:20

Aqui te invente una solucion...
tube que agregar un div adicional y arreglarte un poco el codigo

Cita:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css"></style>

</head>

<body>

<div id="content">

<div id="cabecera">cabecera</div>

<div id="menuIzq">MenuIzq</div>

<div id="menuDer">Menuder</div>

<div id="contenido">
<div id="contenido2">
contenido<br />contenido<br />contenido
contenido<br />contenido<br />contenido
contenido<br />contenido<br />contenido
contenido<br />contenido<br />contenido
contenido<br />contenido<br />contenido
contenido<br />contenido<br />contenido
contenido<br />contenido<br />contenido
</div>
</div>

<div id="pie">pie</div>

</div>

</body>
</html>

el fondo del contenedor pasa a ser el fondo del menu derecho :P