Dudas existenciales sobre semántica y yerbas relacionadas

[tunait]

Buenos días por la mañana ,


Tengo maquetadas unas fichas con datos y un espacio para una imagen de dimensiones variables que no excederán nunca determinado tamaño.

El tema es que lo tengo definido dentro de una lista de definición a excepción de la imagen que se inserta justo antes y se flota a un lado.

El caso es que no me convence mucho el resultado que se muestra cuando la imagen llega a una determinada anchura y la ventana tiene determinadas dimensiones, por ejemplo cuando se tiene abierto algún panel lateral del navegador. Ocurre en casos contados pero aún y así no me convence.

Dejo captura de pantalla


Si te fijas saltan todas los valores dt en grupo a un punto y los valores de las dd se quedan en su lugar.

El caso es que lo maqueté con una lista de definición porque me pareció lo más apropiado. Mi pregunta es ¿opinan que pueda maquetarse de otra forma más apropiada? O una forma no tan apropiada pero que siga teniendo sentido semántico. ¿Tal vez una lista no ordenada que agrupe cada para descripción/valor? ¿cómo lo harías tú?


Opiniones serán bienvenidas

Saludos!

[frijolerou]

Hola tunait :D

A simple vista me parece que los DT los estás trabajando como flotantes o elementos inline ¿correcto?.
Tal vez una opción sería trabajarlos al natural (como elementos de bloque, tal como vienen por defecto), de tal manera que la "término" y "definición" no queden uno al lado del otro , sino que uno arriba del otro.
Otra alternativa que se me ocurre es que el contenedor general (que envuelve a la imagen y a la lista) tenga una anchura fija con la que tú veas que se bien teniendo al ancho máximo la foto, así el tamaño d ela ventana no debiera modificar sus dimensiones.

[tunait]

Muy buenas frijolerou

Iniciado por frijolerou

A simple vista me parece que los DT los estás trabajando como flotantes o elementos inline ¿correcto?.

Correcto. Están flotados a la izquierda y el contenedor de la foto está flotado a la derecha de la dl

Tal vez una opción sería trabajarlos al natural (como elementos de bloque, tal como vienen por defecto), de tal manera que la "término" y "definición" no queden uno al lado del otro , sino que uno arriba del otro.

Inicialmente era la idea, sin embargo no quedaba bien pues se hacía una columna de datos demasiado larga (un churro) y visualmente quedaba mucho espacio desaprovechado. La idea es que ya que los primeros items son una descripción y valores cortos que se queden en el espacio junto a la imagen.

Otra alternativa que se me ocurre es que el contenedor general (que envuelve a la imagen y a la lista) tenga una anchura fija con la que tú veas que se bien teniendo al ancho máximo la foto, así el tamaño d ela ventana no debiera modificar sus dimensiones.

A 1024x768 y a tamaño de texto standard no sucede. De hecho ese descuadre sucede muuuy raramente y especialmente en las fichas de animales perdidos en donde hay un item adicional Responde al nombre de. Esa dt larga es lo que provoca el descuadre ese raro en determinados casos.

El diseño es líquido entre 800x600 y 1024x768.
A 800 se descuadra (sólo en algunos casos) y a 1024 no lo hace. Pero si el usuario aumenta el tamaño de la fuente ocurre el descuadre y claro, mostrado así no se entiende qué es qué y me parece poco usable y despista al usuario. Sería suficiente con que mandara los datos bajo la foto (que usualmente es el comportamiento que tiene) pero este amontonamiento ocasional en grupos separados no me parece usable.

Prueba si quieres a cargar la ficha y cambia el tamaño de las fuentes en el navegador y observa el comportamiento que tiene (al menos en FF y Opera).

asokaelgrande.org/ficha.php?animal=87

Por eso me había planteado lo de maquetarlo de otra forma, con ol por ejemplo, así al menos quedarían juntos los pares nombreItem/descripción. ¿Crees que aún sería semánticamente correcto?

Muchas gracias por tus comentarios

[frijolerou]

Estuve haciendo algunas pruebas (manteniendo el uso de la lista de difinición), una solución podría ser derechamente reemplazar "Responde al nombre de" por "Nombre", y además darle a la imagen un tamaño fijo o a lo menos que pueda crecer hasta un ancho máximo (las pruebas las hice dándole un ancho de 280px). Por lo menos esa solución me permitió agrandar el texto y que se mantuvieran juntos los pares nombre/descripción de manera coherente.

Actualizado
De hecho, incluso ni siquiera sería necesario darle un ancho fijo a la imagen, con sólo modificar "Responde al nombre de" por "Nombre" igual se obtendría un resultado coherente al hacer las redimensiones de texto o ventana.

Ok, no sé si se ala solución ideal porque estarías modificando el texto en función del diseño (cuando debiera ser al revés), pero es lo que se me ocurre por el momento.

[tunait]

Hola frijolerou

Antes que nada mis más sinceras disculpas por la demora en responderte. Una vorágine de quehaceres varios me han mantenido alejada de poder ponerme de nuevo con el tema.

Lo segundo, infinitas gracias por tu interés y ayuda

Finalmente te he hecho caso y he seguido tu sugerencia de mantener la lista de definición y dejar nombre como término. Realmente con sólo ese cambio no vuelve a suceder el quilombo.

Iniciado por frijolerou

Ok, no sé si se ala solución ideal porque estarías modificando el texto en función del diseño (cuando debiera ser al revés), pero es lo que se me ocurre por el momento.

jaja es cierto. Sin embargo el cambio tampoco degrada el significado del término así que creo que por esta vez se puede hacer


frijolerou, gracias de nuevo

Un saludo