Duda sobre maquetación Web

sk1one · #1 (**permalink**) 28/09/2009, 05:38

¿Es mejor maquetar con divs (capas) o maquetar con tablas? Nada el otro dia me digeron que maquetar con tablas esta desfasao, pero es que si maqueto con divs el problema ya sabeis que cada navegador lo interpreta como quiere. Me gustaría saber si sabeis de un sitio que ponga cual método es mejos y sus ventajas y desventajas y tal gracias gente o por lo menos vuestra experiencia.

maycolalvarez · #2 (**permalink**) 28/09/2009, 06:46

al contrario, marquetar con div garantiza mayor compatibilidad con los navegadores, el problema como siempre es el IE, para eso existen técnicas para "limpiar los floats", la mas usuales:

en el contenedor:

overflow:auto o hidden //me ha funcionado con Firefox, Ie, chrome y safari
height: 1%; //funciona en la mayoría

ejemplo:
(no recuerdo exactamente de donde lo saqué)

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
#contenedor {
  border: thick solid #000;
  padding:4px;
  /*Correccion avanzada:*/
  overflow: hidden; /*auto también funciona*/
  
  height:  1%;/*SOLUCION FINAL TODOS LOS EXPLORADORES VÄLIDA*/
}
 
#izquierda {
  float: left;
  width: 40%;
  border: 1px solid blue;
}
 
#derecha {
  float: right;
  width: 40%;
  border: 1px solid red;
}

/* TECNICAS PARA EXPLORER 6 E INFERIOR:
 /* Funciona correctamente con cualquier navegador 
#contenedor {
  border:   thick solid #000;
  overflow: hidden;
  width:    100%;
}
 
/* Funciona correctamente con cualquier navegador 
#contenedor {
  border:   thick solid #000;
  overflow: hidden;
  height:   1%;
}
 
/* La propiedad zoom no es parte del estándar CSS, por lo
   que esta hoja de estilos no validaría 
#contenedor {
  border:   thick solid #000;
  overflow: hidden;
  zoom:     1;
}
 
/* El truco del guión bajo delante de las propiedades CSS sólo
   lo interpreta correctamente la versión 6 de Internet Explorer 
#contenedor {
  border:   thick solid #000;
  overflow: hidden;
  _height:  1%;
}
 
 */
 </style>
</head>

<body>
<div id="contenedor">
  <div id="izquierda">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis molestie turpis vitae ante.</div>
  <div id="derecha">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla bibendum mi non lacus.</div>
 
 <!-- CORRECCION SIMPLE <div style="clear: both"></div> -->

</div>
</body>
</html>

masclet · #3 (**permalink**) 28/09/2009, 07:36

Te voy a contestar de forma muy resumida. Desde hace unos años, las tablas a la hora de maquetar han muerto.
No se si todavía hay gente que las utilice. El año pasado estuve en una entrevista con una empresa que seguían trabajando con tablas, pero vaya, no es lo recomendable.

Además las css, te dan muchas más opciones a la hora de maquetar. Una vez las controles, claro. ;)

shalock · #4 (**permalink**) 28/09/2009, 07:49

Hola,

Bueno si hay gente que sigue trabajando con tablas, pero por experiencia propia son un dolor de cabeza al tratar de cuadrarlas para que queden bien en diferentes navegadores, y a mi parecer, mas lentas de cargas.

En cambio, si trabajas con divs y css el trabajo es muchísimo más cómodo, rápido y adaptable a los diferentes navegadores una vez le agarras el truco. A mi me tocó migrar cantidad de páginas de tablas a css y de verdad que css es mucho mejor.

sk1one · #5 (**permalink**) 28/09/2009, 08:25

Perfecto lo que pasa que yo e estado maquetando pero manejo CSS pero no sabia lo de la maquetacion por divs bueno ya e apredido, algo si teneis manuales o algo por el estilo agradeceria mucho que lo dijerais o alguna lectura gracias muchas gracias.

jomaruro · #6 (**permalink**) 28/09/2009, 15:16

Hola:

En la página www.librosweb.es tienes un par de manuales de CSS. Te ayudarán.

Saludos.