L'image ne centre pas

Résolu
Chazy_chaxxx Messages postés 106 Date d'inscription   Statut Membre Dernière intervention   -  
 sp00m` -
Bonjour à tous,

Je suis en train de rédigé ma page d'accueil mais je n'arrive pas à centrer l'image.

Code sur ma page html :
<body>
<div id="contenu"><img src="logo accueil copie.png" alt="Logo Sound's Wave" width="830" height="310" border="0" align="middle" /></div>
</body>


Code sur ma feuille CSS:
#contenu{
	position:absolute;
	left: 226px;
	top: 270px;
	margin-left: -415x; /* moitié de la largeur de l'image */
	margin-top: -155px; /* moitié de la hauteur de l'image */
	 } 


Pouvez vous m'aider ?
Configuration: Système d'exploitation	Microsoft Windows XP Professionnel
Processeur	x86 Family 15 Model 6 Stepping 4 GenuineIntel ~3401 Mhz
NVIDIA GeForce 7300

15 réponses

  1. Kopros Messages postés 631 Statut Membre 89
     
    Mets les balises <center></center> de part et d'autre de l'image.

    Pour ton css, évite de mettre la position absolute, si le visiteur a une résolution d'écran différent de la tienne ce sera décalé.
    0
  2. notobe Messages postés 2222 Statut Membre 213
     
    <center> est une balise dépréciée. Il ne faut plus l'utiliser.

    C'est l'image ou ton cadre qui ne se centre pas ?
    Car si c'est le cadre, c'est normal : on ne peut pas centrer quelque chose qui est en position absolue.
    0
    1. Kopros Messages postés 631 Statut Membre 89
       
      Ah zut... c'est sur ce forum qu'on m'avait conseillé les <center>, du coup j'en mets partout...
      Bref, merci du conseil ;)
      0
  3. Chazy_chaxxx Messages postés 106 Date d'inscription   Statut Membre Dernière intervention   14
     
    Ben je ne sais pas trop, ça m'est égal en faite. Je voudrais juste que l'image apparaisse au milieu de l'écran peu importe la résolution de l'internaute. Est-ce possible ?
    0
  4. notobe Messages postés 2222 Statut Membre 213
     
    Oui, mais sans position absolue.
    #contenu {
    	margin-left: -415x; /* moitié de la largeur de l'image */
    	margin-top: -155px; /* moitié de la hauteur de l'image */
    	text-align:center;
    	 } 
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. Chazy_chaxxx Messages postés 106 Date d'inscription   Statut Membre Dernière intervention   14
     
    Elle est centrée de gauche à droite mais par contre elle est tellement haute que je ne voit que la moitiée
    0
  7. notobe Messages postés 2222 Statut Membre 213
     
    Là encore c'est normal puisque tu as défini des marges négatives ! Je pensais que c'était voulu.
    Donc, vire tes marges.
    0
  8. Kopros Messages postés 631 Statut Membre 89
     
    et en ajoutant
    position:relative;


    ?
    0
  9. Chazy_chaxxx Messages postés 106 Date d'inscription   Statut Membre Dernière intervention   14
     
    Merci, on se rapproche, elle est entière, centrée mais dans le haut de la page...
    0
  10. notobe Messages postés 2222 Statut Membre 213
     
    Et tu veux qu'elle soit où ? centrée aussi verticalement ?
    0
  11. Chazy_chaxxx Messages postés 106 Date d'inscription   Statut Membre Dernière intervention   14
     
    S'il te plait oui
    0
  12. Kopros Messages postés 631 Statut Membre 89
     
    Je sais pas si marche, tu peux tester de mettre l'image dans un tableau avec une seule cellule (sans bordure), et dans le css du tableau :
    height: 100%;
    width: 100%;
    vertical-align: middle;
    text-align: center;
    0
  13. Chazy_chaxxx Messages postés 106 Date d'inscription   Statut Membre Dernière intervention   14
     
    Et ca serait plus facile de la descendre seulement de qq pixel ? ça me conviendrait amplement
    0
  14. Kopros Messages postés 631 Statut Membre 89
     
    Bien sûr tu peux définir un espace en px entre ton image et le haut de la page, pour ça tu fais :
    top : 100px;
    pour qu'il y ait un espace de 100, par exemple. (la plupart des propriétés css sont ici : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3 )
    Mais c'est pas très propre comme code, et si un utilisateur est en 800*600, l'image sera collée en bas, et pour un autre avec une résolution vachement plus grande que la tienne, l'image sera collée en haut.

    Si tu veux je te file le code que je ferais à ta place :
    HTML :
    <table border="0" id="img_centre">
         <tr><td>
              <img src="logo accueil copie.png" alt="Logo Sound's Wave" />
         </td></tr>
    </table>


    CSS :
    #img_centre{
         height: 100%;
         width: 100%;
         vertical-align: middle;
         text-align: center;
    }


    Voilà t'as plus qu'à faire un copier coller. (j'ai pas testé)
    0
  15. Chazy_chaxxx Messages postés 106 Date d'inscription   Statut Membre Dernière intervention   14
     
    L'image ne s'affichait par, je me contente d'un centrage verticale. Merci les gars...
    0
    1. sp00m`
       
      Pour centrer une image verticalement et horizontalement, tu as peut-être cette solution (je considère une image de 600*400):

      Code HTML:

      <div id="id-pour-mon-image">&nbsp;</div>


      Code CSS:

      #id-pour-mon-image {
              position: absolute;
              background: #fff url("lien/vers/ton/image.png") top left no-repeat;
              width: 600px;
              height: 400px;
              top: 50%;
              left: 50%;
              margin-left: -300px; /* moins la moitié de la largeur de l'image */
              margin-top: -200px; /* moins la moitié de la heuteur de l'image */
      }
      0