Menu CSS avec IE
Fermé
cabal
-
22 nov. 2009 à 11:31
reedbedroom Messages postés 80 Date d'inscription lundi 11 juillet 2011 Statut Membre Dernière intervention 1 janvier 2020 - 18 août 2011 à 09:00
reedbedroom Messages postés 80 Date d'inscription lundi 11 juillet 2011 Statut Membre Dernière intervention 1 janvier 2020 - 18 août 2011 à 09:00
Bonjour,
j'ai réalisé une barre de navigation en CSS à base de listes. Ca fonctionne parfaitement sous Firefox mais pas sous Internet Explorer.
Je ne sais pas trop quoi faire, quelqu'un peut m'aider?
Merci
j'ai réalisé une barre de navigation en CSS à base de listes. Ca fonctionne parfaitement sous Firefox mais pas sous Internet Explorer.
Je ne sais pas trop quoi faire, quelqu'un peut m'aider?
Merci
A voir également:
- Menu CSS avec IE
- Menu déroulant excel - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
4 réponses
faboons
Messages postés
273
Date d'inscription
mardi 12 février 2008
Statut
Membre
Dernière intervention
20 janvier 2025
50
22 nov. 2009 à 12:15
22 nov. 2009 à 12:15
Bonjour,
je pense qu'il faudrait que tu sois plus précis :
- Qu'est-ce-qui ne marche pas exactement ?
Donne ton code ou au moins la portion concernée.
Fab.
je pense qu'il faudrait que tu sois plus précis :
- Qu'est-ce-qui ne marche pas exactement ?
Donne ton code ou au moins la portion concernée.
Fab.
Et bien voilà:
La liste reste verticale et les éléments en sous liste qui doivent apparaitre en roll-over ne s'affichent pas.
Voici le code CSS concerné:
#principal {
background:#E0FCC8;
width:794px;
height:30px;
position:absolute;
top:113px;
left:197px;
}
#principal li {
list-style-type:none;
float:left;
width:150;
border-style:dashed;
border-width:1px;
}
#principal li a:link, #principal a:visited{
display:block;
background:#ECFCC8;
margin:0;
padding:5px 6px;
text-decoration:none;
color:black;
height:1%;
}
#principal li a:hover{
background:#A5F95B;
}
#principal .secondaire{
display:none;
list-style-type:none;
margin:0;
padding:0;
border:0;
}
#principal .secondaire li{
float:none;
border:0;
}
#principal .secondaire li a:link,#prinipal .secondaire li a:visited {
display:block;
text-decoration:none;
}
#principal .secondaire li a:hover{
background-color:#A5F95B;
}
#principal li:hover > .secondaire {
display:block;
}
qui s'applique à :
<td height="37" colspan="4" valign="top"><ul id="principal">
<li><a href="#"><img src="images/boutons/general.gif" width="122" height="37"></a>
<ul class="secondaire">
<li>Accueil</li>
<li>Questionnaire</li>
<li>Mail</li>
</ul></li>
<li><a href="#"><img src="images/boutons/electromenager.gif" width="122" height="37"></a>
<ul class="secondaire">
<li>Cafetière</li>
<li>Crêpière</li>
<li>Fer à repasser</li>
<li>Machine à pain</li>
</ul></li>
<li><a href="#"><img src="images/boutons/electronique.gif" width="122" height="37"></a>
<ul class="secondaire">
<li>Cadre numérique</li>
<li>Cadre réveil</li>
<li>Montre</li>
<li>Radio-réveil</li>
</ul>
</li>
<li><a href="#"><img src="images/boutons/vetements.gif" width="122" height="37"></a>
<ul class="secondaire">
<li>Jogging</li>
<li>Manteau</li>
</ul>
</li>
<li><a href="#"><img src="images/boutons/autres.gif" width="122" height="37"></a>
<ul class="secondaire">
<li>Fontaine</li>
<li>Parapluie</li>
<li>Sac à dos</li>
</ul>
</li>
</ul></td>
<td> </td>
</tr>
La liste reste verticale et les éléments en sous liste qui doivent apparaitre en roll-over ne s'affichent pas.
Voici le code CSS concerné:
#principal {
background:#E0FCC8;
width:794px;
height:30px;
position:absolute;
top:113px;
left:197px;
}
#principal li {
list-style-type:none;
float:left;
width:150;
border-style:dashed;
border-width:1px;
}
#principal li a:link, #principal a:visited{
display:block;
background:#ECFCC8;
margin:0;
padding:5px 6px;
text-decoration:none;
color:black;
height:1%;
}
#principal li a:hover{
background:#A5F95B;
}
#principal .secondaire{
display:none;
list-style-type:none;
margin:0;
padding:0;
border:0;
}
#principal .secondaire li{
float:none;
border:0;
}
#principal .secondaire li a:link,#prinipal .secondaire li a:visited {
display:block;
text-decoration:none;
}
#principal .secondaire li a:hover{
background-color:#A5F95B;
}
#principal li:hover > .secondaire {
display:block;
}
qui s'applique à :
<td height="37" colspan="4" valign="top"><ul id="principal">
<li><a href="#"><img src="images/boutons/general.gif" width="122" height="37"></a>
<ul class="secondaire">
<li>Accueil</li>
<li>Questionnaire</li>
<li>Mail</li>
</ul></li>
<li><a href="#"><img src="images/boutons/electromenager.gif" width="122" height="37"></a>
<ul class="secondaire">
<li>Cafetière</li>
<li>Crêpière</li>
<li>Fer à repasser</li>
<li>Machine à pain</li>
</ul></li>
<li><a href="#"><img src="images/boutons/electronique.gif" width="122" height="37"></a>
<ul class="secondaire">
<li>Cadre numérique</li>
<li>Cadre réveil</li>
<li>Montre</li>
<li>Radio-réveil</li>
</ul>
</li>
<li><a href="#"><img src="images/boutons/vetements.gif" width="122" height="37"></a>
<ul class="secondaire">
<li>Jogging</li>
<li>Manteau</li>
</ul>
</li>
<li><a href="#"><img src="images/boutons/autres.gif" width="122" height="37"></a>
<ul class="secondaire">
<li>Fontaine</li>
<li>Parapluie</li>
<li>Sac à dos</li>
</ul>
</li>
</ul></td>
<td> </td>
</tr>
reedbedroom
Messages postés
80
Date d'inscription
lundi 11 juillet 2011
Statut
Membre
Dernière intervention
1 janvier 2020
98
18 août 2011 à 09:00
18 août 2011 à 09:00
Bonjour,
Je rencontre le même problème alors que cela fonctionne sur un autre site sur lequel j'ai appliqué le même code !!
As tu trouvé la solution ? J'ai comme l'impression que cela vient du serveur (hébergeur différent pour les deux sites) mais cela me semble quand même étonnant.
Merci de ton aide.
Je rencontre le même problème alors que cela fonctionne sur un autre site sur lequel j'ai appliqué le même code !!
As tu trouvé la solution ? J'ai comme l'impression que cela vient du serveur (hébergeur différent pour les deux sites) mais cela me semble quand même étonnant.
Merci de ton aide.
