CSS : comment centrer l'image avec IE

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : CSS : comment centrer l'image avec IE

yethi

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

Publicité

yethi

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

mIRROR

Chevreuillobolchévik

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

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>page d'accueil</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
a {text-decoration:none;}
#image_accueil
{
display:block;
background-image:url(Image_index2.gif);
width:600px;
height:397px;
position:relative;
margin:auto;
}
a#image_maison
{display:block;
width:400px;
height:357px;
padding-top:357px;
position:absolute;
left:5px;
top:13px;
background:transparent url(maison.gif) no-repeat 600px 397px;
}
a#image_garage
{display:block;
width:254px;
height:279px;
padding-top:279px;
position:absolute;
left:345px;
top:88px;
background:transparent url(garage.gif) no-repeat 600px 397px;
}
a#image_garage:hover, a#image_maison:hover {
background-position: 0 0;
}
#maison, #garage {
visibility:hidden;
width:150px;
color:black;
border:1px solid black;
background-color:lemonchiffon;
font-size:small;
padding:5px;
}
#image_maison:hover #maison {
visibility:visible;
text-decoration:none;
position:absolute;
left:-180px;
top:100px;
display:block;
}
#image_garage:hover #garage {
visibility:visible;
text-decoration:none;
position:absolute;
right:-180px;
top:100px;
}
</style>
</head>
<body>
<dl id="image_accueil">
<dd>
<a id="image_maison" title="La maison" href="Maison/00%20Index_maison.htm" name="image_maison">
<span id="maison">Suivez les étapes de la rénovation de notre maison de 1718.<br>Bonne visite</span>
</a></dd>
<dd>
<a id="image_garage" title="Le garage" href="Moto/00%20Index_moto.htm" name="image_garage">
<span id="garage">Découvrez ma collection de motos avec des modèles de 1925 à 1979.<br>Bonne visite</span>
</a></dd>
</dl>
</body>
</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

yethi

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)

yethi

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

mIRROR

Chevreuillobolchévik

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

gatsu35

Blablaté par Harko

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

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 javascript	CSS 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

Page générée en 0.083 secondes