Display:block, problème d'image avec IE.

Signaler
Messages postés
58
Date d'inscription
dimanche 2 mars 2008
Statut
Membre
Dernière intervention
20 septembre 2012
-
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
-
Bonsoir,

J'ai besoin d'aide concernant la position des images avec IE. Je m'explique ...

[u]Voici mon code HTML concernant un menu aligné à l'horizontal dans un bloc
/u :

[i]




[# Image DS]
[# Lien 1]
[# Lien 2]
[# Lien 3]
[# Lien 4]
[# Lien 5]
[# Lien 6]




/i

_____ Comme vous pouvez le constater, j'ai créé un bloc
pour arranger mon menu en 2 parties bien distinctes______

Voici mon code CSS pour l'amélioration du code source :


[i]#menu_haut_2 {width:600px;
height:106px;
float:left;
margin-left:395px;
font-family:Tahoma, Arial, "Times New Roman";
font-size:12px;
text-align:center;
border:0px #FFFFFF none}


#menu_haut_2 a{
[color= purple] display:block;
/*Pour que le "bloc" soit un vrai bloc*/
float:left;
/*Pour que les blocs soient alignés horizontalement (essayez de l'enlever pour voir)*/
[b]width:14%;
/*Un menu avec 7 liens => 100 / 7 = 14,28% - 1% = 13,28 (à cause de IE)/b.*/
height:55px;
/*La même hauteur que notre menu*/
text-align:center;
padding:0px;
/*Pour que les liens soient centrés par rapport à l'horizontale*/
text-decoration:none;
color:#CCCCCC}

#menu_haut_2 a, #menu_haut_2 a:visited
/*on utilisera les propriétés qui suivront sur les liens dans menu, et les liens visités dans menu*/
{
color:#CCCCCC;
/*la couleur*/
[b]text-align:center;
/*on le centre horizontalement*//b
padding-top:50px;
text-decoration:none;
font-family:Tahoma, Arial, "Times New Roman";
font-size:12px;
font-style:normal;
font-weight:normal}

#menu_haut_2 a:hover, #menu_haut_2 a:visited:hover
/*on utilisera les propriétés qui suivront sur les liens survolés dans menu, et les liens survolés et visités dans menu*/
{
color:#FF0000;
/*la couleur*/
text-decoration:none;
background-image:url(main.png); [color =purple][b](mon carré)
background-repeat:no-repeat;
background-position:center;/b/color
font-family:Tahoma, Arial, "Times New Roman";
font-size:12px;
font-style:normal;
font-weight:normal;
/*on enlève le soulignement du lien*/}


.lien_centre {text-align:center}/i/color

_____ Comme vous pouvez le constater, j'explique clairement mon attention de créer un menu horizontal du faite de faire apparaitre une image lorsque je passe sur un lien. Dans ce cas ci, mon image est un carré gris qui apparait bien centré avec FireFox mais qui se positionne tout à fait en haut avec Internet explorer...ce qui coupe le carré en 2 !______

Comment procéder pour que mon image soit centrée dans le bloc, dans mon display:block avec IE et FF en même temps ?

Avez vous des solution a proposer ? en html ? en css ? en javascript ? en php ?

Merci d'avance

[i]Cordialement
Darksam/i

2 réponses

Messages postés
3874
Date d'inscription
mardi 8 mars 2005
Statut
Modérateur
Dernière intervention
7 novembre 2014
11
Salut,

Pour un problème CSS/javascript, merci de poster dans un thème approprié.

[ Déplacé sur javascriptfr.com]
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
Bonjour,

>>Comme vous pouvez le constater, j'explique clairement
>>mon attention de créer un menu horizontal
euh... oui ? enfin... si vous le dites !

>>du faite de faire apparaitre une image
>>lorsque je passe sur un lien.
>>Comment procéder pour que mon image soit centrée dans le bloc,
pas d'image dans ce que vous nous faites voir si ?

par contre, des choses disons "curieuses" !!!!
_ un div, dans un div
_ #menu_haut_2 a, #menu_haut_2 a:visited
#menu_haut_2 a:hover, #menu_haut_2 a:visited:hover
???? sûr de vous sur ce coup là ?

et plus probablement : doctype !?
[i]si on ne parle pas d'un version IE qui date
d'avant la guerre ! IE8, enfin, au moins IE7 !
/i
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
voire
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Cordialement [mon Site] [M'écrire] Bul