Foros del Web » Creando para Internet » CSS »

Tabla Vs Divs

Estas en el tema de Tabla Vs Divs en el foro de CSS en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 21/02/2008, 07:36
Avatar de elwolos  
Fecha de Ingreso: febrero-2004
Ubicación: Argentina
Mensajes: 251
Antigüedad: 13 años, 9 meses
Puntos: 0
Tabla Vs Divs

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!!!
__________________
W:-DL
...estas cosas pasan una sola vez en la vida... capaz dos.
Diseño Web - Desarrollo Web
  #2 (permalink)  
Antiguo 21/02/2008, 08:46
 
Fecha de Ingreso: junio-2004
Mensajes: 616
Antigüedad: 13 años, 6 meses
Puntos: 25
Re: Tabla Vs Divs

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
__________________
eContento
- Mis artículos, tutoriales y labs
- Mis jsfiddles
  #3 (permalink)  
Antiguo 21/02/2008, 08:56
Avatar de elwolos  
Fecha de Ingreso: febrero-2004
Ubicación: Argentina
Mensajes: 251
Antigüedad: 13 años, 9 meses
Puntos: 0
Re: Tabla Vs Divs

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...
__________________
W:-DL
...estas cosas pasan una sola vez en la vida... capaz dos.
Diseño Web - Desarrollo Web
  #4 (permalink)  
Antiguo 21/02/2008, 09:06
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Tabla Vs Divs

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.
__________________
No diseñes usando tablas.
  #5 (permalink)  
Antiguo 21/02/2008, 10:01
Avatar de elwolos  
Fecha de Ingreso: febrero-2004
Ubicación: Argentina
Mensajes: 251
Antigüedad: 13 años, 9 meses
Puntos: 0
Re: Tabla Vs Divs

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... ¿?
__________________
W:-DL
...estas cosas pasan una sola vez en la vida... capaz dos.
Diseño Web - Desarrollo Web
  #6 (permalink)  
Antiguo 21/02/2008, 10:21
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Tabla Vs Divs

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.
  #7 (permalink)  
Antiguo 21/02/2008, 10:42
Avatar de elwolos  
Fecha de Ingreso: febrero-2004
Ubicación: Argentina
Mensajes: 251
Antigüedad: 13 años, 9 meses
Puntos: 0
Re: Tabla Vs Divs

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...
__________________
W:-DL
...estas cosas pasan una sola vez en la vida... capaz dos.
Diseño Web - Desarrollo Web
  #8 (permalink)  
Antiguo 21/02/2008, 10:57
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Tabla Vs Divs

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
  #9 (permalink)  
Antiguo 21/02/2008, 11:21
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 13 años
Puntos: 9
Re: Tabla Vs Divs

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
  #10 (permalink)  
Antiguo 17/10/2008, 14:22
 
Fecha de Ingreso: julio-2007
Mensajes: 1
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Tabla Vs Divs

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:

Última edición por tunait; 17/10/2008 a las 15:50 Razón: remover link
  #11 (permalink)  
Antiguo 18/10/2008, 12:20
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: Tabla Vs Divs

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&iacute;tulo</title>
<style type="text/css"><!--
body {
margin:0;
padding:0;
text-align:center;
}

#content {
text-align:left;
margin:auto;
background-color:#0f0;
width:870px;
}

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

#menuIzq {
width:175px;
float:left;
background-color:#888;
}

#menuDer {
float:right;
width:159px;
}

#contenido {
padding-left:175px;
margin-right:159px;
background-color:#888;
}

#contenido2 {
background-color:#CCC;
}

#pie {
clear:both;
width:870px;
height:50px;
background-color:#fC0;
}

--></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
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 17:00.