menu vertical nid d'abeille et css

Général
1

Bonjour,

Je souhaite réaliser un menu vertical composé des logos de mots-clés.
Chaque logo a une forme hexagonale. Je souhaite en fait rapprocher ces logos
pour créer un effet "nid d'abeilles".

Ma question : existe-t-il un moyen de passer le décalage/positionnement
systématique de chaque logo par rapport à l'autre en critère dans ma boucle
d'affichage des logos ? et/ou bien dois-je passer par qqch de plus compliqué en
css ?

l'exemple est visible ici : http://na.lautre.net

merci de votre help
fred

2

une piste : tu définis 2 div, une pour chaque colonne d'alveoles, tu repositionnes celle de droite en css avec position:relative; left: -30px; etc...

et tu prends des logos en png...

Pascal

freedee@free.fr a écrit :

Bonjour,

Je souhaite réaliser un menu vertical composé des logos de mots-clés.
Chaque logo a une forme hexagonale. Je souhaite en fait rapprocher ces logos
pour créer un effet "nid d'abeilles".

Ma question : existe-t-il un moyen de passer le décalage/positionnement
systématique de chaque logo par rapport à l'autre en critère dans ma boucle
d'affichage des logos ? et/ou bien dois-je passer par qqch de plus compliqué en
css ?

l'exemple est visible ici : http://na.lautre.net

merci de votre help
fred

_______________________________________________
liste spip
spip@rezo.net - désabonnement : spip-off@rezo.net
Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Documentation de SPIP : http://www.spip.net/
irc://irc.freenode.net/spip
FAQ : FAQ webmestre - SPIP

3

freedee@free.fr wrote:

Ma question : existe-t-il un moyen de passer le décalage/positionnement
systématique de chaque logo par rapport à l'autre en critère dans ma boucle
d'affichage des logos ? et/ou bien dois-je passer par qqch de plus compliqué en
css ?

déjà tu devrais inscrire tes item dans un carré
placer chaque item dans un div en position: absolute
puis jouer avec #COMPTEUR_BOUCLE|alterner{'0','46px'}
et pour le positionnement vertical :
top: (#COMPTEUR_BOUCLE - 1) * moitié du carré

en partant d'un item inscrit dans un carré de 92 x 92

style="position:absolute;
        top:[(#COMPTEUR_BOUCLE|moins{1}|mult{46})]px;
        left:[(#COMPTEUR_BOUCLE|alterner{'0','46'})]px;"

#CPT_BCL position
    1 top:0; left:0;
    2 top:46px; left:46px;
    3 top:92px; left:0;
    4 top:138px; left:46px;
    5 top:184px; left:0;
    6 top:230px; left:46px;
    7 top:276px; left:0;

4

Le 05/03/08, freedee@free.fr<freedee@free.fr> a écrit :

Bonjour,

Je souhaite réaliser un menu vertical composé des logos de mots-clés.
Chaque logo a une forme hexagonale. Je souhaite en fait rapprocher ces logos
pour créer un effet "nid d'abeilles".

Ma question : existe-t-il un moyen de passer le décalage/positionnement
systématique de chaque logo par rapport à l'autre en critère dans ma boucle
d'affichage des logos ? et/ou bien dois-je passer par qqch de plus compliqué en
css ?

l'exemple est visible ici : http://na.lautre.net

As-tu regardé http://www.cssplay.co.uk/menu/mantis.html
Si tu en fais un modèle, propose le à la communauté.

--
@plus

Jacques

Pour les lyonnais++ spip-lyon@rezo.net http://spip-party.net/-Lyon-
Toujours à la recherche de spipeurs in Saigon

5

Jacques J. wrote:

As-tu regardé http://www.cssplay.co.uk/menu/mantis.html
Si tu en fais un modèle, propose le à la communauté.

hmmm...
il est basé sur une structure figée d'avance :
http://www.cssplay.co.uk/menu/insect/hex_nav.gif

en gros, c'est une area map améliorée.

6

freedee@free.fr wrote:

l'exemple est visible ici : http://na.lautre.net

ah ben finalement tu as trouvé *ta* solution.
c'est cool.