Positionnement d'image en css.. [Fermé]

Signaler
-
 billal_la_barbera -
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.
Afficher la suite

14 réponses

Réponse 1 / 14
Messages postés
5121
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
 2 671
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;
  }

Merci
14
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 62248 internautes nous ont dit merci ce mois-ci

Signaler
Messages postés
1965
Date d'inscription
dimanche 2 mars 2008
Statut
Membre
Dernière intervention
22 mars 2010
 120
Voui, ou 
.baniere {
   background-image: url(images/baniere.png);
   width:690px;
   height:140px;
   margin:auto;
  }
Signaler
Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
 446 >
Messages postés
1965
Date d'inscription
dimanche 2 mars 2008
Statut
Membre
Dernière intervention
22 mars 2010
Comme je disais, margin:auto; fonctionne pas avec IE6.
Signaler
Messages postés
1965
Date d'inscription
dimanche 2 mars 2008
Statut
Membre
Dernière intervention
22 mars 2010
 120 >
Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
Scuz, pas vu que le sujet était si vieux, les posts ne s'affichaient pas ! Et merci pour l'info.
Signaler
>
Messages postés
1965
Date d'inscription
dimanche 2 mars 2008
Statut
Membre
Dernière intervention
22 mars 2010
pas grave mais bon si tu es au courant de ma demande je suis preneur !!!
Signaler

voici la solution : (deux propositions)

code css:
margin-left : 90px; /*marge extérieure à gauche.*/
ou:
code css:
margin-top : 90px; /*marge extérieure en haut.*/ donc l'une des deux .
Réponse 2 / 14

la balise <br /> en dessous des blocs permet d'aller à la ligne et le <center></center> 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
<table width="100%">
<tr>
<!--- PREMIERE LIGNE DU TABLEAU -->
<td width="1%">
<!--- PREMIERE COLONNE DU TABLEAU RESTE VIDE -->
</td>
<td width="98%">
<!--- 2EME COLONNE CONTIENT LE MENU -->
<div >
MES MENUS
</div>
</td>
<td width="1%">
<!--- 3EME COLONNE DU TABLEAU RESTE VIDE -->
</td>
</tr>
<tr>
<!--- 2eme LIGNE DU TABLEAU on recommence tout les colonnes suivront en conservant la même tille(98% pour celle du centre)-->
<td>
</td>
<td>
<img src="" />
</td>
<td>
</td>

</tr>
</table>

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.
<img src="images/spacer.gif" width="220px" height="1px" /><img src="images/carte de dakar.jpg" />
Ici une image invisible de 220px va pousser l'image suivante d'autant de pixels.
Réponse 3 / 14

<center><img src="images/carte de dakar.jpg" height="250px" width="600px" bottom="400px"></center>

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.
Réponse 4 / 14

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/
Réponse 5 / 14

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
Réponse 6 / 14

la balise <center></center> 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
Réponse 7 / 14

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
Réponse 8 / 14
Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
 446
margin:auto; n'est pas pris en compte par IE6.
Il vaut donc mieux mettre l'élément dans un <p></p> et lui appliquer un text-align:center;
Signaler

ou est ce que j'ai utilisé l'élément ""margin: auto"" dans la publication de mes images la façon et le rendu le plus proche de ce que je recherche c'est celle que j'ai en ce moment sur mon site mais j'aimerai crée le rendu que je vous ai envoyé par un lien dans mon message précédent qui est :

https://codes-sources.commentcamarche.net/

dans ma page php , mon code pour afficher mes images defilante est:

<p><marquee onmouseover="this.start()" onmouseout="this.stop()"behavior="scroll" direction="right" scrollamount="15" scrolldelay="5" loop="-1"><img src="photos/0/0.png" width="964" height="417" border="0">
</marquee></p></td></tr></table></td></tr></table>

mais je suis sure que pour un DÉFILEMENT D'IMAGES AU PASSAGE DU CURSEUR. avec Flash, le code doit être différent.Sachant que j'ai rassemblé toutes mes images en une seul (collée l'une après l'autre, ce qui donne une taille d'image panoramique)
Réponse 9 / 14

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 !!!
Réponse 10 / 14
Messages postés
32
Date d'inscription
mercredi 26 mai 2010
Statut
Membre
Dernière intervention
9 septembre 2010
 3
Essaie ça:

body
{
background: url("images/baniere.png");
background-repeat: no repeat;
width:690px;
height:140px;
background-position: top center;
}
Réponse 11 / 14

la balise <center></center> 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
Réponse 12 / 14
Messages postés
1202
Date d'inscription
mercredi 25 juillet 2007
Statut
Contributeur
Dernière intervention
21 février 2009
 278
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
Réponse 13 / 14
Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
 446
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
Signaler

OK je regarde ça, j'étais déjà tombé sur cette page mais je ne pense pas qu'elle correspondait à la recherche que j'avais lancé
Signaler
Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
 446 > farouk
C'est ce qu'il me semble aussi mais j'ai pas eu le temps de chercher autre chose pour le moment et j'ai que ça.
Réponse 14 / 14

comment positionner une image par rapport à son texte?
Posez votre question