Wenas, yo también tengo que hacer algo parecido.
Quiero mostrar una serie de juegos de mesa, en la que aparezcan ciertos
datos (diseñador, publicado por, número de jugadores, tiempo de juego,
...) a la izquierda y alineado a la derecha su correspondiente
información. Y bien a la derecha o izquierda una foto del tablero o caja
del juego.
Evidentemente una tabla no es la solución. Y he utilizado lo siguiente:
<div id="contenido">
<legend>Nombre del juego</legend>
<img class="foto_derecha" alt="..." src="..." title = "..."/>
<div class="info">
<div class="etiqueta">Diseñador:</div>Richard Garfield</div>
<div class="info">
<div class="etiqueta">Publicado por:</div>Amigo Spiele</div>
...
</div>
Utilizando el siguiente CSS:
img.foto_derecha {
border: none;
float:right;
padding-top:1em;
padding-bottom:1em;
padding-left:1em;
}
.info {
margin-bottom:.453em;
min-height:1.822em;
overflow:visible;
}
.etiqueta {
float:left;
width:18.116em;
min-height:1.822em;
}
Y todo va perfecto, hasta que por ejemplo el campo descripción se hace
muy largo. Y en vez de alinearse a la derecha a partir de los 18.116em.
Empieza pegado totalmente a la izquierda, la segunda linea de texto.
Es una pagina web que tengo que hacer para una asignatura de
accesibilidad web, y quiero que a la vez que sea accesible tenga un
diseño majo.
Alguno me podéis orientar como hacer esto. De esta forma o de otra. La
idea general es que aparezca a la izquierda el atributo (nunca mas largo
de 20 palabras) y a la derecha la descripción (pudiendo ser un texto largo).
Gracias por vuestra ayuda.
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
