Background-image décalé?

Bonjour,

Je suis en train de (péniblement...) mettre en place une galerie en javascript sur le modèle d'alsacreations.

J'aimerais que les vignettes s'affichent sous formes de bandes et qu'il y ait une petite flèche qui apparaisse au survol:
http://www.magdalenagerber.ch/mg/index.php?page=Tellerstories

Ca marche plus ou moins, mais je ne comprends pas du tout pourquoi la flèche est décalée comme ça par rapport à la bande, alors que j'ai bien spécifié center comme positionnement...

Je soupçonne qu'il y a un détail qui m'échappe fortement entre le "stylage" des li, img, a, et que je m'y prends très mal.

Quelqu'un pourrait-il m'expliquer?

Merci d'avance pour votre aide.

Je pense que tu devrais nous filer un petit peu de code source.
Donne nous au moins les lignes pour un menu et la flèche correspondante sur la gauche.

pardon...

voilà ce que j'ai fait et qui pose problème:

#galerie dt{
display: none;
}

#galerie_mini li{
display:block;
margin-top: 5px;
}


#galerie_mini li a{
position:relative;
left: -25px;
padding-left: 25px;
}

#galerie_mini li a:hover{
background: url(uploads/images/mg_elements/fleche_droite.gif) no-repeat;
background-position: center left;
}

Modifié par firfelin (01 Jun 2007 - 13:45)

<style>
#galerie dt{
display: none;
}


ul#galerie_mini{
list-style-type:none;
margin:0em;
padding:0em;
}

#galerie_mini li{
margin:0em;
padding:0em;
margin-top: 5px;
}

#galerie_mini li a{
padding-left:15px;
}

a img{border:0px}


#galerie_mini li a:hover{
background: url('confused.gif') center left no-repeat;
}
</style>

voilà une correction que j'ai faite pour ton problème,
mon image confused.gif (celle du site) fait 15px de large.
adapte donc à ta flèche les valeurs : 25px au lieu de 15px.

J'espère t'avoir aidé.
Modifié par tioneb369 (01 Jun 2007 - 14:07)

eeeuh non

Je comprends pas bien... le résultat est le même, la flèche est toujours décalée

Oui elle est à gauche des images coupées ?
Si c'est pas ça que tu veux alors j'ai pas compris du tout quel était ton problème.
Modifié par tioneb369 (01 Jun 2007 - 15:02)

Désolé, je pensais avoir été clair

oui elle doit être à gauche, mais centrée verticalement par rapport à la bande d'image de 25px

c'est pas à ça que sert background-position: center left?

Or, sur ma page, quand on survole les bandes, la flèche n'est clairement pas centrée, elle est trop bas, et je ne comprends pas pourquoi...

Bizarre chez moi, l'image est bien centrée verticalement (IE7 et Firefox).
tu dois avoir un autre problème ailleurs.

ben FF ça donne ça:

et safari c'est pire, le bas et le haut de la flèche sont mangés...

Ok ben donne nous le contenu
de toute la balise ul.

Voilà:

<div id="galerie">
<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><img id="big_pict" src="uploads/images/mg_objets/tellerstories/tellerstories_1.jpg" 
alt="tellerstories 1"/>
</dd>
</dl>

<ul id="galerie_mini">

<li>
<a href="uploads/images/mg_objets/tellerstories/tellerstories_2.jpg" title="tellerstories 2">
<img src="uploads/images/mg_objets/tellerstories/tellerstories_bande2.jpg" alt="tellerstories 2" />
</a>
</li>

<li>
<a href="uploads/images/mg_objets/tellerstories/tellerstories_3.jpg" title="tellerstories 3">
<img src="uploads/images/mg_objets/tellerstories/tellerstories_bande3.jpg" alt="tellerstories 3" />
</a>
</li>

<li>
<a href="uploads/images/mg_objets/tellerstories/tellerstories_4.jpg" title="tellerstories 4">
<img src="uploads/images/mg_objets/tellerstories/tellerstories_bande4.jpg" alt="tellerstories 4" />
</a>
</li>

<li>
<a href="uploads/images/mg_objets/tellerstories/tellerstories_1.jpg" title="tellerstories 1">
<img src="uploads/images/mg_objets/tellerstories/tellerstories_bande1.jpg" alt="tellerstories 1" />
</a><
/li>

</ul>
</div>

Merci beaucoup pour ton aide

Bizarre ton truc, ce serait pas ton image qui a pas les dimensions 25px par 25px ?
T'as bien mis tous les styles que je t'ai filé ?

Moi j'ai un truc du genre :

Modifié par tioneb369 (01 Jun 2007 - 15:52)

ben non, la flèche fait 15x15px
http://www.magdalenagerber.ch/mg/uploads/images/mg_elements/fleche_droite.gif

mais ça ne m'empêche pas de vouloir la centrer verticalement par rapport à la bande qui fait 25px de haut, non?

Si tu prends la page:
http://www.magdalenagerber.ch/mg/index.php?page=objets&hl=fr

la bande est bien plus haute, la flèche est la meme, est elle est centrée...


aaarg c'est à s'arracher les cheveux ces css

Pour te rassurer, la flèche est placée au milieu dans mon test....

Modifié par tioneb369 (01 Jun 2007 - 16:11)

mouais...

ça ne me rassure que moyennement dans le sens où visiblement il y a un problème avec FF et Safari sous mac.