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 [email protected]
>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 [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente direcci�n:
http://ovillo.org/mailman/listinfo/ovillo_ovillo.org
