CSS : comment centrer l'image avec IE

CSS : comment centrer l'image avec IE - HTML/CSS - Programmation

Marsh Posté le 24-06-2006 à 14:08:26    

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
 

Reply

Marsh Posté le 24-06-2006 à 14:08:26   

Reply

Marsh Posté le 24-06-2006 à 14:12:28    

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

Reply

Marsh Posté le 24-06-2006 à 19:42:16    

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
Reply

Marsh Posté le 25-06-2006 à 09:29:52    

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)

Reply

Marsh Posté le 25-06-2006 à 10:02:38    

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 ???

Reply

Marsh Posté le 25-06-2006 à 14:25:47    

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

Reply

Marsh Posté le 25-06-2006 à 19:22:05    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed