Lighbox - positionner autrement les boutons "PREV" et "

Bonjour,

J'ai installé Lighbox et cela fonctionne bien.

Malheureusement pour passer d'une image à une autre, il faut utiliser les boutons PREV et NEXT qui ne sont pas très bien positionnés et pas très visibles ...

Ce que je voudrais faire : positionner les boutons PREV et NEXT en bas de l'image mais pas sur l'image (en fait sur la zone où l'on peux indiquer une description de l'image) centré horizontalement et les 2 boutons devront toujours être visibles.

Je sais qu'il faut modifier la CSS très certainement le code ci-dessous, mais je ne vois pas ce qu'il faut faire ...

#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(./img/lightbox/prev_25px.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(./img/lightbox/next_25px.gif) right 15% no-repeat; }

Hello,

Sans rien changer d'autre dans le code de la Lightbox tu peux essayer ça :

#prevLink:hover, #prevLink:visited:hover { background: url(./img/lightbox/prev_25px.gif) [b]0% 100%[/b] no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(./img/lightbox/next_25px.gif) [b]100% 100%[/b] no-repeat; }

La première valeur en pourcentage indique la position sur l'axe X, la deuxième sur l'axe y :
- 0% 100% : à gauche et en bas
- 100% 100% : à droite et en bas

Tu peux aussi tenter de dépasser le 100% pour faire descendre l'image encore plus bas que bas (pas sûr que ça tienne le choc par contre) :
- 0% 120% : à gauche encore plus bas
- 100% 120% : à droite toujours plus bas

Et si ces modifications ne te plaisent pas, c'est le code XHTML qui va falloir modifier...
Modifié par BeliG (26 May 2008 - 17:51)

Salut,

Au delà de 100% les boutons prev et next ne sont plus visibles ... comme tu l'avais imaginé. Ils disparaissent de la photo mais ne sont pas visible sur la partie "titre du texte".

Que faut-il que je change au niveau du HTML de ma page web pour que cela fonctionne ?

Merci par avance pour vos retour.