Création
d'entreprise
Posez votre question Signaler

Positionnement d'image en css..

UchiwaSasuke94 - Dernière réponse le 14 août 2011 à 16:29
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.
Lire la suite 

Positionnement d'image en css »

22 réponses
Réponse
+6
moins plus
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.
Ajouter un commentaire
Réponse
+5
moins plus
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;
  }

pyschopathe- 6 mai 2009 à 10:01
Scuz, pas vu que le sujet était si vieux, les posts ne s'affichaient pas ! Et merci pour l'info.
farouk - 6 mai 2009 à 10:09
pas grave mais bon si tu es au courant de ma demande je suis preneur !!!
billal_la_barbera - 14 août 2011 à 16:29
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 .
Ajouter un commentaire
Réponse
+2
moins plus
<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.
Ajouter un commentaire
Réponse
+2
moins plus
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
Ajouter un commentaire
Réponse
+2
moins plus
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
Ajouter un commentaire
Réponse
+2
moins plus
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
Ajouter un commentaire
Réponse
+2
moins plus
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 :

http://files.codes-sources.com/fichier_fullscreen.aspx?id=36693&f=defilement.swf
Ajouter un commentaire
Réponse
+2
moins plus
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 !!!
Ajouter un commentaire
Réponse
+2
moins plus
Essaie ça:

body
{
background: url("images/baniere.png");
background-repeat: no repeat;
width:690px;
height:140px;
background-position: top center;
}
Ajouter un commentaire
Réponse
+1
moins plus
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
Ajouter un commentaire
Réponse
+1
moins plus
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
Ajouter un commentaire
Réponse
+1
moins plus
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
farouk - 6 mai 2009 à 12:50
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é
arthezius- 6 mai 2009 à 13:06
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.
Ajouter un commentaire
Réponse
+0
moins plus
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;
farouk - 5 mai 2009 à 05:33
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 :

http://files.codes-sources.com/fichier_fullscreen.aspx?id=36693&f=defilement.swf

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)
Ajouter un commentaire
Réponse
-1
moins plus
comment positionner une image par rapport à son texte?
Ajouter un commentaire
Ce document intitulé « Positionnement d'image en css.. » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?