[CSS] Problème de centrage d'image.

Bonjour,

J'ai une image dans un div:

<div id="bh"><img src="barre_haut.jpg"/></div>

avec une feuille css jointe:

#bh {
position:relative;
width: 100%;
height: 100%;
top:0%;
left:0%;

}

Alors comment dois je faire pour centrer l'image, sachant qu'elle est très longue. Là l'image commence à gauche et s'arrete beaucoup trop loin à droite..

Donc que le milieu de l'image soit au milieu de l'écran.. Qu'elle déborde autant d'un coté que de l'autre et sans scrollbar..

Et est ce que le absolute est ce qu'il convient le mieux ? car du coup il y a un scrollbar qui apparait en dessous (pour voir l'image dans son entierté alors que finalement elle joue un peu un role de background..

Le but ici n'est pas de voir toute l'image, mais seulement ce qui est possible de voir selon la résolution. Donc si quelqu'un avec une plan grande résolution arrive, l'image sera toujours centrée par sont milieu, mais il la verra un peu plus.

Merci beaucoup !!

Doc.
Modifié par Docxell (17 Feb 2009 - 20:37)

Hello,

Puisqu'il s'agit d'une question de mise en forme (et puisque tu l'as d'ailleurs précisé dans le titre de ton sujet), je vais déplacer celui-ci dans le salon... CSS

PS : n'hésite pas à en profiter pour afficher tes codes correctement comme cela est indiqué dans l'Aide du forum. Merci.
Modifié par Raphael (17 Feb 2009 - 12:28)

Excusez moi je suis nouveau sur le forum!

Déjà c'est clair il faudrait un peu plus de code et au meilleur des cas un lien...

Après le peu de code que tu nous montres me laisse trotter une question: Pourquoi ne pas placer ton image en background?

J'ai essayé!
J'ai mis

background: url(barre_haut.jpg) center; 

Mais rien

J'ai aussi essayé de la mettre en html, sans css, simplement centrée avec un <center> mais c'est exactement pareil..

Sarait-il possible d'avoir un lien histoire de voir réellement ce que tu comptes faire?

Docxell a écrit :
finalement elle joue un peu un role de background..

Auquel cas il faut la mettre en background. Avec un centrage horizontal via la propriété background-position.

Si cette image a également un contenu informatif (notamment un contenu textuel), il te faut la découper en deux éléments séparés:
- la partie décorative (le «fond») à placer en background;
- la partie informative (le «texte») à placer comme contenu par-dessus ce background (avec un texte alternatif qui va bien, un balisage de titre si c'est un titre, etc.).

PS: merci d'appliquer les recommandations de mise en forme des messages: http://forum.alsacreations.com/help.php#regle13
Tu peux corriger ton premier message: http://forum.alsacreations.com/help.php#regle5

http://docxell.ibelgique.com/accueil.html

Et je ne sais pas pourquoi elle se répète, en local elle ne fait pas ça. (c'est marrant mais dans ce beug, elles sont centrées comme je le voudrait)

Et désolé je vois pas de "éditer" ? :s

Docxell a écrit :
Et désolé je vois pas de "éditer" ? :s

Bouton en haut à droite de ton message. L'intitulé est «éditer». Il a la même tête que le bouton «citer» (sauf pour le texte, bien sûr). Pour les voir, assure-toi d'être connecté sur le forum (boite de connexion en bas à gauche sur la page d'accueil).
Modifié par Florent V. (17 Feb 2009 - 17:46)

Je me disait bien que je n'étais pas sénile, le problème venait de l'identification ^^,

J'ai réussi à le centrer horizontalement.. Mais il se centre aussi verticalement ><
Comment empêcher ça?
Modifié par Docxell (17 Feb 2009 - 21:32)

Bonsoir Docxell,
La propriété background-position te permet de positionner ton image de fond. La 1ère valeur correspond à la position horizontale. Si tu ne donnes qu'une valeur, alors la seconde (verticale, donc) sera 50%.

Donc dans ton cas, si je comprends bien ce que tu veux faire, tu devras écrire quelque chose de ce style:

background: url(barre_haut.jpg) center top; 

La classe internationale, tu as tout réglé ^^
Je ne suis pas encore un pro en css, mais ça viendra !

En attendant merci beaucoup

Un petit [Résolu], peut-être?