Maldito <!DOCTYPE

ferent · #1 (**permalink**) 30/12/2003, 11:17

Hola a todos;

Resulta que estaba haciendo algo tan sencillo como una tabla de 100% de ancho por 100% de alto, en la que en su interior hubiera otra tabla de 760x420, centrada horizontal y verticalmente. Pero curiosamente nunca aparecía centrada verticalmente sino que se subía arriba, pasando ampliamente de mi 100% de alto. Dándole mil vueltas he descubierto que el error estaba en que antes nunca ponía la etiqueta en la cabecera: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
y ahora sí que estaba.

¿Me podrían decir para qué sirve esto, por qué demonios no me respeta el valor 100% sino que pasa al mínimo posible (0%), y si pasa algo si la quito de mi código HTML?

Gracias

jamesxv7 · #2 (**permalink**) 30/12/2003, 12:31

Saludos:

DOCTYPE se refiere al Document Type Declaration. Esto declara sobre cual version HTML estará el documento. Para crear un documento en HTML podemos utilizar cualquiera de estos 3 DTD:

HTML 4.01 Strict DTD - su declaración es la siguiente:

Código:

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

Esta versión se enfatiza más en la estructura del documento que en la presentación. Esta definición no da soporte a frames ni a los elemente que ya estan obsoletos como por ejemplo <b>, <center>, etc.

HTML 4.01 Transitional DTD - su declaración es la siguiente:

Código:

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

Esta definición es la mas aceptada por los desarrolladores ya que provee de todos lo elementos que se encuentra en el HTML 4.01 Strict DTD . Además nos ayuda a desarollar documentos con una mejor presentación visual.

HTML 4.01 Frameset DTD - su declaración es la siguiente:

Código:

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

Esta es igual a HTML 4.01 Transitional DTD más provee soporte para frames.

Estos son estandares desarrollados por la W3.ORG. Si no los utilizas es posible que los futuros navegadores y programas no despleguen tu webpage correctamente ya que la tendencia es a que estos estandares tengan mas aceptación entre los desarrolladores del web.

ferent · #3 (**permalink**) 30/12/2003, 13:24

Y podrías decirme cómo solucionar mi problema con las tablas, por si acaso te pongo el sencillo código:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="760" height="420" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>

Pero como digo, no hace caso del 100% del height.

Por otro lado, he visto que pone "Transitional//EN", esto supongo que significa Ingles. ¿Se puede poner ES?, ¿para que sirve?

De nuevo gracias

jamesxv7 · #4 (**permalink**) 30/12/2003, 15:56

Hasta ahora te puedo decir que las siglas EN indica que el ingles es idioma normativo para la estructuras del DTD.

gustavoang · #5 (**permalink**) 31/12/2003, 00:17

En realidad no existen 3 DTD para el HTML, si no me equivoco son 8:

Cita:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Si cumple con la especificación HTML v2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Si cumple con la especificación 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://w3.org/TR/REC-html40/loosed.dtd">
Si cumple con el 4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://w3.org/TR/REC-html40/strict.dtd">
Si cumple con el estándar 4.0 y no tiene etiquetas desaconsejadas por el W3C.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://w3.org/TR/REC-html40/frameset.dtd">
Si usas marcos, esta DTD se la colocas si el "marco padre" cumple con el estándar 4.0 para los marcos

Los otros tres son los que nombró jamesxv7.

---------------------------------------------

En cuanto a tu problema con la tabla es que la 2º tabla tiene una altura mayor a la que puede mostrar el documento simultaneamente... prueba con esta modificación que le hice a tu código:

Código:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td 
align="center" 
valign="center">
<table 
width="750" 
height="300" 
border="0" 
align="center" 
cellpadding="0" 
cellspacing="0" 
style="background-color: #00FF00">
<tr>
<td></td>
</tr>
</table></td>
</tr>
</table>

El atributo "style" que agregué no es necesario... sólo lo coloqué para que
apreciaras mejor la diferencia.

-------------------------------------------------------

Y en cuanto a tu última pregunta:

Si lo que deseas es especificar que tu documento está en español, sería así

Código:

<html lang="es">
<head>
<title>Documento en espa&ntilde;ol</title>
</head>
<body>
<p>Este documento lo escri&iacute; en mi idioma.</p>

<p lang="en">But now, I have changed 
for a while the language... what do you think about?</p>

<p>Ya que volv&iacute; a escribir en espe&ntilde;ol, no hace falta que
 vuelva a declarar el idioma porque especifiqu&eacute; que el documento 
iba a estar en este idioma... y cuando quise cambiar de idioma, 
lo anunci&eacute;</p>

</body>
</html>

Saludos y espero que te sirva.

Gustavo Narea.

jamesxv7 · #6 (**permalink**) 31/12/2003, 00:23

A peticion de gustavoang, no so ni 3 ni 8, son mas de 15 DTD diferentes, yo solo mecione las mas usadas.

Para verlas toda visita este link

Ahora si vale la pena recalcar el titulo de este mensaje... Maldito DOCTYPE!

ferent · #7 (**permalink**) 31/12/2003, 03:21

Lo siento gustavoang, pero tu solución no me sirve, lo que quiero no es cambiar el color de la tabla con un estilo, sino hacer que siempre se encuentre en el centro verticalmente como en http://www.cocacola.es/. Con tu modificación sigue viendose arriba.

¿Alguna otra ayuda?

SEO-Master · #8 (**permalink**) 31/12/2003, 05:35

Que yo sepa, el height para una tabla es algo que se sacó de la manga Micro$oft, como tantas otras cosas, y el W3 ni lo reconoce. Al menos, a mí no me validaba páginas con eso.

ferent · #9 (**permalink**) 31/12/2003, 05:37

¿Osea que debo entender que ya no se van a poder páginas con una tabla centrada verticalente? Lo siento pero no lo puedo creer. ESTAMOS AVANZANDO HACIA ATRÁS

KarlanKas · #10 (**permalink**) 31/12/2003, 05:53

Tal vez no haga falta usar tablas. Date cuenta de que las tablas están llamadas a desaparecer, sustituidas por los DIV's. Si quieres centrarla, creo que hubo hace poco por aquí alguien que aportó una solución bastante interesante. sería así:

Código PHP:

  <html>

<head>

    <title>Tabla</title>

    <style>

    table{

        position:absolute;

        left:50%;

        top:50%;

        margin-left:-390px;

        margin-top:-210px;

        width:780px;

        height:420px;

        border:solid 1px silver;

        font:normal 10px/10px verdana;

        text-align:center;" }

    </style>

</head>

 
<body>

<table>

<tr>

    <td>Esto lo podrías hacer también con un DIV</td>

</tr>

</table>

 
 
 
</body>

</html>

ferent · #11 (**permalink**) 31/12/2003, 06:23

Vale, tomo nota, pero ya para terminar, cómo haría esto mismo con un DIV?, un DIV no lo puedo dividir en columnas ni filas, por lo cual no ofrece las posibilidades de una tabla.

¿Sabes de alguna página que esté realizada con este formato?

Gracias por todo

KarlanKas · #12 (**permalink**) 31/12/2003, 06:42

Puedes poner varios DIV's consecutivos y hacen el mismo efecto con la ventaja de que si alguna vez quieres cambiar la disposición de tu página te será mucho mas sencillo, ya que las tables son monolíticas...

Para ver ejemplos mira aquí.

Gerald · #13 (**permalink**) 31/12/2003, 15:54

o mejor ve el codigo de www.monolinea.com

Kamie es una campeona

gustavoang · #14 (**permalink**) 02/01/2004, 01:41

Cita:

A peticion de gustavoang, no so ni 3 ni 8, son mas de 15 DTD diferentes, yo solo mecione las mas usadas.

jamesxv7, tienes razón en que son más de 15, pero fíjate que yo me refería sólo a los de html.

Saludos.

Gustavo

gustavoang · #15 (**permalink**) 02/01/2004, 01:50

Cita:

Lo siento gustavoang, pero tu solución no me sirve, lo que quiero no es cambiar el color de la tabla con un estilo, sino hacer que siempre se encuentre en el centro verticalmente como en http://www.cocacola.es/. Con tu modificación sigue viendose arriba.

Disculpa la verdad me supuse que funcionaría, pero ya veo que tienes razón... y recuerda que dije que lo del color sólo lo coloqué para que vieras mejor la diferencia, no porque fuera necesario.

Lo otro que se me ocurre es hacer un pequeño truco:

Crea una imagen transparente con 1px de alto y con 1px de ancho... Luego haces esto:

Código:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="tu_imagen_transparente.gif" height=300></td>
</tr>
<tr>
<td align="center" valign="center">
    <table width="750" border="0" 
align="center" cellpadding="0" cellspacing="0" 

style="background-color: #00FF00">
    <tr>
    <td></td>
    </tr>
    </table>
</td>
</tr>
</table>

Al igual que mi mensaje anterior: el atributo style no es necesario... lo que hice fue cambiarle el color de fondo a la tabla para que se notaran mejor las diferencias... pero si vas a usar ese código debes quitar ese atributo.

Lo que propongo es una posible solución... aunque veo más "elegante" lo que han propuesto los demás.

Saludos.

Gustavo Narea.

KarlanKas · #16 (**permalink**) 02/01/2004, 05:52

Perdonad a los que os he editado el mensaje. Lo único que he hecho es añadir saltos de carro ya que si no la tabla se descoloca y hace muy dificil el que se puedan leer los mensajes.

Procurad hacer saltos de linea donde no sea necesario conservar la línea (como en JS), es decir, cuando escribais HTML puro y duro haced saltos de linea después de cada etiqueta o entre medias si tienen mucho contenido. Todos saldremos beneficiados.

Muchas gracias y feliz año!

ferent · #17 (**permalink**) 02/01/2004, 06:19

Se agradece Karlankas, además por mi parte recomiendo que cuando se envíe una respuesta o un nuevo tema, siempre se revise el resultado del mismo, para que si queda la página desproporcionada se edite para facilitarnos la labor de lectura a todos, (y de paso le quitamos algo de trabajo a los moderadores

)

Por cierto y siguiendo con el tema de las tablas y el DOCTYPE, me he fijado que al hacer una búsqueda en este foro, al igual que en muchos otros puntos, aparece un mensaje que indica que se está procesando los datos, Y APARECE CENTRADO EN LA PÁGINA.
El código en el lado del servidor es el siguiente (pongo "loquesea" en datos sin importancia):

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head><title>Foros del Web</title>

<meta http-equiv="Refresh" content="1"; URL=loquesea>

<script language="Javascript">

loquesea

</script>

<style type="text/css">

SELECT {

    FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;

    FONT-SIZE: 11px;

    COLOR: #000000;

    BACKGROUND-COLOR: #E2EDF7

}

TEXTAREA, .bginput {

    FONT-SIZE: 12px;

    FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;

    COLOR: #000000;

    BACKGROUND-COLOR: #E2EDF7

}

A:link, A:active {

    COLOR: #000000;

}

A:visited, {

COLOR: navy;

}

A:hover {

    COLOR: #006666;

}

#cat A:link, #cat A:visited, #cat A:active {

    COLOR: #133140;

    TEXT-DECORATION: none;

}

#cat A:hover {

    COLOR: #133140;

    TEXT-DECORATION: underline;

}

#ltlink A:link, #ltlink A:visited, #ltlink A:active {

    COLOR: #000000;

    TEXT-DECORATION: none;

}

#ltlink A:hover {

    COLOR: #006666;

    TEXT-DECORATION: underline;

}

.thtcolor {

    COLOR: #133140;

}

</style>

<script language="javascript" type="text/javascript">

<!--

function aimwindow(aimid) {

window.open("member.php?action=aimmessage&aim="+aimid,"_blank",

"toolbar=no,location=no,menubar=no,scrollbars=no,

width=175,height=275,resizeable=yes,status=no")

}

// -->

</script>

 
 
 

</head>

<body bgcolor="#E4E4E4" 

text="#000000" 

id="all" 

leftmargin="10" 

topmargin="10" 

marginwidth="10" 

marginheight="10" 

link="#000020" vlink="#000020" 

alink="#000020">

<br><br>

 
<table width="100%" 

border="0" cellspacing="0" 

cellpadding="0" height="95%" 

align="center">

<tr align="center" valign="middle">

    <td>

    <table 

border="0" cellspacing="1" 

cellpadding="10" 

bgcolor="#024280" 

width="70%">

    <tr>

        <td bgcolor="#FFFFFF" align="center">

        <p>loquesea

        </p></td>

    </tr>

    </table>

    </td>

</tr>

</table>

 
</body>

</html>

Y el caso es que lo pongo igual en una página mía y no funciona, se me sube para arriba. Increiblemente curioso!!!

lantrax · #18 (**permalink**) 03/01/2004, 09:46

Bueno, debo indicar que a mi me sale la tablita centrada en condiciones. Totalmente independiente del !DOCTYPE

El

<meta http-equiv="Refresh" content="1"; URL=loquesea>

supongo que es lo que hace que todo el rato parezca descargando

para más señas lo he visionado bajo IE6 y NS7

puede ser problema de version de navegador????

Saludos

arthpix · #19 (**permalink**) 04/01/2004, 00:31

Saludos a todos en el foro y feliz año 2004.

Muy interesante todo lo que se ha mencionado respecto a la pregunta original de este panel, pero se olvidaron de algo muy obvio: analizar la página de cocacola... o qué ya se olvidaron que internet explorer tiene la función ver código fuente??????

me permití copiar el código fuente de dicha página para analizar.

<HTML>
<HEAD>
<title>El movimiento Coca-Cola. Juegos chats chatear
futbol playstation comunidad foros viajes sorteos emparejados
tunnel of love chat y mucho mas gratis</title>
<frameset cols="*,750,*" frameborder="NO" border="0" framespacing="0">
<frame name="null" scrolling="NO" noresize src="bg.html">
<frameset rows="*,427,*" frameborder="NO" border="0" framespacing="0">
<frame name="null" scrolling="NO" noresize src="bg.html">
<frame name="center" scrolling="NO" noresize src="estructuratea.html">
<frame name="null" scrolling="NO" noresize src="bgcopy.html">
</frameset>
<frame name="null" scrolling="NO" noresize src="bg.html">
</frameset>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

</HEAD>
<BODY>
</BODY>
</HTML>

MUY SENCILLO ¿NO?

Se trata de una página con dos framesets anidados en los que solamente se especifican las dimensiones de los frames centrales...

No css, no divs, no nada, lo que ocurre con dicha página de coca cola es que cuando se indica un solo valor (por ejemplo frameset rows="*,750,*") el navegador fija el valor especificado del frame correspondiente y el excedente del área de visualización lo divide a partes iguales para los otros frames existentes en el set.

Esto es válido para sets verticales y horizontales.

Algo que veo en este foro es que quien tiene alguna duda casi siempre tiene alguna página de ejemplo. Por qué no mas bien analizar las páginas de ejemplo de los que pregunten para explicarnos entre todos las partes que no comprendamos del código?

Que la pasen bonito!!

ferent · #20 (**permalink**) 04/01/2004, 11:45

Cita:

Algo que veo en este foro es que quien tiene alguna duda casi siempre tiene alguna página de ejemplo. Por qué no mas bien analizar las páginas de ejemplo de los que pregunten para explicarnos entre todos las partes que no comprendamos del código?

Estoy de acuerdo contigo, lo único es que no cuento con una página de ejemplo, ya que es un error general y por ello les puse el código del mismo, que es el que uso yo.

Respecto a lo de Cocacola, no me fijé que usara frames, cosa que no me vale para mí ya que limita mucho el espacio a usar, ya que si por ejemplo tengo un punto en el que es, por ejemplo, nuestra historia, o un foro en PHP, la página devería auto-extenderse hacia abajo, como es normalmente usado, y creo que para un foro, el uso de IFRAMES sería algo incómodo para los usuarios.

Así todo, es buena idea el uso de marcos de este modo.
Gracias por la aportación.

Por otro lado, me he estado fijando y creo que la tendencia está cambiando en internet: un amplio número de sedes importantes alinean las páginas arriba centradas o arriba a la izquierda. nunca en el centro absoluto de la página. No se si será por esta directiva o simplemente por estética.
¿Ustedes creen que se ve más bonita la web de Cocacola (siguiendo con el ejemplo), que una alineada en la parte superior como puede ser la de HP: http://www.hp.com/

arthpix · #21 (**permalink**) 04/01/2004, 17:34

Ok. entiendo tu necesidad amigo, efectivamente los frames resuelven el alineado vertical de la página pero te limitan...

Probaremos por alguna otra solución, yo tengo un librito de un español por cierto de apellido Langoria, voy a ver si ahí encuentro algo... saludos.

gustavoang · #22 (**permalink**) 04/01/2004, 18:07

Buen punto arthpix!... Realmente se nos olvidó ver ese código fuente.

Y en cuanto al último punto de ferent, no creo que sea una "tendencia" como tal, sino el estilo o el gusto del diseñador web.

Saludos.

Gustavo Narea.

arthpix · #23 (**permalink**) 04/01/2004, 18:49

Claro amigo, no es una tendencia como tal, mas bien que como diseñadores interactuamos con un "inconsciente colectivo". Es parte de nuestro "feeling" de diseñador, lo que hacemos, sin dejar de ser creativo, se adapta a los tiempos y gustos de ese ente colectivo llamado publico.

Saludos

gustavoang · #24 (**permalink**) 04/01/2004, 19:16

Cierto arthpix.

De hecho, yo creo que a lo que si se le podría llamar "tendencia" era a... ya hace tiempo... esa "moda" de usar webs con frames.

Ahora se usan todavía, pero es más que todo por necesidad en algunas situaciones... rara vez es por simple capricho del diseñador web.

Saludos!

Gustavo Narea.

lantrax · #25 (**permalink**) 04/01/2004, 20:00

PUes si, son todo tendencias de diseño.

Pero... retomando un poco el tema de los !DOCTYPE,.... habeis probado a validaar el códgo de cocacola con el validador de html de www.w3.org ??
De buenas a primeras, no tiene el !DOCTYPE,
de segundas, coges el código le pones el !DOCTYPE (el concreto para Frameset, porque el Transitional no admite frames.... y no lo valida ni de coña.

Hay que poner algún typo especial de !DOCTYPE en este tipo de páginas con frames????? alguien sabe???

Un saludo

arthpix · #26 (**permalink**) 04/01/2004, 20:49

Ya alguien lo mencionó antes:

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

Tal como lo especifica w3c:
AQUI

Respecto a la alineación de tablas... encontré el error, ferent!!!!

ahi mismo en w3.org dice:

11.3.2 Horizontal and vertical alignment
The following attributes may be set for different table elements (see their definitions).


<!ENTITY % cellhalign
"align (left|center|right|justify|char) #IMPLIED
char %Character; #IMPLIED -- alignment char, e.g. char=':' --
charoff %Length; #IMPLIED -- offset for alignment char --"
>

<!ENTITY % cellvalign
"valign (top|middle|bottom|baseline) #IMPLIED">

eso está aquí

el error en tu código amigo ferent es que tienes escrito

valign="center" y debe ser

valign="middle"

a veces los errores más obvios son los más difíciles de encontrar.

tan pocas veces utilizamos el valign????

Saludos a todos!!

lantrax · #27 (**permalink**) 04/01/2004, 21:32

Cita:

Mensaje Original por arthpix
[B]Ya alguien lo mencionó antes:

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

Si, se dijo
pero lo anecdótico es q aún indicando el !DOCTYPE para Frameset, los parámetos del <FRAMESET> no los da como validos.

o están en desuso o alguna historia rara.

A ver si encuentro algo al respecto y ya os contaré..

Saludos

jamesxv7 · #28 (**permalink**) 05/01/2004, 00:21

Para todos aquellos que se preguntan como centralizar un DIV usando CSS, he aquí una manera fácil de hacerlo:

Código:

<body style="margin:0px; padding:0px;">
<div style="background-color:#39C; width:90%; left:5%; right:5%; margin:10% -5% 0% 5%; height:110px;"></div>
</body>

Lo he probado en IE6 y Mozilla Firebird y trabaja de lo mas bien. Si tienes IE5.5 pruebalo y deja un mensaje.

Espero haberlos ayudado

ferent · #29 (**permalink**) 05/01/2004, 03:36

Cita:

Pero como digo, no hace caso del 100% del height.

Hola arthpix, gracias por tu colaboración pero si como ves desde el principio de este tema, el problema no estaba en la alineación, sino en el valor 100% que le damos al height, ya que no lo entiende y se comprime hasta el mínimo posible, osease, hasta el contenido, por lo cual la tabla que debería en posición absoluta centrada verticalmente se sube hasta el top de la web.

Chicos, creo que no hay manera, lo he intentado por activa o por pasiva... Tendremos que arrodillarnos ante la dictadura del !DOCTIPE y asumir que ya no gozamos de la libertad con la que contábamos hasta hace un tiempo...

PascalC · #30 (**permalink**) 05/01/2004, 06:22

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

<html>
<head>
<title>Nouveau</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style type="text/css">

</style>

</head>
<body>
<table summary="">
<tr>
<td>toto</td>
</tr>
</table>
</body>
</html>