Hola Iban. Ahora mismo no tengo mucho tiempo para probar, así que te hablo de
memroria, pero creo que te servirá paerfectamente.
Para poner el estilo que quieres tienes que dejar aparte el formato de los 'li'
al principio y centrarte en los 'a'. Estos últimos los tienes que poner en modo
'block':
a {
display: block;
}
Ahora les pones el 'padding' que prefieras o defines directamente el tamaño de
su
contenedor. Con la primera opción harás que cada enlace sea "elástico", es
decir,
que se apdapte al contenido; con la segunda opción crearás todos los enlaces del
mismo tamaño, y conbinándolo con 'overflow: hidden' nunca se modificarán:
/* Para el primer caso */
a {
padding-top: 4px;
padding-right: 6px;
padding-bottom: 4px;
padding-left: 6px;
}
/* Para el segundo caso */
a {
width: 40px;
height: 20px;
overflow: hidden;
}
También habrá que definir los colores de fondo y de texto en cada uno de los
estados:
a:link, a:visited {
background-color: #000;
color: #fff;
}
a:hover, a:active {
background-color: #fff;
color: #000;
}
Y por último no tendrás que olvidar eliminar esos molestos "bullets" que están
al
inicio de cada elemento de lista:
/* Esto lo puedes poner en un 'li' o en su padre, un 'ol' o un 'ul'
li {
list-style-type: none;
}
Recuerda que los espacios y retornos de carro entre un </li> y su siguiente <li>
le sientan muy mal a algunos exploradores. Aparte, si tienes algún problema de
separación comprueba que el 'li' contenedor no tenga margen ni padding.
Por supuesto, todos estos valores tendrás que modificarlos para adaptarlos a tu
página, pero eso ya te lo imaginarás ;)
Bueno, espero haberte sido de ayuda, y perdona que no me extienda más o
compruebe
que esto funciona bien porque tengo que salir zumbando. Por cierto, si te sigues
liando puedes visitar http://css.maxdesign.com.au/listamatic/ .
-------------
Chao...
David Merino
On Tue Feb 1 1:20 , 'Iban Rodriguez' <[EMAIL PROTECTED]> sent:
>Muy buenas de nuevo,
>
>Tengo un par de dudas. Hace unos días desarrollando un administrador Web
>conseguí un efecto un tanto curioso que luego mirando el código descubrí por
>qué sucedía (no lo hice a propósito).
>Resulta que en el listado de items a administrar tengo puesto que el link
>sea rojo con subrayado en el hover, y negro sin subrayado en estado normal
>(visitado, activo, etc.)
>
>Tocando cosas aquí y allá resulta que el efecto fue el siguiente:
>-Links negros sin subrayado en estado normal, visited, active.
>-Texto negro en estado hover PERO con subrayado rojo.
>
>Mirando el código veo lo siguiente (es una aplicación hecha utilizando
>estilos CSS pero para "formatear" textos, no para maquetar:
>
>-En el TD donde está el listado de links tengo aplicado el estilo
>"textonormal", que es el que utilizo como fuente estándar en toda la Web.
>-El "a" del listado de links lo tengo como "class=linkslistado", que es el
>formato de los links del listado, es decir, rojo con subrayado.
>-No sé de dónde, supongo que al copiar y pegar de otro módulo (utilizo
>Dreamweaver), este mismo link se ha metido entre etiquetas "span", que lo
>formatean como "textonormal".
>
>Es decir, queda algo así:
>
>
>class="linkslistado">URL
>
>Dejando aparte el tema de que esto sea una chapuza o no (el span no lo puse
>yo, pero me gusta como queda)... mi pregunta es:
>
>¿Hay alguna forma "elegante" de conseguir este mismo efecto utilizando una
>hoja de estilos CSS sin andar aplicando span o class aqui y allá?
>
>Es decir: Link de un color y hover con el mismo color pero subrayando de
>otro (text-decoration).
>¿O no habría más opción que utilizar un border-bottom?
>
>
>La otra duda va relacionada con el correo que envié ayer. FireFox me hace
>perfectamente el display:block y todo el "li" es un link. Pero para IE el
>link es sólo el texto (aunque respeta el hover).
>¿Se puede conseguir ese efecto en IE también?
>
>
>Entiendo que estas preguntas hayan podido ser respondidas previamente o que
>os aburráis de responder preguntas de novato como estas, así que agradecería
>igualmente un enlace a una página donde documentarme sobre esto.
>
>Gracias de antemano,
>Un saludo.
>
>
>
>_______________________________________________
>Lista de distribución Ovillo
>Para escribir a la lista, envia un correo a Ovillo@ovillo.org
>Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo_ovillo.org
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo_ovillo.org
