tambien te funcionaria eliminando los div
<UL class="menu"> <LI id="imagen1"><A HREF="....">texto largo o corto</A></LI> <LI id="imagen2"><A HREF="....">texto largo o corto</A></LI> <LI id="imagen3"><A HREF="....">texto largo o corto</A></LI> ... etc ... <LI id="imagen(n)"><A HREF="....">texto largo o corto</A></LI> </UL>
.menu {
width: 150px;
}
.menu li {
list-style: none;
}
.menu li a {
display: block;
background-repeat: no-repeat;
background-position: top left;
padding-left: 20px;
}
#imagen1 {
background-image: url(images/imagen1.gif);
}
#imagen2 {
background-image: url(images/imagen2.gif);
}de esta manera ademas podrias usar una imagen para el estado :hover distinta.
a#imagen1:hover {
background-image: url(images/imagen1_hover.gif);
}
-- are css.artnau.com
[EMAIL PROTECTED] wrote:
Pues a mi se me ocurre que puedes utilizar perfectamente una lista, en HTML ser�a:
<UL class="menu"> <LI><DIV id="imagen1"><A HREF="....">texto largo o corto</A></DIV></LI> <LI><DIV id="imagen2"><A HREF="....">texto largo o corto</A></DIV></LI> <LI><DIV id="imagen3"><A HREF="....">texto largo o corto</A></DIV></LI> ... etc ... <LI><DIV id="imagen1"><A HREF="....">texto largo o corto</A></DIV></LI> </UL>
C�mo CSS ser�a:
.menu { width: 150px; } .menu li { list-style: none; } .menu li div { background-repeat: no-repeat; background-position: top left; } .menu li div a{ padding-left: 20px; } #imagen1 { background-image: url(images/imagen1.gif); } #imagen2 { background-image: url(images/imagen2.gif); } ... etc ...
M�s o menos, no lo he probado por falta de tiempo, pero creo que te funcionar�a. Espero que te sirva.
Mensaje citado por Alejandro Salamanca <[EMAIL PROTECTED]>:
Buenas. En un software que estoy elaborando, deseo elaborar un modelo de men� que me permita colocar un �cono por delante de cada entrada del men�. Sin embargo, los �conos pueden variar seg�n la entrada del men�, por lo que no se mantienen iguales en toda la lista de opciones (as� que no estoy utilizando listas).
El problema se presenta cuando la entrada del men� ocupa m�s de una l�nea, por lo que el texto se desplaza hacia la siguiente desde el margen izquierdo, anulando el efecto de lista que deseo para las entradas del men�; esto es debido a que el ancho para todo el men� es fijo (en 150px)
El men� que deseo mostrar es m�s o menos as�:
(*) Entrada uno que puede ser larga (&) Entrada dos (&) Entrada tres que tambi�n es larga ($) Entrada cuatro (%) Entrada cinco con texto largo
donde (*), (&), ($) y (%) son im�genes de 14px de alto por 18px de ancho
He creado el siguiente c�digo:
#menu a { margin-left: 0px; padding-left: 20px; background-repeat: no-repeat; }
y para cada entrada en html:
<a href="url" title="title" style="background-image: url(images/imagen1.gif)">Entrada uno que puede ser muy larga</a><br>
La opci�n text-indent no ha funcionado por lo que no la estoy utilizando.
La salida es algo as� como lo siguiente:
(*) Entrada uno que puede ser larga (&) Entrada dos (&) Entrada tres que tambi�n es larga ($) Entrada cuatro (%) Entrada cinco con texto largo
Necesito su ayuda para solucionar este l�o. No s� si las listas pueden cambiar los �conos de las vi�etas para diferentes opciones.
Cualquier ayuda ser� bienvenida.
Agradecido de antemano.
Alejandro Salamanca
_______________________________________________ Ovillo mailing list [EMAIL PROTECTED] http://ovillo.org/mailman/listinfo/ovillo_ovillo.org
------------------------------------------------- This mail sent through IMP: http://horde.org/imp/
_______________________________________________ Ovillo mailing list [EMAIL PROTECTED] http://ovillo.org/mailman/listinfo/ovillo_ovillo.org
_______________________________________________ Ovillo mailing list [EMAIL PROTECTED] http://ovillo.org/mailman/listinfo/ovillo_ovillo.org
