28220 sujets

CSS et mise en forme, CSS3

Bonjour je sais plus quoi faire de ce menu, il est ni horizontal sur une ligne ni une liste en vertical. Bref un peu des deux.

J'ai bidouillé et ça a marché sur Firefox mais pas sur Safari notamment les bouttons de control (precedent, aléatoire et suivant) sont décalé vers le bas.

Je l'ai fait avec votre méthode map ce qui marche bien mais je compte utiliser le hover ce qui n'est pas possible avec le map. Et surtout que je veux le faire en ul.

Voilà qu'est ce que vous me conseilleriez pour positionner chaque bouton sachant qu'entre ces boutons, il a des traits de "cellules" comme vous pouvez les voir.

upload/2378-menu.png
imagit a écrit :

Voilà qu'est ce que vous me conseilleriez pour positionner chaque bouton sachant qu'entre ces boutons, il a des traits de "cellules" comme vous pouvez les voir.

upload/2378-menu.png

C'est vraiment un design au pixel près, ça risque d'être dur ! Donc bon, je sais pas, peut-être faire du flash Smiley sweatdrop .

Ou alors, y aller avec un id différent pour chaque élément de liste, et donner un style spécifique à chaque élément. Chacun sera alors en position: absolute. Mais l'écueil que je vois venir très vite, c'est pour placer le texte... il faudra forcément des images à ce qu'il me semble, sinon les différences entre la gestion des padding (pour que le texte ne se colle pas aux bords) seront telles entre les navigateurs que si les blogs sont alignés sur Firefox, ils ne le seront pas sur IE, peut-être pas sur Opera et Safari, et inversement. Donc, des images. Et des images comme éléments pour l'accessibilité (attribut alt). Sauf que du coup le rollover risque d'être coton !

Ou à la rigueur utiliser des png ou gif transparents, et une couleur / image de fond qui pourra changer avec un rollover css.
Salut Mpop

Merci pour la réponse. Après avoir fouillé de longue en large, j'ai rien trouvé en CSS dans ce genre. La méthode que j'ai utilisée consiste à partager ce menu en 3 <ul> avec un "id" propre à chaque liste puis jouer avec les padding et margin. Ca marche bien sous Safari et Firefox, mais le CSS semble encore de la bidouille, je vous le posterai prochainement.
tablô, ou image-map. Dans l'idéal et si des choses comme le display:inline-block étaient implémentées, cela vaudrait la peine d'y consacrer du temps. Mais actuellement, non.
Modifié par Laurent Denis (08 Jan 2006 - 12:04)