Hola,
> Quiero hacer un listado de cliente de tal manera que en una linea
> aparezca el logo del cliente y a su lado en texto la dirección de su
> página Web. Para separar los distintos clientes había pensado en poner
> debajo de cada bloque (logo + texto) una linea de puntos. Visualmente
> sería como sigue:
>
> [Logo Cliente] - www.direccion.com
>
> --------------------------------------------------------------------------
>
> [Logo Cliente] - www.direccion.com
>
> --------------------------------------------------------------------------
>
> Y así sucesivamente. He intentado hacer con listas DL que creo sería lo
> correcto pero soy incapaz de hacer que queden visualmente como quiero
>
> El código que estoy utilizando es:
> <dl>
> <dt>Logotipo</dt>
> <dd>dirección página Web</dd>
> </dl>
>
> No consigo que quede en línea los dt y los dd y por otro lado no se como
> hacer para que debajo aparezca la línea de puntos. ¿Se puede hacer esto
> con CSS?
Puedes hacer esto:
dt
{
float: left;
margin: 0;
padding: 0;
}
dd
{
margin: 0;
padding: 0;
}
Pero ten cuidado que si el logo es mas alto que el texto te va a
quedar todo desencajado. Para arreglar esto tendras que ponerle una
altura fija a ambos elementos que sea igual o mayor al de la imagen.
Si despues le anades
border-bottom: 1px dotted #ccc;
o lo que sea al dt y dd te deberia quedar la linea que buscas.
> Lo que he hecho es utilizar UL y el código queda así:
>
> <ul>
> <li><span>[Logotipo]</span> - dirección Web
> </ul>
>
> En este código a cada LI le pongo un paddin-bottom y un border bottom y
> me queda el efecto de la línea el problema es que cada logo tiene un
> ancho distinto, entonces se me había ocurrido meter el logo en una
> etiqueta span y desde CSS darle al span un ancho fijo y alinearlo a la
> derecha, entonces al span le he aplicado width:160px; text-align:right;
> El problema con el que me encuentro es que el Width no se aplica a la
> etiqueta span... no se si tiene que ver que esté dentro de un LI.
La etiqueta span es un elemento inline, a estos no se les puede poner
ni altura ni anchura, aunque puedes cambialos anadiendo o quitando
padding o modificando el line-height. Para que aplique la anchura
debes ponerle
display:block
al span, pero ahi tendras que flotarlo al ser un elemento bloque.
--
Hermann Käser
http://www.theragingche.com/
_______________________________________________
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
