Foros del Web » Creando para Internet » CSS »

Doctype y tablas con divs

Estas en el tema de Doctype y tablas con divs en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/03/2011, 09:48
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 11 meses
Puntos: 0
Pregunta Doctype y tablas con divs

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?
  #2 (permalink)  
Antiguo 17/03/2011, 01:40
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Doctype y tablas con divs

buenas...

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

__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 17/03/2011, 02:01
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: Doctype y tablas con divs

Creo que mas de un error ed doctype, es un error de CSS tuyo.
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
  #4 (permalink)  
Antiguo 17/03/2011, 06:09
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Doctype y tablas con divs

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.
  #5 (permalink)  
Antiguo 17/03/2011, 06:26
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: Doctype y tablas con divs

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">
  #6 (permalink)  
Antiguo 17/03/2011, 07:38
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Doctype y tablas con divs

Con tu Doctype me hace lo mismo.
  #7 (permalink)  
Antiguo 24/03/2011, 17:23
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Doctype y tablas con divs

Esperaba que alguien me ayudara aquí...
  #8 (permalink)  
Antiguo 24/03/2011, 17:38
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Doctype y tablas con divs

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.

__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #9 (permalink)  
Antiguo 29/03/2011, 07:14
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 11 meses
Puntos: 0
Pregunta Respuesta: Doctype y tablas con divs

Cita:
Iniciado por zerokilled Ver Mensaje
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?
  #10 (permalink)  
Antiguo 29/03/2011, 08:26
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Doctype y tablas con divs

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.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #11 (permalink)  
Antiguo 29/03/2011, 12:03
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Doctype y tablas con divs

Ok, gracias.
  #12 (permalink)  
Antiguo 29/03/2011, 13:19
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Doctype y tablas con divs

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 original
  1. html, body {
  2.   height: 100%;
  3. }
  #13 (permalink)  
Antiguo 29/03/2011, 16:48
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Doctype y tablas con divs

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.
  #14 (permalink)  
Antiguo 03/04/2011, 03:35
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Doctype y tablas con divs

Hola:

Cita:
Iniciado por Mikeliu Ver Mensaje
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.

  #15 (permalink)  
Antiguo 03/04/2011, 13:57
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 11 meses
Puntos: 0
Desacuerdo Respuesta: Doctype y tablas con divs

Cita:
Iniciado por jomaruro Ver Mensaje
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.
  #16 (permalink)  
Antiguo 03/04/2011, 14:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Doctype y tablas con divs

Cita:
Iniciado por Mikeliu Ver Mensaje
Lo de la inclusión head es algo trivial en muchos navegadores: Se entiende como algo implícito.
Cita:
Iniciado por Mikeliu Ver Mensaje
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.
  #17 (permalink)  
Antiguo 03/04/2011, 15:13
 
Fecha de Ingreso: febrero-2011
Mensajes: 54
Antigüedad: 6 años, 9 meses
Puntos: 13
Respuesta: Doctype y tablas con divs

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
  #18 (permalink)  
Antiguo 03/04/2011, 17:39
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Doctype y tablas con divs

Hola:

Cita:
Iniciado por Mikeliu Ver Mensaje
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.

  #19 (permalink)  
Antiguo 03/04/2011, 17:48
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Doctype y tablas con divs

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.
  #20 (permalink)  
Antiguo 04/04/2011, 07:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Doctype y tablas con divs

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  4. <style type="text/css">
  5. * {margin:0; padding:0; position: relative;}
  6. html, body {
  7.   height: 100%;
  8.   font-family: garamond, serif;
  9.   background-color: #D0D0D0;
  10. }
  11. #centro {
  12.   margin: 0 auto;
  13.   width: 300px;
  14.   height: 300px;
  15.   background: #e4e4e4;
  16. }
  17. p {
  18.   white-space: pre;
  19. }
  20. </head>
  21.     <div id="centro">
  22.     <p>Lorem ipsum dolor sit amet consectetuer sed accumsan vitae ut quis. Vel libero et interdum Maecenas leo tortor vestibulum Fusce nibh vel. </p>
  23.     </div>
  24. </body>
  25. </html>

Prueben, prueben sin miedo a quitarle el encabezado y ver qué ocurre. Especialmente en los ie.
  #21 (permalink)  
Antiguo 04/04/2011, 16:08
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Doctype y tablas con divs

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.
  #22 (permalink)  
Antiguo 05/04/2011, 14:11
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Doctype y tablas con divs

Hola:

Cita:
Iniciado por Mikeliu Ver Mensaje
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.

  #23 (permalink)  
Antiguo 28/04/2011, 17:06
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 11 meses
Puntos: 0
Desacuerdo Respuesta: Doctype y tablas con divs

Cita:
Iniciado por kseso? Ver Mensaje
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...
  #24 (permalink)  
Antiguo 28/04/2011, 17:17
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 8 meses
Puntos: 116
Respuesta: Doctype y tablas con divs

Cita:
Iniciado por Mikeliu Ver Mensaje
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.-
__________________
Programador jQuery & PHP
  #25 (permalink)  
Antiguo 28/04/2011, 19:15
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Doctype y tablas con divs

Cita:
Iniciado por Mikeliu Ver Mensaje
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.
  #26 (permalink)  
Antiguo 01/05/2011, 10:43
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Doctype y tablas con divs

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 Ver Mensaje
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.

Etiquetas: doctype, html, tablas
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 09:19.