Positionnement d'image en css.. Fermé

Question

Bonjour a tous,

Alors voila j'ai tout simplement un problèeme de positionnement de mon image qui devrait être placer en haut au centre de ma page mais reste tout de même en haut a gauche...

Voila mon code css :

.baniere {
   background: url("images/baniere.png");
   width:690px;
   height:140px;
   position:top center;
  }

Et pour ma page Html :

<div class="baniere"> </div>

L'image s'affiche bien mais en haut a gauche alors qu'elle devrait être en haut et centrer.

Alors si quelqu'un aurait une solution ça serait sympas de me la proposer.

L'image s'affiche bien mais en haut a gauche alors qu'elle devrait être en haut et centrer. Alors si quelqu'un aurait une solution ça serait sympas de me la proposer.

Gihef · Accepted Answer

Bonjour,

“center” ?
“position” ne s'utilise pas comme ça : http://www.yoyodesign.org/doc/w3c/css2/visuren.html#choose-position

Ne pourrais-tu pas nous proposer le code de la page entière ?

En attendant, essaye.baniere {
   position : absolute;
   background-image: url(images/baniere.png);
   width:690px;
   height:140px;
   left : 50%;
   margin-left : -345px;
  }

raquell · Answer

comment positionner une image par rapport à son texte?

raquell · Answer

voilà je voudrais mettre l image de ma page d'accueil en plein milieu ,un peu en dessous des différents blocs qui composent le menu. rien à faire elle ne bouge ni ne descned que dois-je faire?parce qu'elle reste collée aux blocs.et c est très disgracieux.

magichit · Answer

la balise
en dessous des blocs permet d'aller à la ligne et le devrait marcher. tu peut supprimer : bottom="400px" ça ne veut rien dire. Le meilleur moyen pour positionner des éléments dans une pag web c'est le css en jouant sur les propriétés margin, padding et position. Ca vaut le coup css et c'est presque indispensable. Un autre moyen sans css c'est de tout placer dans les cellules d'un tableau

	MES MENUS

ou encore plus fort utiliser "spacer.gif" Il faut créer un gif transparent de 1px pour 'décaler' un élément en ajustant sa taille.

Ici une image invisible de 220px va pousser l'image suivante d'autant de pixels.

korytion · Answer

la balise n'est pas standard ni recommande par le w3c pour centrer n'importe quel document en css2.0 tu dois faire margin-left : auto; margin-left : auto; ou .banniere { margin : 0 auto; // aucune marge autour de l'element ni en haut, bas, gauche, droite background-image: url(images/baniere.png); width:690px; height:140px; } .banniere { margin-left : auto; margin-right : auto; background-image: url(images/baniere.png); width:690px; height:140px; } ces règles sont standards cependant, si ça ne marche pas met à jour ton navigateur. et teste aussi cette solution sur ie car malheureusement microsoft ne respecte pas les normes

korytion · Answer

rebonjour
desole j'ai pas fais gaffe

pour centrer n'importe quel document en css2.0 tu dois faire
margin-left : auto;
margin-right : auto; 

si tu as des questions tu tapes korytion dans google et tu cliques sur le premier lien ensuite tu vas dans le forum et tu poses n'importe quel question je tenterai d'y repondre.

Sa serai dommage que le forum soit là pour rien faut remplir la table phpbb user

et puis bon courage

korytion · Answer

la balise n'est pas standard ni recommande par le w3c pour centrer n'importe quel document en css2.0 tu dois faire margin-left : auto; margin-left : auto; ou .banniere { margin : 0 auto; // aucune marge autour de l'element ni en haut, bas, gauche, droite background-image: url(images/baniere.png); width:690px; height:140px; } .banniere { margin-left : auto; margin-right : auto; background-image: url(images/baniere.png); width:690px; height:140px; } ces règles sont standards cependant, si ça ne marche pas met à jour ton navigateur. et teste aussi cette solution sur ie car malheureusement microsoft ne respecte pas les normes

warlix · Answer

salut

je ne veux pas dire de bétise , mais cela ne sert à rien de faire

margin-left et margin-rigth


margin: auto;

suffit largement pour centre automatiquement une image

text-align: center;

pour les textes

Par défaut l'image sera en haut donc pas besoin de le préciser
sauf si tu as mis un padding-top ou/et un margin-top

korytion · Answer

pour répondre à l'email, margin : auto; est largement suffisant pour centre un modele de boite ou image

je mettais seulement un deuxième exemple car il est tout à fait possible de faire margin-left : auto; et margin-right : auto; pour obtenir le même résultat.

voilà c'est tout mais ton information est tout à fait pertinente

farouk · Answer

bonjour mes amis, j'ai un petit problème et je bloque, comment puis-je faire pour créer sur mon site:

 www.maamrifarouk.com 

Un "" DÉFILEMENT D'IMAGES AU PASSAGE DU CURSEUR"".De sorte à ce que mes images défilent vers la gauche ou la droite en fonction de l'emplacement du curseur sur une des extrémités...

exactement comme sur cette page je voudrai le même résultat : 

https://codes-sources.commentcamarche.net/

arthezius · Answer

margin:auto; n'est pas pris en compte par IE6. Il vaut donc mieux mettre l'élément dans un

et lui appliquer un text-align:center;

farouk · Answer

arthezius mais je ne suis pas celui qui à mis margin: auto, je suis une autre personne qui à demandé comment faire pour faire défiler des photos de gauche à droite ou de droite à gauche en fonction de l'emplacement du curseur !!!

arthezius · Answer

Si j'ai pas répondu sur cettequestion c'est que honnêtement je sais pas. doit y avoir moyen de faire ça en javascript.
Après une petite recherche, j'ai trouvé ça: http://www.commentcamarche.net/forum/affich 1375677 script defilement d image

Zephir432 · Answer

Essaie ça:  

 body  
 {  
   background: url("images/baniere.png");  
   background-repeat: no repeat;
   width:690px;  
   height:140px;  
   background-position: top center;  
  }

Positionnement d'image en css..

14 réponses

Discussions similaires