Doctype y tablas con divs

Mikeliu · #1 (**permalink**) 16/03/2011, 08:48

Estoy creando una web cuya estructura general está diseñada con divs convertidos en tablas y celdas mediante la propiedad display de CSS.

El problema surge cuando le pongo un Doctype al documento HTML, en mi caso el 4.01 transicional. Las supuestas "tablas" se descolocan y no tienen en cuenta las dimensiones originales. Parece cómo si los divs dejasen de ser tabulares. ¿Sabéis de algún Doctype que sí tenga en cuenta este tipo de elementos?

zerokilled · #2 (**permalink**) 17/03/2011, 00:40

buenas...

¿podrias mostrar un ejemplo de tu codigo? de lo contrario solo quedaria esperar por el adivino.

ContactarNET · #3 (**permalink**) 17/03/2011, 01:01

Creo que mas de un error ed doctype, es un error de CSS tuyo.

Mikeliu · #4 (**permalink**) 17/03/2011, 05:09

Código:

<html>
  <style>
    .total { width:100%; height:100% }
    
    .tab { display:table; margin:auto }
    .tab > div { display:table-cell; text-align:center; vertical-align:middle }
    /* estilos aplicados a los divs para comportarse como tablas. Es un estándar CSS pero, como suele pasar, no funciona en IE. */
    
    body { background-color:#006 }
    #cont { background-color:#066 }
  </style>
  <body class="tab total">
    <div id="menu"><!-- divs del menú --></div>
  	<div id="cont" class="total">
      <div><h1>Ejemplo de título</h1></div>
    </div>
  </body>
</html>

Probad con el Doctype de la versión 4.01:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Y veréis que el div tabular se encoge.

saul123 · #5 (**permalink**) 17/03/2011, 05:26

Hola Mikeliu

Yo he probado tu ejemplo pero no veo fallos , he usado un doctype

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Mikeliu · #6 (**permalink**) 17/03/2011, 06:38

Con tu Doctype me hace lo mismo.

Mikeliu · #7 (**permalink**) 24/03/2011, 16:23

Esperaba que alguien me ayudara aquí...

zerokilled · #8 (**permalink**) 24/03/2011, 16:38

quizas deberias solicitar que muevan el tema al foro de CSS ya que parece un problema mas bien de CSS. si nadie te ha repsondido probablemente es porque nadie ha podido entender el error y no han dado con una solucion. al menos asi es mi caso.

Mikeliu · #9 (**permalink**) 29/03/2011, 06:14

Cita:

Iniciado por zerokilled

quizas deberias solicitar que muevan el tema al foro de CSS ya que parece un problema mas bien de CSS. si nadie te ha repsondido probablemente es porque nadie ha podido entender el error y no han dado con una solucion. al menos asi es mi caso.

He puesto el código íntegramente, no sé qué más puedo hacer para que se entienda el problema. Me parece que ha quedado claro, o debería.

Bueno, ¿y cómo hago para mover el tema?

zerokilled · #10 (**permalink**) 29/03/2011, 07:26

no me refiero a que te has explicado mal, sino al entendimiento del por que sucede el error. para solicitar la reubicacion, utiliza el icono

que aparece debajo de tu nombre en cada mensaje que publicas.

Mikeliu · #11 (**permalink**) 29/03/2011, 11:03

Ok, gracias.

kseso? · #12 (**permalink**) 29/03/2011, 12:19

No es la ausencia o presencia del doctype, que esa es una cuestión innegociable y una discusión sin sentido y ya superada.
Eso lo único que hace es poner de manifiesto errores que ya están en su código.

Veamos por partes.

Html:
No hay cabeza, o head. Debe abrir y cerrar el <head></head> y ahí colocar los estilos. Entre otras cosas.

Css:
Define para |.total| una altura del 100%. Pero no hay valor en sus ancestros para calcular dicho porcentaje. Así que el 100% de 0 es cero, y la altura de los elementos a los que aplica la clase |.total| es la que sus contenidos le obligan a crecer.

Solucción:
html:
Póngale cabeza (head) a su documento.
css:
Use un reset css (no preguntar, que tenemos google).
Añada a sus estilos algo como:

Código CSS:

Ver originalhtml, body {
  height: 100%;
}

Mikeliu · #13 (**permalink**) 29/03/2011, 15:48

Lo de la inclusión head es algo trivial en muchos navegadores: Se entiende como algo implícito.

Al final, todo el problema estaba en la altura de la etiqueta global HTML. Poniéndola al 100%, como tú indicas, funciona bien.

Gracias.

jomaruro · #14 (**permalink**) 03/04/2011, 02:35

Hola:

Cita:

Iniciado por Mikeliu

Lo de la inclusión head es algo trivial en muchos navegadores

Me mataste.

Se me ocurre pensar en una autopista, los carriles en un sentido y en otro están diferenciados, sin embargo siempre hay alguno que "se equivoca" y circula por el que no es.

Saludos.

Mikeliu · #15 (**permalink**) 03/04/2011, 12:57

Cita:

Iniciado por jomaruro

Hola:

Me mataste.

Se me ocurre pensar en una autopista, los carriles en un sentido y en otro están diferenciados, sin embargo siempre hay alguno que "se equivoca" y circula por el que no es.

Saludos.

En vez de utilizar una alegoría que no lleva a ningún lado, te agradecería que objetivamente expusieras el porqué de tu comentario.

Y reitero en lo dicho: Hay muchas etiquetas (entre ellas head, body, html...) que para muchos navegadores no son obligatorias. En la mayoría de casos, su aparición no es ni mucho menos trascendental en la comprensión del documento HTML.

kseso? · #16 (**permalink**) 03/04/2011, 13:51

Cita:

Iniciado por Mikeliu

Lo de la inclusión head es algo trivial en muchos navegadores: Se entiende como algo implícito.

Cita:

Iniciado por Mikeliu

Y reitero en lo dicho: Hay muchas etiquetas (entre ellas head, body, html...) que para muchos navegadores no son obligatorias. En la mayoría de casos, su aparición no es ni mucho menos trascendental en la comprensión del documento HTML.

¿Podría por favor documentar sus afirmaciones, preferentemente con algún enlace a páginas de algún organismo oficial de (x)html (cualquier versión) que sustenten y argumenten sus palabras?
Gracias.

conexion · #17 (**permalink**) 03/04/2011, 14:13

Mikeliu, lo que dices es el mayor disparate que he escuchado en los últimos meses-años.

Es necesario que te des un paseo por el html, css... etc. ¡Es por tu bien!

Saludos

jomaruro · #18 (**permalink**) 03/04/2011, 16:39

Hola:

Cita:

Iniciado por Mikeliu

En vez de utilizar una alegoría que no lleva a ningún lado, te agradecería que objetivamente expusieras el porqué de tu comentario.

Visto que no soy el único al que se ha sorprendido, creo que deberías argumentar tú el porque te tu afirmación.

Por mi parte sólo indicarte que pruebes a validar, según los estándares, cualquier ejemplo tuyo sin el <head> o alguna de las etiquetas que dices que no son necesarias y ya verás lo que pasa.

Saludos.

Mikeliu · #19 (**permalink**) 03/04/2011, 16:48

No hace falta recurrir a ninguna fuente para demostrar eso. Además, yo no he puesto en ningún momento que estas etiquetas sean consideradas "no obligatorias" por la W3C. Lo que he dado a entender, simplemente, es que éstos son tags que pueden ser prescindibles en un documento HTML con tal de que los navegadores las visualicen correctamente. No sé dónde le veis el "disparate".

¿Demostración? Más sencillo imposible:

Código:

<title>T&iacute;tulo de la p&aacute;g.</title>
<p>Ejemplo de p&aacute;rrafo.</p>

Meted este código fuente en un archivo HTML, abridlo en un navegador cualquiera (Firefox, Explorer, Chrome, Safari, Opera...) y lo comprobaréis.

Una cosa es lo que se dice en la teoría y otra bien diferente la práctica.

kseso? · #20 (**permalink**) 04/04/2011, 06:25

Pues nada, nada. Si le gusta jugar a la ruleta rusa con sus páginas, adelante.
Sólo espero que nadie acepte como ciertas y veraces sus afirmaciones.

Lo siguiente sólo para terceros que pueden quedarse con dudas y arriesgarse a dar algún crédito a semejantes divagaciones:
Busquen información sobre las dos formas en que los navegadores pueden interpretar un documento (x)html: estándar o chapuza (quirks).

Y como las afirmaciones hay que documentarlas, aquí un ejemplo simple:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>x</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* {margin:0; padding:0; position: relative;}
html, body {
  height: 100%;
  font-family: garamond, serif;
  background-color: #D0D0D0;
}
#centro {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background: #e4e4e4;
}
p {
  white-space: pre;
}
</style>
</head>
<body>
    <div id="centro">
    <p>Lorem ipsum dolor sit amet consectetuer sed accumsan vitae ut quis. Vel libero et interdum Maecenas leo tortor vestibulum Fusce nibh vel. </p>
    </div>
</body>
</html>

Prueben, prueben sin miedo a quitarle el encabezado y ver qué ocurre. Especialmente en los ie.

kseso? · #21 (**permalink**) 04/04/2011, 15:08

Hay serendipias de lo más afortunadas.

Mikeliu, ¿conoce a Eric Meyer?
Tomado de su twitter hoy, hace poco más de dos horas:
http://bit.ly/hdK1LV Exposición un problema detectado en Opera (última versión estable)
http://bit.ly/gFQiRK qué casualidad, lo provoca el hecho de que no sea el doctype la primera línea del documento, o lo que es lo mismo, ausencia del mismo donde debería estar.

Casualmente el malfuncionamiento involucra a la misma propiedad que utilicé en mi ejemplo anterior (overflow) aunque no sea el mismo.

jomaruro · #22 (**permalink**) 05/04/2011, 13:11

Hola:

Cita:

Iniciado por Mikeliu

Lo que he dado a entender, simplemente, es que éstos son tags que pueden ser prescindibles en un documento HTML con tal de que los navegadores las visualicen correctamente. No sé dónde le veis el "disparate".

¿Y no te parece razón suficiente para incluirlas en tu código? A mi sí.

Saludos.

Mikeliu · #23 (**permalink**) 28/04/2011, 16:06

Cita:

Iniciado por kseso?

Prueben, prueben sin miedo a quitarle el encabezado y ver qué ocurre. Especialmente en los ie.

IE. Casualmente el navegador que menos sigue los estándares...

ZoroRoronoa · #24 (**permalink**) 28/04/2011, 16:17

Cita:

Iniciado por Mikeliu

IE. Casualmente el navegador que menos sigue los estándares...

Al no seguir los estandares IE, si maquetas un sitio apegado a estos y sin error, IE aun lo visualiza mal.

Ahora imaginate un sitio que no se apegue a los estandares y tenga errores, IE lo hara pedazos

Y sea como sea... Ando pensando que si chavales que quieren aprender pasan por aqui, os haras un lio con tantas dispersas e ideologias erroneas.

Si quieres hacerlo asi, pues adelante tu, pero no vengas con esas cosas aqui. Guardatelas.-

kseso? · #25 (**permalink**) 28/04/2011, 18:15

Cita:

Iniciado por Mikeliu

IE. Casualmente el navegador que menos sigue los estándares...

Viendo el tiempo de silencio y la calidad de la respuesta que ofrece al final después de la falacia que soltó, dudo mucho que merezca la pena participar en sus temas en el futuro.

Casi estoy seguro al 100% que ni se ha tomado la molestia en ejecutar el código de ejemplo facilitado.

Mikeliu · #26 (**permalink**) 01/05/2011, 09:43

Se le quitan las ganas a uno de comentar en vuestro foro si lo único que hacéis prácticamente es criticar desmesuradamente y tergivesar lo dicho. Lo de contestar para resolver problemas reales parece que se ha perdido aquí.

Volveré a escribir la supuesta "falacia" (como kseso? dice) por si vuestros cerebros todavía no han asimilado correctamente las palabras o desconocéis aún el uso del castellano:

Cita:

Iniciado por Mikeliu

Lo de la inclusión head es algo trivial en muchos navegadores: Se entiende como algo implícito.

Dicho en otras palabras: Hay bastantes navegadores web (entre ellos: Firefox, Explorer, Chrome, Opera, Safari... vamos, prácticamente los usados) que dan por sobrentendido y automáticamente sitúan la etiqueta head (y otras) aunque explícitamente en el código fuente no se incluya.

Estaba hablando del funcionamiento real que tienen los exploradores. Otra cosa es que el estándar cuente otra historia y diga que el tag deba aparecer siempre. Cosa que no he negado EN NINGÚN MOMENTO.

Ciertamente me recordáis a ciertos periodistas de la prensa sensacionalista.

Por cierto, yo soy de los que desarrollan webs sin tener en cuenta las desastrosas versiones de Explorer, por mucha cuota de mercado que tengan. Hala, venga, ya podéis divertiros y empezar a despotricar sin sentido.