Positionnement de puces en images...

21 sept. 2007, 20:18

Bonjour à tous,
Cela fait un bail que je suis pas venu demander votre aide...
Alors voilà je suis en train de faire un petit site perso, et je doit m'occuper de la mise en page et du design... et je suis plutôt une bille croyez-moi...

Mon problème actuel, et que j'essaye de mettre des images dans mes puces de listes, seulement je n'arrive pas à les positionner verticalement...
Pour être plus parlant, rendez-vous içi: http://leregrave.fr et regardez le menu, avec les petits doigts qui pointes sur le lien...
Je trouve que l'image est trop haute (ou le lien trop bas) et je n'arrive pas à changer cela...

(j'ai essayer vertical-align, ça ne fonctionne pas)
Donc voilou si vous avez besoin d'infos supplémentaires, n'hésitez pas

Merci d'avance à vous tous!!!

ps: et si le coeur vous en dit... quelques critiques sur le début du design (j'ai pas encore fait le contenu ni finit le menu, mais le reste?)

21 sept. 2007, 22:32

Essaye en positionnant le lien dans ta balise li. Commence par positionner le <li> en relative et ensuite le lien <a> en absolute, quelque chose du style:

Code : Tout sélectionner

#left ul li {
    position: relative;
}
#left ul li a {
    position: absolute;
    top: -10px;
    left: 10px;
}

22 sept. 2007, 10:15

Alors en changeant un peu les pixels, j'obtient ce que je souhaite sous firefox, mais sous ie et opera, tout mes li sont ratatiné ensemble, ...
Sinon il m'est venu une autre idée, qui sera peut-être plus simple à mettre en place, c'est de créer une image asymétrique, avec plus de "vide" en haut...

22 sept. 2007, 10:35

Sachant que ton texte est alignée avec le bas de l'image, si tu mets plus de blanc en haut, tu auras plus d'espace entre les lignes, mais ton texte sera toujours trop bas

22 sept. 2007, 10:50

roooo

Zut alors...
Bon alors reste plus que la solution de compatibiliser la solution de Cyrano avec opera et ie...

Je retourne faire des essais!
Merci encore

edit: j'ai changer le position: absolute du a en position relative, et ça fonctionne (mis à part quelques marges à unifier)
Je croit que je peu mettre en résolu

merci à vous!!!!

22 sept. 2007, 11:15

...mais sous ie et opera, tout mes li sont ratatiné ensemble, ...

Alors on va ruser en procédant autrement, j'ai testé sous FF, IE7, Opera ainsi que Safari pour Windows et le résultat est strictement le même sous les quatre :

Code : Tout sélectionner

#left ul {
    list-style:         none;
}
#left ul li {
    position:           relative;
    height:             30px;
    background-image:   url('./img/main2.png');
    background-position: 0 0;
    background-repeat:  no-repeat;
}
#left ul li a {
    position:           absolute;
    top:                2px;
    left:               55px;
}

Le truc : on supprime les puces de listes et on met l'image en arrière-plan des <li>, ensuite on positionne le lien de façon à ce qu'il soit bien à droite de l'image et en hauteur pour être au même niveau que le doigt.

Enjoy!

22 sept. 2007, 12:12

Merci Cyrano d'avoir pris le temps de m'aider, je vais voir si je prend ta première solution (en changeant le absolute en relative) ou la deuxième...
Selon comment évolue mon menu (je pense par exemple à changer les puces de couleur en passant la sourie dessus...)
merci infiniment et à bientôt pour la suite de mes problèmes

22 sept. 2007, 12:19

je pense par exemple à changer les puces de couleur en passant la sourie dessus...

Dans ce cas, au lieu d'avoir l'image en arrière-plan de <li>, mets-le en arrière-plan du <a> et change l'image en ajoutant un li a:hover {} dans ta feuille de style et ajuste les positions au besoin. Ajuste surtout les marges pour que le texte ne soit pas sur l'image elle-même.

22 sept. 2007, 15:21

C'est vrai que c'est plus simple...
(j'allais bricolé avec javascript

)
Je vous montrerai le rendu final un de ces quatres

Merci encore!!

Positionnement de puces en images...

Qui est en ligne