Une navigation horizontale devenue verticale
novicecertes
-
burnedsyn Messages postés 174 Statut Membre -
burnedsyn Messages postés 174 Statut Membre -
Bonjour ;
Nouveau, novice, ça fait beaucoup de handicaps, je sais ^_^
J'ai réalisé tout récemment un petit site pour ma compagne, en suivant quelques tutoriaux et en m'inspirant, pour le menu (horizontal déroulant sur une ligne en css ; l'une des rubriques contient un sous-menu), de codes communiqués sur ce site. Ma compagne me fait part de deux soucis, que je n'ai évidemment pas constatés sur Safari (je suis sur Mac), ni sur FireFox, Opera, Camino ou Seamonkey...
Sur IE (5,6 ou 7), le menu et le sous-menu sont en bleu, alors que je les ai définis en noir dans la feuille de styles.
Plus problématique : les mêmes menus apparaissent en vertical au lieu d'être sur une ligne comme spécifié (malgré un "display:inline"...).
Je vous retranscris ici le code HTML pour la navigation :
[/code]
<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>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="montre('smenu1');"><a href="pros.html"
title="Construisez et suivez vos chantiers avec nous">Professionnels</a></dt>
<dd id="smenu1">
<ul>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu2');"><a href="particuliers.html"
title="Reposez-vous sur nous pour vos travaux !">Particuliers</a></dt>
<dd id="smenu2">
<ul>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu3');"><a href="references.html"
title="Ils nous ont choisi... Jugez par vous-même">Nos
réalisations</a></dt>
<dd id="smenu3">
<ul>
<li><a href="construction.html">construction</a></li>
<li><a href="renovation.html">rénovation</a></li>
<li><a href="agrand.html">agrandissement</a></li>
<li><a href="agencement.html">agencement</a></li>
<li><a href="suivi.html">suivi complet</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu4');"><a href="partenaires.html"
title="Nous partageons nos compétences">Nos
partenaires</a></dt>
<dd id="smenu4">
<ul>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu5');"><a href="contact.html"
title="Devis, appels d'offres, infos... : contactez-nous">Nos
coordonnées</a></dt>
<dd id="smenu5">
<ul>
</ul>
</dd>
</dl>
<dl>
</dl>
</div>
[/code]
Et voici pour les CSS :
[code]
dt, dl, dd, ul, li {
list-style-type : none;
padding : 0;
}
#menu {
position : absolute;
left : 46px;
top : 135px;
color: #000;
}
#menu dl {
float : left;
border-left : 3px solid #c4ab9b;
}
#menu li {
display : inline;
}
#menu a {
text-align : justify;
font-family : Helvetica, MS Georgia, sans-serif;
font-size : 120%;
font-weight : bold;
padding-left : 10px;
padding-right : 10px;
width : 850px;
text-decoration: none;
color: #000;
}
#menu a:hover {
color : #c4ab9b;
}
#smenu1, #smenu2, #smenu3, #smenu4 {
position : absolute;
left : 0;
font-family : Helvetica, MS Georgia, sans-serif;
text-align : center;
font-size : 72%;
font-weight : bold;
width : 800px;
}
[/code]
Cette histoire de menu qui ne s'affiche pas comme il le devrait me désespère (les couleurs aussi, pourtant chez moi c'est bien en noir...).
Merci pour votre aide !
Nouveau, novice, ça fait beaucoup de handicaps, je sais ^_^
J'ai réalisé tout récemment un petit site pour ma compagne, en suivant quelques tutoriaux et en m'inspirant, pour le menu (horizontal déroulant sur une ligne en css ; l'une des rubriques contient un sous-menu), de codes communiqués sur ce site. Ma compagne me fait part de deux soucis, que je n'ai évidemment pas constatés sur Safari (je suis sur Mac), ni sur FireFox, Opera, Camino ou Seamonkey...
Sur IE (5,6 ou 7), le menu et le sous-menu sont en bleu, alors que je les ai définis en noir dans la feuille de styles.
Plus problématique : les mêmes menus apparaissent en vertical au lieu d'être sur une ligne comme spécifié (malgré un "display:inline"...).
Je vous retranscris ici le code HTML pour la navigation :
[/code]
<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>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="montre('smenu1');"><a href="pros.html"
title="Construisez et suivez vos chantiers avec nous">Professionnels</a></dt>
<dd id="smenu1">
<ul>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu2');"><a href="particuliers.html"
title="Reposez-vous sur nous pour vos travaux !">Particuliers</a></dt>
<dd id="smenu2">
<ul>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu3');"><a href="references.html"
title="Ils nous ont choisi... Jugez par vous-même">Nos
réalisations</a></dt>
<dd id="smenu3">
<ul>
<li><a href="construction.html">construction</a></li>
<li><a href="renovation.html">rénovation</a></li>
<li><a href="agrand.html">agrandissement</a></li>
<li><a href="agencement.html">agencement</a></li>
<li><a href="suivi.html">suivi complet</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu4');"><a href="partenaires.html"
title="Nous partageons nos compétences">Nos
partenaires</a></dt>
<dd id="smenu4">
<ul>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu5');"><a href="contact.html"
title="Devis, appels d'offres, infos... : contactez-nous">Nos
coordonnées</a></dt>
<dd id="smenu5">
<ul>
</ul>
</dd>
</dl>
<dl>
</dl>
</div>
[/code]
Et voici pour les CSS :
[code]
dt, dl, dd, ul, li {
list-style-type : none;
padding : 0;
}
#menu {
position : absolute;
left : 46px;
top : 135px;
color: #000;
}
#menu dl {
float : left;
border-left : 3px solid #c4ab9b;
}
#menu li {
display : inline;
}
#menu a {
text-align : justify;
font-family : Helvetica, MS Georgia, sans-serif;
font-size : 120%;
font-weight : bold;
padding-left : 10px;
padding-right : 10px;
width : 850px;
text-decoration: none;
color: #000;
}
#menu a:hover {
color : #c4ab9b;
}
#smenu1, #smenu2, #smenu3, #smenu4 {
position : absolute;
left : 0;
font-family : Helvetica, MS Georgia, sans-serif;
text-align : center;
font-size : 72%;
font-weight : bold;
width : 800px;
}
[/code]
Cette histoire de menu qui ne s'affiche pas comme il le devrait me désespère (les couleurs aussi, pourtant chez moi c'est bien en noir...).
Merci pour votre aide !
A voir également:
- Une navigation horizontale devenue verticale
- Navigation privée - Guide
- Barre verticale clavier - Forum Windows
- Supprimer les données de navigation - Guide
- Ligne horizontale word - Guide
- Comment retirer les barres verticales de réexpédition ✓ - Forum MacOS
