Flux rss
Rechercher : dans
Par : Mots clés Nom d'utilisateur
Messages sans réponse

Positionnement d'image en css..

UchiwaSasuke94, le mardi 6 février 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

1

Gihef, le mardi 6 février 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 mardi 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 mercredi 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 mercredi 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 mercredi 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 dimanche 9 mars 2008 à 20:59:39

Comment positionner une image par rapport à son texte?

Répondre à raquell

4

raquell, le dimanche 9 mars 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 dimanche 9 mars 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 mardi 22 avril 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 mardi 22 avril 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 mardi 22 avril 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 mardi 22 avril 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 mardi 22 avril 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 mardi 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 mardi 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 mardi 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 mercredi 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 mercredi 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 mercredi 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 mercredi 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
Positionner des éléments grâce aux CSS 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... www.commentcamarche.net/contents/css/cssposition.php3
[CSS] superposer texte par apport a une image (Résolu) Salut a tous ! Je voudrais savoir si il etait possible, en CSS, de positionner du texte par apport a une image, mon but est d'eviter que le texte ne se deplace sur la page selon la resolution du visiteur(comme l'image a laquel je veu associer le texte... www.commentcamarche.net/forum/affich-1793610-css-superposer-texte-par-apport-a-une-image
Placement image sur autre image - html/css (Résolu) Bonjour, j'aimerais savoir comment fait on pour positionner une image (un bouton par exemple réalisé sous photoshop) sur une autre image (en html/css). Concretement : j'ai réalisé une feuille de papier sous photoshop et j'aimerais placer en haut à... www.commentcamarche.net/forum/affich-4830813-placement-image-sur-autre-image-html-css
Les CSS pour présenter vos imagesPour 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... www.commentcamarche.net/faq/sujet-9100-les-css-pour-presenter-vos-images
Javascript - Librairies d'effets pour vos imagesAu 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... www.commentcamarche.net/faq/sujet-9314-javascript-librairies-d-effets-pour-vos-images
Css / Positionner Du Textebonjour, J'ai un probleme avec une page HTML avec CSS. J'ai une image d'arrière-plan, je dois positionner du texte precisement dans cette image, a un endroit défini. J'ai utilisé la propriété css "margin". Mais lorsque j'ouvre ma page html dans un... www.commentcamarche.net/forum/affich-1031307-css-positionner-du-texte
[CSS] positionnement d'une imagebonjour a tous voila je suis en train de réaliser une présentation de page html avec les css j'ai pour commencer une bande sur toute la largeur ensuite en dessous une bande composé de 2 parties de meme longueur en dessous j'ai une colonne a gauche... www.commentcamarche.net/forum/affich-1822388-css-positionnement-d-une-image
[CSS & IE7]background-image property (Résolu)Bonjour, Voilà, j'ai un soucis de css avec IE7. Voici une classe typique dans mes CSS : .multipleDossier { padding : 0 0 0 0px; width:20px; height:20px; text-align:right; vertical-align:top; background-color : #E7E7E7; background-image :... www.commentcamarche.net/forum/affich-2633977-css-ie7-background-image-property
Gestion des images en HTMLComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement... www.commentcamarche.net/contents/html/htmlimages.php3