Résolu - Centrage image

Hello everybody,


J'ai créé une image de 980*700 découpée en tranche pour inclure un rollover. Le fond de mon image est un dégradé ce qui m'oblige a garder la taille de l'image.

Mon problème est pour centrer l'ensemble des tranches en fonction de la zone de travail de l'utilisateur. D'habitude je fais un tableau de 100% puis j'en inclus un second formaté mais cela ne marche que pour des petites dimensions.

Le décentrage apparait quand l'utilisateur utilise la barre des favoris, réduisant ainsi la zone de travail...et déplace mon image sur la gauche.

Pour être précis sur ma question, comment centrer une image quand celle ci est plus grande que la surface de travail du navigateur ?


Merci par avance
Modifié par copperfield (19 Oct 2006 - 14:20)

copperfield a écrit :
Pour être précis sur ma question, comment centrer une image quand celle ci est plus grande que la surface de travail du navigateur ?

Hello copperfield,

Le top de la précision pour ce genre de demande, c'est la page de test en ligne, ou au pire la capture d'écran, pour permettre de visualiser le problème...

Merci pour votre attention, voici le lien...

http://www.xtreme-manipulation.com

Comme vous pouvez le voir mon graphisme est compliqué et si je découpe une tranche carré alors il y aura une différence de dégradé entre l'image et le fond car compressé en jpeg donc l'image inclus le graphisme et mon fond dégradé.
Tout ça pour dire que je ne peux pas réduire la taille de l'image.

Il faudrait peut être du java script pour centrer le tout...mais c'est pas mon truc

Merci par avance pour vos conseils !!!

@+

Salut.

Je ne suis pas sûr de bien comprendre ton problème. Le fond de la page est bien constitué du dégradé brun foncé/beige ? Dans ce cas, je ne vois pas ce qui t'empêche d'utiliser une image de 1px de largeur, avec la hauteur nécessaire et repeat-x.

Sinon, pour centrer une image de fond :

background: url(fichier.img) repeat-y [b]center[/b]

Pour centrer une image dont tu connais les dimensions, dans le code html, la solution des marges négatives devrait convenir (pas testé) :

#img {
   position: absolute;
   left: 50%;
   margin-left: -490px;
}

Salut

Il n'est pas possible d'utiliser une image de fond de 1 pixel de largeur, car il y a une partie du dégradé dans les tranches images, suivant le centrage, il y aura une démarquation avec le dégradé du fond...cette technique ne marche que pour des images carrées ou sinon je dois mettre mes tranches en PNG, solution que j'ai testé et le poids atteint 400ko donc j'oublie !!!

Par contre en quoi consiste les marges négatives ?
Je ne maitrise pas le langage Html...

Merci pour vos réponses !!!