Foro

Buenas noches.

En la academia militar en la que estudio informática acabamos de empezar con la asignatura de HTML y estoy aprovechando la coyuntura para desechar las tablas de mi rudimentaria web y sustituirlas por divs anidados.

El caso es que me ha surgido una divergencia entre lo que yo entiendo que debiera ocurrir y lo que realmente ocurre con este código:

<style type="text/css">
body {text-align: justify; font-family:Georgia,serif; font-size: 15px; color: rgb(0, 0, 0); background-color: rgb(204, 204, 204);}
h1 {text-align: center; color: rgb(0, 102, 0);}
h2 {text-align: justify; color: rgb(0, 102, 0);}
h3 {text-align: justify; color: rgb(0, 102, 0);}
.tabla {display: table;}
.fila {display: table-row;}
.celda {display: table-cell; vertical-align: middle;}
.celdaborde {display: table-cell; vertical-align: middle; text-align: center; border: 1px solid rgb(50, 50, 50);}
</style>

<div class="table" style="width: 266px; text-align: left; margin-left: auto; margin-right: auto;">
    <div class="fila">
        <div class="celda"><a href="dragon-2"><img style="width: 33px; height: 33px;" src="Botones/Flecha_izquierda.gif" alt="Ir a la página anterior"></a>
        </div>
        <div class="celda"><a href="Fotos/Dragon-3"><img style="width: 180px; height: 234px; padding: 10px;" src="Fotos/Thumb_Dragon-3.jpg" alt="Minerva (15 de abril de 2003)"</a>
        </div>
        <div class="celda"><a href="dragon-4"><img style="width: 33px; height: 33px;" src="Botones/Flecha_derecha.gif" alt="Ir a la página siguiente"></a>
        </div>
    </div>
</div>

Se trata de una pseudotabla en la que hay tres celdas alineadas (una foto en la central y dos pequeños iconos en las laterales). Si no me equivoco el contenedor debiera medir verticalmente lo siguiente: 234 (altura de la foto central) + 10 + 10 (padding foto central) = 254px (los iconos laterales solo miden 33x33px). Pero el caso es que cuando lo pruebo en Firefox (última versión) y le doy a inspeccionar elemento me dice que el contenedor mide 266 de ancho por 257 de alto.

El ancho parece ser correcto pero... ¿De donde salen esos 3 Px verticales de más?

Aparte de que leer el código da grima (cambiar de tablas a div no se hace asi)

Es mucho mejor que no pongas los atributos inline y los incluyas todos en el css, incluyendo ancho y alto, facilitara la lectura una barbaridad, asimismo, el css en un archivo separado.

Lo primero que veo es que en el css pones tabla y en el div pones table.

En cuanto a los pixeles de mas puede ser marging o padding de las mismas imagenes o de los divs, si no los especificas se ponen por defecto, dices que pasa solo en firefox de modo que puede ser eso

Aún así el encajonamiento vertical es un dolor de cabeza actualmente, los navegadores hacen lo que quieren o no hacen caso al atributo (realmente no deben hacerle caso pero bueno)

En general, te recomiendo que vayas con las preguntas técnicas a stack overflow. Posiblemente encontrarás mucha más ayuda :)

en el css pones tabla y en el div pones table.

Efectivamente, esa se me había escapado y ya está corregido, no obstante, el cambio parece no afectar en nada al resultado final.

Aparte de que leer el código da grima (cambiar de tablas a div no se hace asi)

Bueno, yo tras leer varias webs especializadas al respecto lo he hecho así y parece que funciona, pero vaya, que si tienes algo que aportar soy todo oidos.

En general, te recomiendo que vayas con las preguntas técnicas a stack overflow. Posiblemente encontrarás mucha más ayuda :)

Lo se, pero prefiero esperar hasta aprender más antes de molestar a los que saben de verdad.

Es como cuando estás en clase todo el año pasando del profesor y de pronto tras prestar 5 minutos de atención decides intervenir para preguntar una duda acerca de algo que se explicó al principio de los tiempos y que es la base de toda la asignatura, me parece impropio de caballeros.

Ya, pero dudo que tu prestigio de internet se vea mermado por tales agravios.

Tu único problema seria que un moderador gilipollas te borrase la pregunta sin dar ninguna explicacion. Si la pregunta es fácil, la gente de alli probablemente estara encantada de responderte porque les dan puntos, y al que escojas como válido le dan más.

Probablemente tengas razón... pero es que me da una pereza darme de alta en sitios nuevos...

Al final estoy haciendo pruebas por mi cuenta, que es la mejor forma de aprender. Además, si se queda así en el fondo da lo mismo, por que no creo que nadie se queje de que el contenedor es 3 píxeles más alto que el continente y a unas malas siempre puedo devolverle el dinero a los robots de Google, que son los únicos que han demostrado algún interés por el contenido de la web.

X-D

Por ahora ya he pasado todas las páginas (menos el index, que espero hacerlo mañana) de tablas a divs y de HTML 4.01 a HTML 5, y los validadores automáticos me han dado el OK con cero errores. No creo que me den el Nóbel de Informática [puñalada trapera ON] pero al menos ya he superado el nivel de estandarización y corrección formal de otras webs con un menor nivel de excelencia académica que la mía propia [puñalada trapera OFF].

Al final estoy haciendo pruebas por mi cuenta, que es la mejor forma de aprender.

Casualmente Sergut y yo teníamos una interesante conversación este fin de semana sobre ello. Y discrepamos ambos. Y entre las alternativas preferibles se incluye, como muy bien te sugería KomandanteKrul, StackOverflow, donde siempre he visto gente con ganas de resolver las dudas.

Por mi parte decirte que en Safari y en Chrome se veía con las dimensiones que buscabas. No tengo Firefox instalado, así que no podía ayudarte. No obstante, ¿has probado a jugar con la propiedad css box-sizing?. En general ayuda a lo relativo al Box Model y sus medidas de dimensiones.

Y, hablando de otra cosa, por suerte, el nivel de excelencia técnica de una web no se mide en "0 errores en validadores automáticos". Entre otras cosas porque (por curiosidad me ha dado por mirar a ver qué errores tenía CU siguiendo tu enlace) hasta la W3C corrige tonterías como 

value of attribute "method" cannot be "POST"; must be one of "get", "post"

Gracias por los enlaces, luego les echaré un vistazo.

Sobre lo de los cero errores, evidentemente se trata de una broma. No creo que tenga mucho sentido comprar una web como la mía que consiste prácticamente en una sucesión de tochos de texto (con alguna imagen intercalada de vez en cuando) con una monstruosidad de web como umbría.

Para los que no tenemos ni puta idea de HTML los validadores automáticos nos vienen muy bien para ir corrigiendo cosas que ni se nos hubiese pasado por la cabeza que estaban mal (aunque luego en el fondo de igual porque los navegadores parece que son capaces de mostrar correctamente cualquier castaña que quieras subir por muchos errores que tenga), pero vaya, que si yo tuviese que meterme a tocar algo del código de una web como umbría lo que haría sería empezar a dar vueltas en círculos agitando las manos y emitiendo sonidos guturales hasta que me echasen de allí.
 

Los errores no son ignorables, pues muchos de ellos los tiene en cuenta Google cuando se trata de posicionar tu página. Las webs castañas aparecerán a partir de la página 280413. Es por ello que el validador de W3C se usa SIEMPRE que quieras hacer una web seria.

A parte de eso, y si no te importa la calidad ni el posicionamiento de tu web, te dan lo mismo xD

Y solo para que conste. El HTML5 consiste en mucho más que cambiar la etiqueta DOCTYPE. Se trata de usar las nuevas etiquetas en tu web (main, aside, section, header, footer, etc.) y el resto de etiquetas de forma que tengan un sentido. Por ejemplo, para una sustituir una tabla yo usaría dl, ul u ol dependiendo de la información que aparezca. Ningún validador te dará errores si no las usas... pero eso no será HTML5.

PD: Y por favor, no uses la etiqueta ni el atributo style. Debería ser pecado :'(

Está claro que la corrección es un elemento fundamental, pero pasar los validadores automáticos no debe ser la única directriz a la hora de crear una web. El validador se debe utilizar, pero no volverse loco por ello (por ejemplo, el error que he puesto yo de haber puesto el "method" en mayúsculas).

El etiquetado debe ser semántico, pero eso no sólo en HTML5, sino siempre. La aportación de HTML5 es multitud de etiquetas nuevas que aportan. 

PD: Y por favor, no uses la etiqueta ni el atributo style. Debería ser pecado :'(

+100, eso y ponerte un sombrero con orejas cada vez que uses !important :D

¿Por qué no hay que usar style?
¿Con qué se puede sustituir?

Con hojas de estilo css.

¿Y crear un #id para cada uno de los objetos que quiera meter?

Si necesitas identificarlos unívocamente es buena idea (eso es, al fin y al cabo, un identificador). Si lo que estás pensando es poner un id a cada elemento para poder darles "estilo" a lo mejor no es una gran idea, define clases css genéricas que representen lo que quieres lograr (un cuadro resumen, una lista índice, un pie de página, etc.) y luego asigna una o más clases a los elementos que necesites.

Ya, pero veréis, tengo ya en el CSS las cosas genéricas que se mantienen iguales en todas partes, que por cierto se reducen a esto:

body {text-align: justify; font-family:Georgia,serif; font-size: 15px; color: rgb(0, 0, 0); background-color: rgb(203, 203, 203);}
.tabla {display: table;}
.fila {display: table-row;}
.celda {display: table-cell; vertical-align: middle;}

El resto ha de ser diferente porque es que los elementos son diferentes, de ahí que use styles continuamente. No me voy a crear un id para definir la anchura de una tabla cuando esa anchura se aplica solo a esa tabla en concreto (no es que no vaya a volver a usarse en todo el documento html, sino que no va a ser usada en ninguno de los documentos de la web al completo).

Por eso me parece un despropósito hacer un CSS para toda la web que obligue al cliente a descargarse un montón de código que probablemente no va a necesitar (por ejemplo si va a ver el documento 1 no tiene sentido obligarle a bajarse el CSS que contiene las características de un montón de objetos presentes en los documentos 2 al 7 que probablemente no va a visitar).

Así, ni siquiera tengo un CSS genérico fuera del html, tengo en el head de cada documento las lineas indicadas arriba (que son comunes para todas las páginas) y luego cada página tiene dos o tres lineas más que generalmente solo contienen alguna tabla con bordes visibles y los H1, H2 y H3 que difieren de documento en documento por el tamaño usado y por ser de colores diferentes.

A mi me parece más coherente hacerlo así, pero, por supuesto, estoy abierto a cualquier razonamiento a contrario sensu.

Antes de nada... Usar ids para css no es que sea pecado, pero está feo... es como tirarse un pedo en la mesa :P Igual opino de usar estilos genéricos como li{}, h1{}, etc, en lugar de clases. Acaban surgiendo problemas de herencia cuando menos lo esperas :P

Y después... pues, a veces no se cae en lo más obvio pero... ¿has pensado que puedes hacer VARIAS hojas de estilos? xD Una podría ser genérica, que se use en todos tus documentos. Y luego otra específica para cada uno de ellos ;)

Piensa que añadiendo las mismas lineas en cada cabecera, no solo haces k el usuario se descargue igualmente una y otra vez las mismas lineas, sino que el mantenimiento de la web puede volverse rápidamente una locura, pues para algo tan banal como cambiar el tipo de fuente, tienes k ir documento a documento a cambiarlo en todas partes...

No solo eso, sino que conforme aumente el numero de elementos mas de ellos repetirán atributos y estilos, aún mas, las hojas de estilo se guardan en la cache del navegador por lo que se descargan una única vez mientras el usuario navega por la web mientras que ponerlo en la página hace que se lo descargue cada vez.

Por otro lado lo que creo que intentas hacer es una imagen central y dos flechas para ir de la anterior a la siguiente, te recomiendo usar porcentajes para eso, de esa forma las imagenes se adaptaran al tamaño de la pantalla, incluso puedes dedicarle unos minutos y hacerlo de forma que se vea bien incluso en pantallas de mobiles.

De todos modos, como he dicho antes, a css no se pasa así, cada celda no es un div, todo lo que has puesto se puede poner en un único div y aplicando estilos a las imágenes.

Como "norma" cada sección o grupo de elementos metelo en un div (cabecera, barra de navegación, elementos adicionales, cuerpo, pie de página, ect)

Voy a ponerte un ejemplo (no he comprobado como queda porque no tengo las imágenes pero tendría que ser mas o menos lo que buscas):

<style type="text/css">

body {
text-align: justify; 
font-family:Georgia,serif; 
font-size: 15px; 
color: black; 
background-color: CCCCCC;
}

.centra {
text-align: center; 
margin-left: auto; 
margin-right: auto;
}

.derecha {
text-align: ritgh;
}

.izquierda {
text-align: left;
}
.verde { 
color: #006600; 
}
.just {
text-align: justify;
}
.verimagen{
display: inline-block;
width: 266px;
height: 254px;
}

.flecha {
display: inline-block;
width: 10%; 
top: 50%;
}

.imagen {
width: 75%;
top: 1%;
}

.verimagen img { 
border: 1px solid #323232;
background: red;
}
</style>

<div class="verimagen" >
        <a  href="dragon-2" ><img class="flecha" src="Botones/Flecha_izquierda.gif" alt="Ir a la página anterior"></a>
        <a href="Fotos/Dragon-3"><img class="imagen" src="Fotos/Thumb_Dragon-3.jpg" alt="Minerva (15 de abril de 2003)"></a>
        <a href="dragon-4" ><img class="flecha" src="Botones/Flecha_derecha.gif" alt="Ir a la página siguiente"></a>

</div>

Si te fijas he cambiado esto:

h1 {text-align: center; color: rgb(0, 102, 0);}
h2 {text-align: justify; color: rgb(0, 102, 0);}
h3 {text-align: justify; color: rgb(0, 102, 0);}

Por esto:

.centra {
text-align: center; 
margin-left: auto; 
margin-right: auto;
}

.der {
text-align: ritgh;
}

.izq {
text-align: left;
}

.just {
text-align: justify;
}

.verde { 
color: #006600; 
}

que puedes usarlo en muchos mas lugares

<h2 class="just verde">Titúlo que quieras</h2>

echandole un poco de imaginación te das cuenta de que todo lo puedes hacer con muchísimo menos código