Hola, Ramón. Puedes usar position: absolute para situar el segundo elemento encima del primero y javascript para calcular la altura de éste y así poder desplazar el primer elemento más abajo en esa misma cantidad. Lo podrías implementar con lenguaje del lado del servidor, pero tendrías el problema del zoom de sólo texto o el redimensionado de la ventana (en el caso de que las dimensiones de los contenedores de las noticias varíen). En ese caso, habría que hacer una nueva llamada al servidor para que se mostrara bien el diseño. Con Javascript tienes el mismo problema, pero basta con refrescar la página con F5.
Aquí tienes una solución javascript: http://webpelon.es/ovillo/2009-mes03-17-Intercambiar_visualmente_orden_elementos/ Este es un ejemplo con dos divs con ids, pero en tu caso, con varios titulares, habría que modificar el código, aunque se puede hacer igualmente. Si te sigue interesando, dímelo y te lo preparo para tu código. Saludos. El 12 de marzo de 2009 0:47, Ramón Corominas <lis...@ramoncorominas.com>escribió: > Me debo explicar fatal, porque enseguida se desvía el hilo hacia cosas > que no son el meollo del problema técnico, pero en fin, para que quede > claro... > > Martin Etxauri escribió: > > personalemente he intentado antes algo así y... creo que es imposible ;) > > > Eso creo yo, pero me gustaría asegurarme <guiño> > > > pero en este caso hay algo que no entiendo: > > ¿si el ante título es ante, porque no ponerlo antes del el título > > también en el código? > > > La razón es la semántica. El antetítulo, por muy "ante" que sea, > pertenece al contenido principal, a la noticia en sí; es una > *aclaración* de lo que la noticia expresa, y sólo debe aparecer antes > visualmente porque se empeñan los editores, pero sigue siendo parte de > la noticia. Visualmente no hay demasiado problema en identificar este > antetítulo como una parte integrante de la noticia en sí (está cerca del > título, separada de la interfaz, dentro del mismo espacio visual, etc.); > pero para un usuario de lector de pantalla, que puede navegar yendo > directamente a los encabezados, podría quedar "fuera" de la noticia. El > usuario de JAWS, por ejemplo, iría al encabezado de sección de nivel 1, > y a continuación NO se leería este antetítulo, sino el contenido > principal. El antetítulo quedaría "oculto" a este usuario, salvo que > navegue toda la página de forma lineal, cosa que se considera un > problema grave de usabilidad. > > Victor Hugo Arias Valencia escribió: > > Si es un ante-titulo puede ser un H3, y el titulo de la noticia un H2, y > > pues me parece lógico lo que dice martin, si va antes, pues ponerlo antes > de > > una vez... > > > El contenido de la página ES esa noticia, y lo correcto semánticamente > es que su <h1> sea el título de la noticia (que será único, sí). Además, > los encabezados, por definición, DEBEN encabezar (describir) contenido, > no se deben usar para crear efectos visuales o de otro tipo. No veo que > tenga ningún sentido semántico colocar un <h3> delante de un <h2> sin > ningún contenido intermedio. ¿Qué contenido describe el <h3>? Recuerdo > la especificación de HTML donde se definen los encabezados [1]: > > "A heading element briefly describes the topic of the section it > introduces. Heading information may be used by user agents, for example, > to construct a table of contents for a document automatically." > > Traducción: "Un elemento de encabezado describe brevemente el tema de la > sección a la que introduce. La información de los encabezados puede ser > usada por los agentes de usuario, por ejemplo, para construir una tabla > de contenidos del documento de forma automática". > > De todos modos, repito que lo de menos es que el orden de los > encabezados deba ser uno u otro, el tema aquí es si se puede o no se > puede alterar el orden visual de las dos filas que representan el <h1> y > el <p>. > > Hernán Beati - SaberWeb.com.ar escribió: > > El "orden" de los factores no altera el producto... los encabezados no > > son "enumeraciones" de una lista ordenada, son señales de lo que es más > > o menos "importante" dentro de un documento. Quizás el documento empiece > > con cosas no demasiado "importantes". > No contesto al tema de la otra estructura que propones porque ya he > explicado que en este caso el <h1> es el título principal del documento > (no hay varias noticias en la misma página). Pero sí quiero reiterar que > los encabezados no son sólo "señales". Son elementos que introducen > contenidos y que deben describir los contenidos que introducen. Colocar > un <h3> con un <h2> detrás, sin contenido intermedio, es un uso > inadecuado según la especificación. Y si suponemos que el <h3> > "encabeza" al <h2>, se está alterando el orden de la jerarquía, lo que > va en contra de las WCAG 1.0 y, sencillamente, de la pura lógica. > > En todo caso, también me gustaría que os pusierais en la piel de un > usuario de un lector de pantalla como JAWS. Inicialmente puede pulsar la > tecla "1" para ir al primer encabezado de nivel 1 de la página. Leerá el > título de la noticia, y a continuación podrá pulsar Insert + flecha > abajo para continuar leyendo el resto del contenido. ¿Por qué iba a > intentar acceder a encabezados previos de niveles inferiores, si ya ha > encontrado lo que estaba buscando (el contenido principal)? ¿Debería > este usuario pulsar "2" para ir al siguiente encabezado de nivel 2? ¿Con > qué se encontraría? Desde luego no se encontraría con nada que estuviera > *antes* del <h1>, salvo que no hubiera más <h2> en toda la página y > tuviera que volver al principio... Incluso suponiendo que el <h2> que > está antes del <h1> es lo "siguiente" que se encuentra, el lector dirá: > "saltando al principio", y leerá el encabezado, lo que aumentará su > confusión. ¿Por qué está ese encabezado al principio? ¿A dónde > pertenece? ¿Es independiente? Por eso es por lo que es importante > mantener la coherencia de la jerarquía. > > > ¿Alguien sabe fehacientemente DONDE se recomienda que DEBAN ir en orden? > > ¿Y qué fuente lo recomienda? > > > En WCAG 1.0, aparte de en el propio punto 3.5 [2], donde se hace una > referencia explícita al orden (aunque sea como un ejemplo): "For > example, in HTML, use H2 to indicate a subsection of H1." (traducción: > "Por ejemplo, en HTML, use H2 para indicar una subsección de H1."); como > ya ha comentado Pablo, en las técnicas para este punto [3] se dice más > claro aún, lo traduzco por si alguien no se lleva bien con el inglés: > > "Dado que algunos usuarios exploran el documento navegando sus > encabezados, es importante usarlos apropiadamente para transmitir la > estructura del documento. Los desarrolladores deberían ordenar los > elementos de encabezado de forma apropiada. Por ejemplo, en HTML, los > elementos H2 deberían seguir a los elementos H1, los H3 a los H2, etc. > Los desarrolladores de contenido no deberían "saltar" niveles (esto es, > pasar de H1 directamente a H3)." > > Eso sí, lo cierto es que no se dice expresamente "prohibido alterar el > orden", y supongo que es por eso por lo que HERA y otras herramientas > sólo dan una advertencia, y no un error. Pero eso sí, TAW sí que da un > error automático, lo cual queda muy feo si alguien sin los conocimientos > adecuados pasa el TAW a una web certificada... > > En cuanto a las WCAG 2.0, aparte de las técnicas mencionadas por Hernán, > yo añadiría el criterio de fallo F43 [4]: "Failure of Success Criterion > 1.3.1 due to using structural markup in a way that does not represent > relationships in the content" (Traducción: "Fallo del Criterio de Éxito > 1.3.1 debido al uso de elementos de marcado estructural de un modo que > no representa relaciones en el contenido"). Para mí es bastante claro > viendo los ejemplos que los encabezados se deben usar SIEMPRE para > encabezar contenido (como es lógico si pensamos en los usuarios que > realmente los van a usar para acceder a las secciones). > > > Y aclarado (creo) el tema de los encabezados, la semántica, etc., vuelvo > al problema original, aunque cambiaré un poco el enunciado para no > distorsionar el núcleo de lo que se pretende (en España diríamos para > que la gente no se vaya "por los cerros de Úbeda"): > > "Dados dos elementos HTML (<div>, por ejemplo) A y B, contiguos en el > código en el orden A->B, cuyos contenidos y dimensiones no son > determinables a priori, y que deben presentarse visualmente como filas, > una debajo de la otra, ¿existe alguna solución multinavegador, usando > exclusivamente CSS (y cualquier marcado no-semántico adicional que > pudiera requerirse), para alterar visusalmente el orden de las filas sin > alterar el orden en el código? > > Por ejemplo, dados: > > <div id="A">Esto es un texto de longitud no conocida.</div> > <div id="B">La longitud de este texto tampoco se conoce.</div> > > Se debe presentar: > > La longitud de este texto tampoco se conoce. > Esto es un texto de longitud no conocida." > > Espero que ahora haya quedado todo más claro <guiño> > > Un saludín, > Ramón. > > [1] HTML 4.01 Specification: 7.5.5. Headings. The h1-h6 elements > http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.5 > > [2] WCAG 1.0, checkpoint 3.5 > http://www.w3.org/TR/WCAG10/#tech-logical-headings > > [3] WCAG 1.0 Techniques. 1.2.1. Section headings > http://www.w3.org/TR/WCAG10-HTML-TECHS/#document-headers > > [4] WCAG 2.0. Failure F43 > http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F43 > > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
