rss
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

Positionnement d'image en css..

Posté par UchiwaSasuke94, le mardi 6 février 2007 à 20:44:35
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
Répondre à UchiwaSasuke94  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Gihef, le mardi 6 février 2007 à 21:43:02
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

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
raquell, le dimanche 9 mars 2008 à 20:59:39
comment positionner une image par rapport à son texte?
Répondre à raquell

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
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


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
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


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
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


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
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


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
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


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
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


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 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
Logiciels pertinents trouvés dans les téléchargements
Télécharger Image Resizer 1Image Resizer - Petit utilitaire (PowerToy) basique, très simple, permettant de réduire la taille d'une image, dans le but, notamment, de...Catégorie: Graphisme
Licence: Freeware/gratuit
Télécharger VSO Image Resizer 2.0.1.9VSO Image Resizer - Le logiciel VSO Image Resizer organise vos photos en réduisant leur résolution et en les déplaçant facilement au sein de...Catégorie: Graphisme
Licence: Freeware/gratuit
Télécharger ImageWell 3.5.3ImageWell - ImageWell n'est pas à proprement parler un logiciel de Retouche photo. Il permet plutôt de préparer des images pour le...Catégorie: Retouche photo
Licence: Freeware/gratuit
Télécharger ImagePlay  0.3ImagePlay - Si vous n'êtes pas un pro dans la manipulation des brushes et autres outils de retouche d'images, adoptez ImagePlay et voyez...Catégorie: Retouche photo
Licence: Open Source
Plus de logiciels gratuits sur « Positionnement d'image en css.. »