Sureña wrote:
> Holas, he visto recientemente una pagina en la que los iconos de la lista
> estaban puestos en forma circular, pero no me recuerdo que pagina era, solo
> que era de instrumentos musicales, la he buscado y no acierto a dar con
> ella, alguin tiene una idea de como se puede conseguir este efecto, es un
> menu sin animacion, agradeceria cualquier idea
> Alejandra
Hola de nuevo Sureña ;)
Corregime si me equivoco: lo que querés es que íconos correspondientes a
items de una lista (los <li> de un <ul>) aparezcan en
forma circular, es decir siguiendo el contorno de una circunferencia
(visible o invisible), verdad?
Si es así, muy a grosso modo estos son a priori (luego en la práctica
veremos qué pasa) los pasos a seguir:
tenés esta estructura:
<ul>
<li><a href="x" id="menu_x">X</a></li>
<li><a href="y" id="menu_y">Y</a></li>
<li><a href="z" id="menu_z">Z</a></li>
</ul>
- Los UL, LI y A deben ser dimensionados como bloques, y se deben quitar
los márgenes, paddings y list-style de los primeros;
- El UL debe ser posicionado de manera relativa o absoluta, para
resetear el origen de los LIs contenidos;
- Posicionás los LIs de manera absoluta y ID por ID les vas asignando a
ojímetro las coordenadas de top y left, siguiendo la circunferencia; a
medida que vayas viendo los resultados vas a poder ir ubicando mejor los
elementos. Acordate que el 0 lo tenés en la esquina superior izquierda
del UL. Luego podés usar alguna forma conocida de sustitución de texto
por imágenes, esto afecta a propiedades de los LI y de los A*;
- (relacionado con el punto anterior*) Si preferís, podés poner IMGs
directamente dentro de los A, en vez de usar texto.
* Nota: obviamente este punto lo simplifiqué de una manera extrema. Acá
hay varios: http://www.mezzoblue.com/tests/revised-image-replacement/,
pero aunque no lo testeé personalmente, por simpleza y similitud te
recomiendo este ejemplo (buscá el título "Replacing a navigation list"):
http://www.stuffandnonsense.co.uk/archives/examples/malarkey-method-example.html
Suerte,
Pablo
_______________________________________________
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
