Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1904 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS : comment centrer l'image avec IE

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

CSS : comment centrer l'image avec IE

n°1394139
yethi
Posté le 24-06-2006 à 14:08:26  profilanswer
 

Bonjour à tous
 
Recemment je me suis fait quelque peu fait charrier sur la page d'accueil de mon site perso en JS (http://perso.orange.fr/yethy/)  
 
Je suis donc passé au CSS en esperant pouvoir obtenir exactement le même resultat  
 
C'est du repompage integral de http://www.eniris.com/index.php/20 [...] -maps#nogo
 
Premier constat : il y a encore des difference entre explorateur notamment au niveau du centrage de l'image.
 
L'image est bien centré avec Opera et FireFox mais pas avec IE : pourquoi
 
Comment faire pour l'affichage des boites de part et d'autre de l'image (comme j'avais reussit à faire en JS....)
 
Merci d'avance
 

mood
Publicité
Posté le 24-06-2006 à 14:08:26  profilanswer
 

n°1394141
yethi
Posté le 24-06-2006 à 14:12:28  profilanswer
 

excusez moi voici l'adresse de mes test en CSS  ://perso.orange.fr/yethy/test%20CSS2.htm

n°1394266
mIRROR
Chevreuillobolchévik
Posté le 24-06-2006 à 19:42:16  profilanswer
 

bon j ai du un peu bidouiller et ca marche partout
(enfin aprtout ou j ai essayé quoi  :D )

 
Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
  2. <html>
  3. <head>
  4. <title>page d'accueil</title>
  6. <style type="text/css">
  8. * {
  9.   margin:0;
  10.   padding:0;
  11. }
  13. a {text-decoration:none;}
  15. #image_accueil
  16.          {
  17.        display:block;
  18.           background-image:url(Image_index2.gif);
  19.           width:600px;
  20.           height:397px;
  21.           position:relative;
  22.           margin:auto;
  23.          }
  24. a#image_maison
  25.          {display:block;
  26.           width:400px;
  27.           height:357px;
  28.           padding-top:357px;
  29.           position:absolute;
  30.           left:5px;
  31.           top:13px;
  32.           background:transparent url(maison.gif) no-repeat 600px 397px;
  33.          }
  34.        
  35. a#image_garage
  36.          {display:block;
  37.           width:254px;
  38.           height:279px;
  39.           padding-top:279px;
  40.           position:absolute;
  41.           left:345px;
  42.           top:88px;
  43.           background:transparent url(garage.gif) no-repeat 600px 397px;
  44.          }
  45.        
  46. a#image_garage:hover, a#image_maison:hover {
  48.   background-position: 0 0;
  50.         }
  53. #maison, #garage {
  55.   visibility:hidden;
  56.   width:150px;
  57.   color:black;
  58.   border:1px solid black;
  59.   background-color:lemonchiffon;
  60.   font-size:small;
  61.   padding:5px;
  63. }
  65. #image_maison:hover #maison {
  67.   visibility:visible;
  68.   text-decoration:none;
  69.   position:absolute;
  70.   left:-180px;
  71.   top:100px;
  72.   display:block;
  74. }
  76. #image_garage:hover #garage {
  78.   visibility:visible;
  79.   text-decoration:none;
  80.   position:absolute;
  81.   right:-180px;
  82.   top:100px;
  84. }
  86. </style>
  87. </head>
  88. <body>
  89. <dl id="image_accueil">
  90. <dd>
  91. <a id="image_maison" title="La maison" href="Maison/00%20Index_maison.htm" name="image_maison">
  92.   <span id="maison">Suivez les étapes de la rénovation de notre maison de 1718.<br>Bonne visite</span>
  93. </a></dd>
  94. <dd>
  95. <a id="image_garage" title="Le garage" href="Moto/00%20Index_moto.htm" name="image_garage">
  96. <span id="garage">Découvrez ma collection de motos avec des modèles de 1925 à 1979.<br>Bonne visite</span>
  97. </a></dd>
  98. </dl>
  99. </body>
  100. </html>

 


edit:
en tout cas bravo pour ton effort j espere que tu te rends compte que ton code est plus beau


Message édité par mIRROR le 24-06-2006 à 19:44:58
n°1394361
yethi
Posté le 25-06-2006 à 09:29:52  profilanswer
 

Effectivement ça sent beaucoup moins la bidouille que mes precedents essais en JS !!!
Maintenant que je suis sûr : il y a des possibilités tres interressantes en CSS
Avant je voyait ca uniquement pour faire des belles presentations avec du texte et des images (genre PAO) !!!
Donx Mirror merci beaucoup pour le temps que tu as passé sur mon site perso : je voulais qu'il soit beau pour pouvoir attaquer sereinement un autre site "grand public" (> sur les motos de collections)

n°1394362
yethi
Posté le 25-06-2006 à 10:02:38  profilanswer
 

Pour en revenir a ma question initiale et apres avoir regardé de près le code de Mirror je constate que pour que l'image soit centrée sous IE il suffisait de rajouter  a{text-decoration:none;}  
pour que ca soit ok !!! Là franchement il fallait le savoir !!
Pourquoi un  background-position:center ne fonctionnait pas ???

n°1394434
mIRROR
Chevreuillobolchévik
Posté le 25-06-2006 à 14:25:47  profilanswer
 

non ce n est pas cela ca c est juste pour que les boites de texte ne soient pas soulignees (si t as un bon timing tu peux mettre ta souris dessus et tu verras qu elles sont cliquables)
c est le bloc
 
* {
margin:0;
padding:0;
}
 
parce que les navigateurs ont des marges specifiques pour chaque type de bloc avec ca tu mets touts les elements de tous les navigateurs sur la meme valeur
 
tu ne peux pas centrer un background car il se place relativement a son conteneur. c est lui qu il faut centrer

n°1394578
gatsu35
Blablaté par Harko
Posté le 25-06-2006 à 19:22:05  profilanswer
 

un background ca se centre dans un élément :  
backgorund-position : horizontal vertical  
 
ex : backgorund-position : left top
backgorund-position : center top
backgorund-position : center center
backgorund-position : right center


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS : comment centrer l'image avec IE

 

Sujets relatifs
CSS et IE: Marges sous les images // Firefox: chargement en 2 temps[Résolu]Alignement CSS
Affichage aléatoire d'une image de fond[CSS] hover avec des images? Positionnement, FF, IE
faire bouger une image en javascriptCSS lien image
répertoire de l'image smalltalk (visualworks)Custom Trac / Casse tête CSS
Créer un formulaire afin d'uploader une image 
Plus de sujets relatifs à : CSS : comment centrer l'image avec IE

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.064 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)