[CSS] Problème d'affichage menus IE6 et IE7
Résolu
VinX
-
hackman -
hackman -
Bonjour,
J'ai un problème d'affichage de menu sous IE6 et IE7, bien que ce soit parfait avec Firefox et que mon code passe la validation de www.validome.org .
L'affichage sous Internet Explorer dysfonctionne dans les cas suivants :
1. La couleur du menu de gauche ne va pas jusqu'en bas de l'écran (height: 100% ne semble pas pris en compte).
2. Lorsque les sous menus sont ouverts (ex : documentation), on voit en transparence le texte de la boîte "contenu" derrière. Normalement c'est opaque (sous Firefox, c'est obtenu avec le critère z-index attribué à chaque classe).
3. Position:fixed n'est pas géré par IE6. Il faut que je me penche d'avantage sur les solutions déjà proposées ici et ailleurs. Pour l'instant j'ai ajouté au css :
html>body .menu {
position: fixed;
}
Je ne peux malheureusement pas mettre la page en ligne car c'est pour un intranet. Par contre le code est reproduit ci-dessous.
Un immense merci à tous ceux qui m'aideront !
Voici le code html :
Et voici le css :
Merci à tous,
VinX
J'ai un problème d'affichage de menu sous IE6 et IE7, bien que ce soit parfait avec Firefox et que mon code passe la validation de www.validome.org .
L'affichage sous Internet Explorer dysfonctionne dans les cas suivants :
1. La couleur du menu de gauche ne va pas jusqu'en bas de l'écran (height: 100% ne semble pas pris en compte).
2. Lorsque les sous menus sont ouverts (ex : documentation), on voit en transparence le texte de la boîte "contenu" derrière. Normalement c'est opaque (sous Firefox, c'est obtenu avec le critère z-index attribué à chaque classe).
3. Position:fixed n'est pas géré par IE6. Il faut que je me penche d'avantage sur les solutions déjà proposées ici et ailleurs. Pour l'instant j'ai ajouté au css :
html>body .menu {
position: fixed;
}
Je ne peux malheureusement pas mettre la page en ligne car c'est pour un intranet. Par contre le code est reproduit ci-dessous.
Un immense merci à tous ceux qui m'aideront !
Voici le code html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Page d'aide à l'utilisateur</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>
<script type="text/javascript">
//--------------- LOCALIZEABLE GLOBALS---------------
var d=new Date();
monthname= new Array("janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = d.getDate() + " " + monthname[d.getMonth()] + " " + d.getFullYear();
//--------------- END LOCALIZEABLE ---------------
</script>
</head>
<body>
<div id="logo"> </div>
<div id="bandeau" class="entete"><br>Application </div>
<div id="menu" class="menu">
<script type="text/javascript">
preChargement();
</script>
<dl>
<dt><span style="text-align: center"><a href="../index.html" title="Retour à la page d'accueil">Accueil</a></span></dt>
</dl>
<dl><dt > </dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu9');"><a href="../presentation.html">Présentation</a></dt>
<dd id="smenu9" onmouseover="javascript:montre('smenu9');" onmouseout="javascript:montre();">
<ul>
<li><a href="../historique.html">Historique</a></li>
<li><a href="../divers.html">Divers</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');"><a href="../formation.html">Formation</a></dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
<ul>
<li><a href="../mars.html">Séance du 13 mars</a></li>
<li><a href="../ateliers.html">Ateliers de formation</a></li>
<li><a href="../indiv.html">Formations individuelles</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');"><a href="../documentation.html">Documentation</a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<ul>
<li><a href="../lexique.html">Lexique</a></li>
<li><a href="#">Interface</a></li>
<li><a href="#">Enregistrement</a></li>
<li><a href="../vpn.html">VPN</a></li>
<li><a href="#">OFPC</a></li>
<li><a href="#">Facturation</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');"><a href="../faq.html">FAQ</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
<ul>
<li><a href="../interface.html">Interface</a></li>
<li><a href="../inscriptions.html">Inscriptions</a></li>
<li><a href="../finances.html">Finances</a></li>
<li><a href="../courrier.html">Courrier</a></li>
<li><a href="../listes.html">Listes</a></li>
<li><a href="../autre.html">Autre</a></li>
</ul>
</dd>
</dl>
<dl> <dt > </dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Informations</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
<ul>
<li><a href="../nouveautes.html">Nouveautés</a></li>
<li><a href="../stat.html">Statistiques</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu5');">Téléchargements</dt>
<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
<ul>
<li><a href="../formulaires.html">Formulaires</a></li>
<li><a href="../administration.html">Administration</a></li>
</ul>
</dd>
</dl>
<dl> <dt > </dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="../liens.html" title="liens utiles">Liens</a></dt>
</dl>
<dl>
<dt><a href="../qui.html" title="personnes ressources">A qui s'adresser ?</a></dt>
</dl>
<dl> <dt > </dt>
</dl>
<dl>
<dt><span style="text-align: center"><a href="../contact.html" title="Pour contacter les responsables du site">Contact</a></span></dt>
</dl>
<p><a href="http://www.validome.org/referer"><img style="border:none"
src="http://www.validome.org/images/set4/valid_html_4_0_1.gif"
alt="Valid HTML 4.01" width="80" height="15"></a></p>
</div>
<div id="dateformat" class="dateformat">
<script type="text/javascript">document.write(TODAY);</script>
</div>
<div id="contenu">
<h1>Accueil</h1>
<p> <a href="lien">Application 2.0</a></p>
<p>Bienvenu dans l'espace de support de l'application 2.0</p>
<p>Nunc ergo conscientia exterritus apprehendit Caecilium Celerem, mox Fabium Iustum; rogat ut me sibi reconcilient. Nec contentus pervenit ad Spurinnam; huic suppliciter, ut est cum timet abiectissimus: 'Rogo mane videas Plinium domi, sed plane mane - neque enim ferre diutius sollicitudinem possum -, et quoquo modo efficias, ne mihi irascatur.' 9 Evigilaveram; nuntius a Spurinna: 'Venio ad te.' 'Immo ego ad te.' Coimus in porticum Liviae, cum alter ad alterum tenderemus. Exponit Reguli mandata, addit preces suas, ut decebat optimum virum pro dissimillimo, parce. Cui ego: 'Dispicies ipse quid renuntiandum Regulo putes. 10 Te decipi a me non oportet. Exspecto Mauricum' - nondum ab exsilio venerat -: 'ideo nihil alterutram in partem respondere tibi possum, facturus quidquid ille decreverit; illum enim esse huius consilii ducem, me comitem decet.' 11 Paucos post dies ipse me Regulus convenit in praetoris officio; illuc persecutus secretum petit; ait timere se ne animo meo penitus haereret, quod in centumvirali iudicio aliquando dixisset, cum responderet mihi et Satrio Rufo: 'Satrius Rufus, cui non est cum Cicerone aemulatio et qui contentus est eloquentia saeculi nostri'. 12 Respondi nunc me intellegere maligne dictum quia ipse confiteretur, ceterum potuisse honorificum existimari. 'Est enim' inquam 'mihi cum Cicerone aemulatio, nec sum contentus eloquentia saeculi nostri; 13 nam stultissimum credo ad imitandum non optima quaeque proponere. Sed tu qui huius iudicii meministi, cur illius oblitus es, in quo me interrogasti, quid de Metti Modesti pietate sentirem ? ' Expalluit notabiliter, quamvis palleat semper, et haesitabundus: 'Interrogavi non ut tibi nocerem, sed ut Modesto.' Vide hominis crudelitatem, qui se non dissimulet exsuli nocere voluisse. 14 Subiunxit egregiam causam: 'Scripsit' inquit 'in epistula quadam, quae apud Domitianum recitata est: "Regulus, omnium bipedum nequissimus"'; quod quidem Modestus verissime scripserat. 15 Hic fere nobis sermonis terminus; neque enim volui progredi longius, ut mihi omnia libera servarem dum Mauricus venit. Nec me praeterit esse Regulum 'dyskathaireton'; est enim locuples factiosus, curatur a multis, timetur a pluribus, quod plerumque fortius amore est. 16 Potest tamen fieri ut haec concussa labantur; nam gratia malorum tam infida est quam ipsi. Verum, ut idem saepius dicam, exspecto Mauricum. Vir est gravis prudens, multis experimentis eruditus et qui futura possit ex praeteritis providere. Mihi et temptandi aliquid et quiescendi illo auctore ratio constabit. 17 Haec tibi scripsi, quia aequum erat te pro amore mutuo non solum omnia mea facta dictaque, verum etiam consilia cognoscere. Vale.</p>
<p>Vous trouverez ici toute aide utile, en particulier dans les sections <a href="documentation.html">Documentation</a> et <a href="faq.html">FAQ</a> (Foire Aux Questions). </p>
</div>
</body>
</html>
Et voici le css :
#bandeau{
border-style:none;
height:69px;
background-color: #CC0066;
z-index: 3;
}
#logo {
position:absolute;
background-image: url(images/formcontlogo.gif);
background-repeat: no-repeat;
height: 69px;
width: 177px;
padding: 0;
z-index: 4;
}
#menu {
position:fixed;
top: 0px;
width: 160px;
height: 100%;
padding-top: 100px;
background-color: #CC0066;
z-index: 2;
}
html>body .menu {
position: fixed;
}
dl, ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dt {
cursor: pointer;
margin: 2px;
padding-left: 5px;
height: 20px;
line-height: 20px;
font-weight: bold;
border: hidden;
}
#menu dt a {
color: #ffffff;
display: block;
border: 0 none;
height: 100%;
}
#menu dt a:hover {
background: #ffffff;
color: #CC0066;
}
#menu dd {
background: #CC0066;
border: 1px solid black;
list-style-type: none;
position: absolute;
left: 6em;
margin-top: -1.5em;
width: 10em;
}
#menu li {
margin: 0;
padding-left: 25px;
list-style-type: none;
}
#menu li a {
color: #ffffff;
font: 12px, Verdana,Arial,sans-serif;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover {
background: #ffffff;
color: #CC0066;
}
#dateformat {
position:absolute;
left:0px;
top:70px;
}
#contenu{
position:absolute;
top: 100px;
left: 248px;
width: 600px;
font:15px Arial, Helvetica, sans-serif;
text-align:justify;
z-index: 1;
}
/* CLASSES */
body{
font-family: Verdana,Arial,sans-serif;
background-color:#FFFFFF;
border:none;
margin:0;
}
a:link, a:hover, a:visited {
color: #CC0066;
text-decoration: none;
}
.dateformat {
font: 12px Arial, Helvetica, sans-serif;
color: #CC0066;
letter-spacing:0.2em;
padding-left: 200px;
padding-top:5px;
}
.image {
float: left;
}
.entete {
font-family: Verdana, Arial, sans-serif;
font-size: 120%;
font-weight:bold;
color: #ffffff;
padding-left: 250px;
}
.menu {
display:block;
font: 14px, Verdana,Arial,sans-serif;
line-height: 1.55;
color: #ffffff;
}
titre, h1, h2, h3, h4, h5, h6 {
font-family: Verdana,Arial,sans-serif;
margin: 0px;
padding: 0px;
}
.titre {
font-family: Verdana, Arial, sans-serif;
font-size: 120%;
color: #ffffff;
}
.h1 {
font-family: Verdana, Arial, sans-serif;
font-size: 120%;
color: #ffffff;
}
.h2 {
font-size: 100%;
color: #CC0066;
}
.contenu1{
font-weight:bold;
}
.contenu2{
padding-left: 30px;
}
Merci à tous,
VinX
A voir également:
- [CSS] Problème d'affichage menus IE6 et IE7
- Affichage double ecran - Guide
- Problème affichage fenêtre windows 10 - Guide
- Windows 11 affichage classique - Guide
- Thunderbird problème affichage message - Forum Thunderbird
- Problème affichage facebook ✓ - Forum Facebook
9 réponses
J'ai résolu mon nouveau point 4. pour IE7.
endif n'étant pas entre crochets dans <![endif]--> à cause d'une insertion étrange du code là où je l'ai trouvé :
https://forum.alsacreations.com/topic-23-9224-1-Positionfixed-pour-IE-6.html
Le bon code est le suivant :
Et donc les points 2 et 3 sont officiellement résolus avec cet usage de java.
Il rest le point 1 :
1. La couleur du menu de gauche ne va pas jusqu'en bas de l'écran (height: 100% ne semble pas pris en compte).
url de test : https://www.unige.ch/formcont/test
Merci beaucoup pour vos participations,
Salutations à tous,
VinX
endif n'étant pas entre crochets dans <![endif]--> à cause d'une insertion étrange du code là où je l'ai trouvé :
https://forum.alsacreations.com/topic-23-9224-1-Positionfixed-pour-IE-6.html
Le bon code est le suivant :
<!--[if IE 6]>
<style type="text/css">
#menu{
position: absolute;
top:expression(documentElement.scrollTop+body.scrollTop);
}
body {
background: url(null) fixed;
} </style>
<![endif]-->
Et donc les points 2 et 3 sont officiellement résolus avec cet usage de java.
Il rest le point 1 :
1. La couleur du menu de gauche ne va pas jusqu'en bas de l'écran (height: 100% ne semble pas pris en compte).
url de test : https://www.unige.ch/formcont/test
Merci beaucoup pour vos participations,
Salutations à tous,
VinX
Bonjour,
1. Tu peux contourner ça en définissant la même couleur dans le <body> et en gardant le #fff dans le #contenu (dans l'autre sens donc)
2. Essaye
3. Des pistes : https://forum.alsacreations.com/topic-23-9224-1-Positionfixed-pour-IE-6.html
1. Tu peux contourner ça en définissant la même couleur dans le <body> et en gardant le #fff dans le #contenu (dans l'autre sens donc)
2. Essaye
background-color : #CC0066;plutôt que
background: #CC0066;
3. Des pistes : https://forum.alsacreations.com/topic-23-9224-1-Positionfixed-pour-IE-6.html
Bonjour,
Merci beaucoup pour vos nombreuses réponses. Avant de répondre à mon tour et de vous faire part de mes tests, voici un rappel des problèmes (pour éviter de scroller vers le haut) :
1. La couleur du menu de gauche ne va pas jusqu'en bas de l'écran (height: 100% ne semble pas pris en compte).
2. Lorsque les sous menus sont ouverts (ex : documentation), on voit en transparence le texte de la boîte "contenu" derrière. Normalement c'est opaque (sous Firefox, c'est obtenu avec le critère z-index attribué à chaque classe).
3. Position:fixed n'est pas géré par IE6. Il faut que je me penche d'avantage sur les solutions déjà proposées ici et ailleurs. Pour l'instant j'ai ajouté au css :
html>body .menu {
position: fixed;
}
Gihef :
1. En inversant body et #contenu, ça ne rend pas ce que je cherche : il y a un espace entre le contenu et le menu qui doit rester blanc, en inversant les couleurs, la dominante est #CC0066, ce qui n’est pas l’effet recherché.
2. J’ai testé les différents backgrounds suggérés sans succès hélas.
3. Là, un immense merci pour ton lien :
https://forum.alsacreations.com/topic-23-9224-1-Positionfixed-pour-IE-6.html
J’ai trouvé tout en bas un code que je reproduis ici :
Ceci règle les points 2 et 3 ... Sous IE6.
Serge_La : Merci beaucoup de t’être penché sur le problème. Je préfère éviter l’usage de tableaux sans réelle nécessité.
Txiki : Merci pour ton exemple de menu intéressant à décortiquer et les liens.
En résumé : la solution proposée me convient pour les points 2 et 3, même si cela utilise du javascript.
Nouveau problème posé, IE7 refuse d'ouvrir le document avec cette ligne de code... Donc ça règle le problème pour IE6 mais en pose un nouveau pour IE7 ???!!!
Le point 1 reste non résolu. Je continue de m’y pencher. Toute idée est la bienvenue et un ENORME merci à tous les contributeurs qui m’ont permis de régler les points 2 et 3.
Rappel :
1. La couleur du menu de gauche ne va pas jusqu'en bas de l'écran (height: 100% ne semble pas pris en compte).
4. comment régler le bug de IE7 par rapport aux nouvelles lignes de code en java (cf. ci-dessus)
L’url de test : https://www.unige.ch/formcont/test
Avec mes meilleures salutations à toute l’équipe dynamique du forum Commentcamarche.net !
VinX
Merci beaucoup pour vos nombreuses réponses. Avant de répondre à mon tour et de vous faire part de mes tests, voici un rappel des problèmes (pour éviter de scroller vers le haut) :
1. La couleur du menu de gauche ne va pas jusqu'en bas de l'écran (height: 100% ne semble pas pris en compte).
2. Lorsque les sous menus sont ouverts (ex : documentation), on voit en transparence le texte de la boîte "contenu" derrière. Normalement c'est opaque (sous Firefox, c'est obtenu avec le critère z-index attribué à chaque classe).
3. Position:fixed n'est pas géré par IE6. Il faut que je me penche d'avantage sur les solutions déjà proposées ici et ailleurs. Pour l'instant j'ai ajouté au css :
html>body .menu {
position: fixed;
}
Gihef :
1. En inversant body et #contenu, ça ne rend pas ce que je cherche : il y a un espace entre le contenu et le menu qui doit rester blanc, en inversant les couleurs, la dominante est #CC0066, ce qui n’est pas l’effet recherché.
2. J’ai testé les différents backgrounds suggérés sans succès hélas.
3. Là, un immense merci pour ton lien :
https://forum.alsacreations.com/topic-23-9224-1-Positionfixed-pour-IE-6.html
J’ai trouvé tout en bas un code que je reproduis ici :
<style type="text/css">
#menu{position: fixed;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#menu{
position: absolute;
top:expression(documentElement.scrollTop+body.scrollTop);
}
body {
background: url(null) fixed ; /* évite le sautillement */
} </style>
<! endif-->
Ceci règle les points 2 et 3 ... Sous IE6.
Serge_La : Merci beaucoup de t’être penché sur le problème. Je préfère éviter l’usage de tableaux sans réelle nécessité.
Txiki : Merci pour ton exemple de menu intéressant à décortiquer et les liens.
En résumé : la solution proposée me convient pour les points 2 et 3, même si cela utilise du javascript.
Nouveau problème posé, IE7 refuse d'ouvrir le document avec cette ligne de code... Donc ça règle le problème pour IE6 mais en pose un nouveau pour IE7 ???!!!
Le point 1 reste non résolu. Je continue de m’y pencher. Toute idée est la bienvenue et un ENORME merci à tous les contributeurs qui m’ont permis de régler les points 2 et 3.
Rappel :
1. La couleur du menu de gauche ne va pas jusqu'en bas de l'écran (height: 100% ne semble pas pris en compte).
4. comment régler le bug de IE7 par rapport aux nouvelles lignes de code en java (cf. ci-dessus)
L’url de test : https://www.unige.ch/formcont/test
Avec mes meilleures salutations à toute l’équipe dynamique du forum Commentcamarche.net !
VinX
Le site peut être testé ici : https://www.unige.ch/formcont/test
Finalement le problème ne persiste que pour IE6, pas pour IE7.
Toute suggestion est la bienvenue, merci d'avance.
VinX
Finalement le problème ne persiste que pour IE6, pas pour IE7.
Toute suggestion est la bienvenue, merci d'avance.
VinX
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Je vois le défaut.
Sur IE, il déclare une erreur ici:
line 77
char 5
object expected
je n'ai pas le temps de regarder plus en détail maintenant, je vais y revenir plus tard.
Sur IE, il déclare une erreur ici:
line 77
char 5
object expected
je n'ai pas le temps de regarder plus en détail maintenant, je vais y revenir plus tard.
Une autre solution serait d'utiliser une table pour encadrer le tout. Une cellule pour la gauche, une autre pour la droite. Le reste de ton code demeure inchangé.
Salut a tous, en voici un (a adapter a ton menu):
/***** menu CSS *****/
body { /* police et taille de toutes les pages */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
}
.ikurrina { /* position du drapeau basque */
padding-left: 10px;
}
.home { /* position des logo pour versions et retour accueil */
padding-left: 30px;
}
.menu { /* couleur du mot dans le menu */
color:#FFFFFF;
font-size:1em;
font-family:Arial,Verdana;
padding:0px;
/* width et margin sont au cas où le javascript est désactivé. */
width:15em;
margin:1em;
}
.ssmenu {
background-color:#FFFFFF; /* couleur de l'arrière plan du sous-menu */
border: 1px solid #CB0000;
color:#0000FF;
font-size:12px;
font-family:Arial,Verdana;
padding:0px;
width:15em; /* width et margin sont au cas où le javascript est désactivé. */
margin:1em;
}
/* .menu = les cases toujours visibles (comme Fichier, Edition... dans un logiciel) */
.menu {
text-align:center; /*le texte est centré dans le bouton */
font-weight: bold;
background-image: url("../images/fond-vert.gif"); /* couleur d'arrière plan du menu */
}
.menu span, .ssmenu span {
/* Ne pas toucher
C'est pour cacher les ; en fin de <li>, ce qui permet aux synthèse vocales de prendre une
pause dans l'élocution */
display:none;
}
.ssmenu ul,.ssmenu li{
/* Ne pas trop toucher.
Les items (les <li>) des sous-menus, notamment pour enlever les puces des liste */
padding:0;
margin:0;
list-style-type:none;
}
.menu a, .menu a:visited { /* Les liens qui ne sont pas sous le curseur. */
color: #FFFFFF;
padding:2px;
text-decoration:none;
font-family:Arial,Verdana;
/* Ne pas modifier le block */
display:block;
/* Ne pas toucher ces 2 lignes */
margin:0px;
width:100%;
}
.ssmenu a, .ssmenu a:visited { /* Les liens qui ne sont pas sous le curseur. */
color:#0000FF;
padding:2px;
text-decoration:none;
font-family:Arial,Verdana;
/* Ne pas modifier le block */
display:block;
/* Ne pas toucher ces 2 lignes */
margin:0px;
width:100%;
}
.ssmenu a, .ssmenu a:visited {
padding-left:5px;
}
html>body .menu a, html>body .menu a:visited, html>body .menu a:hover, html>body .menu a:active,
html>body .ssmenu a, html>body .ssmenu a:visited, html>body .ssmenu a:hover, html>body .ssmenu a:active {
width:auto;
}
.ssmenu ul:hover, .ssmenu a:hover, .ssmenu a:focus, .menu a:hover, .menu a:focus {
/* Les liens sous le curseur. On change les couleurs du texte et de fond, et on enlève le soulignement.*/
background-image: url("../images/fond-rouge.gif");
color:#FFFFFF;
text-decoration:none;
font-family:Arial,Verdana;
margin:0px;
width:100%;
}
img {
/* Si on met une image dans un lien (par exemple un logo à gauche du lien), pas de bordure
car c'est vilain :-p */
border:none;
}
.ssmenu img {
/* un petit espacement entre l'image et le texte du lien <a href="..."><img.../>blabla</a> */
margin-right:8px;
}
.ssmenu img.hr {
margin-top:1px;
margin-bottom:1px;
margin-left:0;
margin-right:0;
width:100%;
height:1px;
display:block;
}
Tiré du site de iubitus (excellents scripts de toutes sortes).
Celui la vient de mon site http://www.abarka.eu
Voir aussi: exemple de script deroulant
Bonne chance !
/***** menu CSS *****/
body { /* police et taille de toutes les pages */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
}
.ikurrina { /* position du drapeau basque */
padding-left: 10px;
}
.home { /* position des logo pour versions et retour accueil */
padding-left: 30px;
}
.menu { /* couleur du mot dans le menu */
color:#FFFFFF;
font-size:1em;
font-family:Arial,Verdana;
padding:0px;
/* width et margin sont au cas où le javascript est désactivé. */
width:15em;
margin:1em;
}
.ssmenu {
background-color:#FFFFFF; /* couleur de l'arrière plan du sous-menu */
border: 1px solid #CB0000;
color:#0000FF;
font-size:12px;
font-family:Arial,Verdana;
padding:0px;
width:15em; /* width et margin sont au cas où le javascript est désactivé. */
margin:1em;
}
/* .menu = les cases toujours visibles (comme Fichier, Edition... dans un logiciel) */
.menu {
text-align:center; /*le texte est centré dans le bouton */
font-weight: bold;
background-image: url("../images/fond-vert.gif"); /* couleur d'arrière plan du menu */
}
.menu span, .ssmenu span {
/* Ne pas toucher
C'est pour cacher les ; en fin de <li>, ce qui permet aux synthèse vocales de prendre une
pause dans l'élocution */
display:none;
}
.ssmenu ul,.ssmenu li{
/* Ne pas trop toucher.
Les items (les <li>) des sous-menus, notamment pour enlever les puces des liste */
padding:0;
margin:0;
list-style-type:none;
}
.menu a, .menu a:visited { /* Les liens qui ne sont pas sous le curseur. */
color: #FFFFFF;
padding:2px;
text-decoration:none;
font-family:Arial,Verdana;
/* Ne pas modifier le block */
display:block;
/* Ne pas toucher ces 2 lignes */
margin:0px;
width:100%;
}
.ssmenu a, .ssmenu a:visited { /* Les liens qui ne sont pas sous le curseur. */
color:#0000FF;
padding:2px;
text-decoration:none;
font-family:Arial,Verdana;
/* Ne pas modifier le block */
display:block;
/* Ne pas toucher ces 2 lignes */
margin:0px;
width:100%;
}
.ssmenu a, .ssmenu a:visited {
padding-left:5px;
}
html>body .menu a, html>body .menu a:visited, html>body .menu a:hover, html>body .menu a:active,
html>body .ssmenu a, html>body .ssmenu a:visited, html>body .ssmenu a:hover, html>body .ssmenu a:active {
width:auto;
}
.ssmenu ul:hover, .ssmenu a:hover, .ssmenu a:focus, .menu a:hover, .menu a:focus {
/* Les liens sous le curseur. On change les couleurs du texte et de fond, et on enlève le soulignement.*/
background-image: url("../images/fond-rouge.gif");
color:#FFFFFF;
text-decoration:none;
font-family:Arial,Verdana;
margin:0px;
width:100%;
}
img {
/* Si on met une image dans un lien (par exemple un logo à gauche du lien), pas de bordure
car c'est vilain :-p */
border:none;
}
.ssmenu img {
/* un petit espacement entre l'image et le texte du lien <a href="..."><img.../>blabla</a> */
margin-right:8px;
}
.ssmenu img.hr {
margin-top:1px;
margin-bottom:1px;
margin-left:0;
margin-right:0;
width:100%;
height:1px;
display:block;
}
Tiré du site de iubitus (excellents scripts de toutes sortes).
Celui la vient de mon site http://www.abarka.eu
Voir aussi: exemple de script deroulant
Bonne chance !
Tous les problèmes sont RESOLUS.
Résumé :
1. La couleur du menu de gauche ne va pas jusqu'en bas de l'écran (height: 100% ne semble pas pris en compte).
-> RESOLU En ajoutant dans le CSS :
html, body {height: 100%;}
Solution trouvé ici :
https://forum.alsacreations.com/topic-4-23620-1-Le-fameux-quotHeight100quot-ma-berne.html
Fonctionne sous Firefox, IE6 et IE7.
2. Lorsque les sous menus sont ouverts (ex : documentation), on voit en transparence le texte de la boîte "contenu" derrière. Normalement c'est opaque (sous Firefox, c'est obtenu avec le critère z-index attribué à chaque classe).
3. Position:fixed n'est pas géré par IE6. Il faut que je me penche d'avantage sur les solutions déjà proposées ici et ailleurs.
Points 2 et 3 RESOLUS grâce au lien suivant :
https://forum.alsacreations.com/topic-23-9224-1-Positionfixed-pour-IE-6.html
Posté par Gihef que je remercie.
Il faut ajouter le code suivant dans le html :
Les problèmes sont ainsi résolus et l'affichage satisfaisant pour les points 1, 2 et 3.
Un grand merci à tous et très très bonne continuation à toute l'équipe de commentcamarche.net
VinX
PS
Descriptif du problème dispo ici aussi :
https://forum.alsacreations.com/topic-2-23408-1-RESOLU-Affichage-de-menu-aberrant-sous-IE6.html
Résumé :
1. La couleur du menu de gauche ne va pas jusqu'en bas de l'écran (height: 100% ne semble pas pris en compte).
-> RESOLU En ajoutant dans le CSS :
html, body {height: 100%;}
Solution trouvé ici :
https://forum.alsacreations.com/topic-4-23620-1-Le-fameux-quotHeight100quot-ma-berne.html
Fonctionne sous Firefox, IE6 et IE7.
2. Lorsque les sous menus sont ouverts (ex : documentation), on voit en transparence le texte de la boîte "contenu" derrière. Normalement c'est opaque (sous Firefox, c'est obtenu avec le critère z-index attribué à chaque classe).
3. Position:fixed n'est pas géré par IE6. Il faut que je me penche d'avantage sur les solutions déjà proposées ici et ailleurs.
Points 2 et 3 RESOLUS grâce au lien suivant :
https://forum.alsacreations.com/topic-23-9224-1-Positionfixed-pour-IE-6.html
Posté par Gihef que je remercie.
Il faut ajouter le code suivant dans le html :
<!--[if IE 6]>
<style type="text/css">
#menu{
position: absolute;
top:expression(documentElement.scrollTop+body.scrollTop);
}
body {
background: url(null) fixed;
} </style>
<![endif]-->
Les problèmes sont ainsi résolus et l'affichage satisfaisant pour les points 1, 2 et 3.
Un grand merci à tous et très très bonne continuation à toute l'équipe de commentcamarche.net
VinX
PS
Descriptif du problème dispo ici aussi :
https://forum.alsacreations.com/topic-2-23408-1-RESOLU-Affichage-de-menu-aberrant-sous-IE6.html