Rechercher : dans
Par :

Positionnement d'image en css..

Dernière réponse le 6 mai 2009 à 13:06:55 UchiwaSasuke94, le 6 fév 2007 à 20:44:35 
 Signaler ce message aux modérateurs

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.
Configuration: Windows XP
Firefox 1.5.0.9

Meilleures réponses pour « Positionnement d'image en css.. » dans :
Positionner des éléments grâce aux CSS Voir Il est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Javascript - Librairies d'effets pour vos images VoirAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
Changer l'aspect du curseur en CSS VoirLa propriété cursor permet de changer l'aspect du curseur sur un élément d'une page web. Le client affichera automatiquement le curseur de son ordinateur qui correspond au type de curseur que vous aurez choisi. Exemples Liste des attributs...

1

Gihef, le 6 fév 2007 à 21:43:02
  • +1

Bonjour,

“center” ?
“position” ne s'utilise pas comme ça : http://www.yoyodesign.org/doc/w3c/css2/visuren.html#choose-p­osition

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;
  }

 

Répondre à Gihef

14

pyschopathe, le 5 mai 2009 à 13:08:59

Voui, ou

.baniere {
   background-image: url(images/baniere.png);
   width:690px;
   height:140px;
   margin:auto;
  }

Répondre à pyschopathe

15

arthezius, le 6 mai 2009 à 01:55:36

Comme je disais, margin:auto; fonctionne pas avec IE6. « La recherche commence là où s'arrête la connaissance. »

Répondre à arthezius

17

pyschopathe, le 6 mai 2009 à 10:01:50

Scuz, pas vu que le sujet était si vieux, les posts ne s'affichaient pas ! Et merci pour l'info.

Répondre à pyschopathe

18

farouk, le 6 mai 2009 à 10:09:07

Pas grave mais bon si tu es au courant de ma demande je suis preneur !!!

Répondre à farouk

3

raquell, le 9 mar 2008 à 20:59:39

Comment positionner une image par rapport à son texte?

Répondre à raquell

4

raquell, le 9 mar 2008 à 21:04:50

<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épondre à raquell

5

magichit, le 9 mar 2008 à 21:30:47

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épondre à magichit

6

korytion, le 22 avr 2008 à 09:25:28

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épondre à korytion

7

korytion, le 22 avr 2008 à 09:33:07

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épondre à korytion

8

korytion, le 22 avr 2008 à 09:33:15

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épondre à korytion

9

warlix, le 22 avr 2008 à 09:37:06

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

la tristesse c est de ne pas savoir que l on est heureux !

Répondre à warlix

10

korytion, le 22 avr 2008 à 09:41:35

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épondre à korytion

11

farouk, le 5 mai 2009 à 00:16:51

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

Répondre à farouk

12

arthezius, le 5 mai 2009 à 00:43:56

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; « La recherche commence là où s'arrête la connaissance. »

Répondre à arthezius

13

farouk, le 5 mai 2009 à 05:33:22

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)

Répondre à farouk

16

farouk, le 6 mai 2009 à 09:33:18

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épondre à farouk

19

arthezius, le 6 mai 2009 à 11:29:52

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 « La recherche commence là où s'arrête la connaissance. »

Répondre à arthezius

20

farouk, le 6 mai 2009 à 12:50:44

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é

Répondre à farouk

21

 arthezius, le 6 mai 2009 à 13:06:55

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. « La recherche commence là où s'arrête la connaissance. »

Répondre à arthezius