[edit]
Voir le troisième message de ce sujet pour la solution.
========================
Bonjour,
j'ai développé un menu entièrement en CSS. Il fonctionne parfaitement sous FF (je test avec), mais bug complètement sous IE7 ! Google ayant beau être mon amis, ça m'a pas beaucoup avancé : tout les menu que j'ai vu sont sensiblement différent du miens qui décale les liens en dessous ou afficher les sous menu. Alors je me retourne vers vous...
Un exemple vaut mieux qu'un long discours, alors voici le lien [supprimé] (j'éditerai avec le vrai lien si c'est pas considéré comme du spam d'url).
Alors en fait, j'utilise aussi en partie le PHP pour repérer les rubriques où se trouve le visiteur et ainsi afficher le menu adequat. Mais le soucis ne viens pas de là puisque ça fonctionne sous FF et le PHP est côté serveur.
Pour le principe, j'ai un div par partie, contenant :
-- lien vers une partie
-- liens vers les sous parties
Mon div est initialement de taille limité avec un overflow caché. Et j'augmente sa taille avec un :hover.
Voici donc un résumé de ma structure html. Les partie entre croché {$sel_xx} sont des variables Smarty (template PHP) et doivent donc être ignoré 
.
<div id="Titre" class="MenuFrance{$sel_1}">
<a href="/10.htm" id="TitreCase" class="MenuFrance{$sel_1}" > France</a>
<a href="/11.htm" class="MenuPrincipalPoliceSS{$sel_11}" > National</a>
<a href="/12.htm" class="MenuPrincipalPoliceSS{$sel_12}" > Régional</a>
</div>
<div id="Titre" class="MenuEurope{$sel_2}">
<a href="/20.htm" id="TitreCase" class="MenuEurope{$sel_2}"> Europe</a>
<a href="/21.htm" class="MenuPrincipalPoliceSS{$sel_21}"> Politique</a>
<a href="/22.htm" class="MenuPrincipalPoliceSS{$sel_22}"> Économie</a>
</div>
<div id="Titre" class="MenuAsie{$sel_3}">
<a href="/30.htm" id="TitreCase" class="MenuAsie{$sel_3}"> Asie</a>
<a href="/31.htm" class="MenuPrincipalPoliceSS{$sel_31}"> Russie</a>
<a href="/32.htm" class="MenuPrincipalPoliceSS{$sel_32}"> Moyen Orient</a>
<a href="/33.htm" class="MenuPrincipalPoliceSS{$sel_33}"> Orient</a>
<a href="/34.htm" class="MenuPrincipalPoliceSS{$sel_34}"> Extrême Orient</a>
</div>
|
Puis l'extrait de mon cade CSS:
#Titre {
position: relative;
clear: left;
float: left;
height: 24px;
overflow: hidden;
background-position: center;
}
#Titre.MenuFrance {
background-image: url(/images/fond_1.gif);
}
#Titre.MenuFrance:hover,#Titre.MenuFranceSel,#Titre.MenuFranceSelRub {
height: 52px;
}
#Titre.MenuEurope {
background-image: url(/images/fond_2.gif);
}
#Titre.MenuEurope:hover,#Titre.MenuEuropeSel,#Titre.MenuEuropeSelRub {
height: 52px;
}
#Titre.MenuAsie {
background-image: url(/images/fond_3.gif);
}
#Titre.MenuAsie:hover,#Titre.MenuAsieSel,#Titre.MenuAsieSelRub {
height: 80px;
}
#TitreCase {
position: relative;
clear: left;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
text-align: center;
width: 137px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
height: 23px;
line-height: 23px;
letter-spacing: 1px;
left: 1px;
}
#TitreCase:hover {
color: #000000;
background-color: #FFFFCC;
border-right: 1px solid #FFFFCC;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}
#TitreCase.MenuFranceSel,#TitreCase.MenuEuropeSel,#TitreCase.MenuAsieSel {
position: relative;
color: #000000;
text-align: center;
background-color: #FFFFCC;
border-right: 1px solid #FFFFCC;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}
#TitreCase.MenuFrance,#TitreCase.MenuFranceSelRub {
color: #000000;
}
#TitreCase.MenuEurope,#TitreCase.MenuEuropeSelRub {
color: #000000;
}
#TitreCase.MenuAsie,#TitreCase.MenuAsieSelRub {
color: #000000;
} .MenuPrincipalPoliceSS {
position: relative;
clear: left;
float: left;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 13px;
font-style: normal;
text-decoration: none;
text-transform: none;
width: 137px;
background-color: #CCCCCC;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
text-align: center;
margin-left: 1px;
}
.MenuPrincipalPoliceSSSel {
clear: left;
float: left;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 13px;
font-style: normal;
text-decoration: none;
text-transform: none;
width: 137px;
background-color: #FFFFCC;
border-right: 1px solid #FFFFCC;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
text-align: center;
margin-left: 1px;
}
.MenuPrincipalPoliceSS:hover {
color: #000000;
background-color: #FFFFCC;
border-right: 1px solid #FFFFCC;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}
|
Alors le comprtement est très bizarre sous IE7 (des lien s'effacent au survole de la souris) et j'ai eu beau modifier plein de paramêtre, ça n'a rien changé...
Merci beaucoup à celui/celle/ceux qui pourront y comprendre quelque chose !
Message édité par Eldusole le 10-04-2009 à 15:39:12
FORUM HardWare.fr
