Menus CSS = problème
Paloma
-
Gihef Messages postés 5165 Statut Contributeur -
Gihef Messages postés 5165 Statut Contributeur -
Bonjour, je souhaite créer une page en CSS, et y incorporer deux menus :
-Un menu principal horizontal, situé juste en dessous du titre de ma page,
-Un menu secondaire vertical, situé sur la gauche de ma page.
J'ai créé une page CSS, avec plusieurs blocs, et incorporé mes menus, mais le menu principal (situé dans un bloc d'entête), s'est calqué sur la forme du menu secondaire, et je ne sais pas comment les décoller.
Est ce que le problème vient du texte CSS contenu dans la balise head ? Ou est-ce que ce sont les blocs (HTML) qui posent problème ?
Si quelqu'un pouvait m'aider à résoudre mon problème, ce serait très gentil. :-)
voici mon script :
<html>
<head>
<style type="text/css">
<!--
html, body {
margin:10;
height: 100%;
}
.entete {
background-color: #FFFFFF;
height: 15%;
}
.contenu {
height: 80%;
background-color: #66CCFF;
}
.menu {
background-color: #FF0000;
float: left;
width: 200px;
height: 100%;
color: #ffffff;
}
.centre {
margin-left: 200px;
}
.pied {
background-color: #336699;
height: 5%;
}
-->
<!--
#navcontainer ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: #FF6600;
color: #FFFFFF;
width: 100%;
font: normal 90% arial, helvetica, sans-serif;
text-align: center;
}
li { display: inline; }
li a
{
text-decoration: none;
background-color: #FF6600;
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #FFFFFF;
}
li a:hover
{
background-color: #FF9900;
color: #fff;
}
-->
<!--
ul#navlist
{
width: 158px;
\width: 160px;
w\idth: 158px;
padding: 0px;
border: 1px solid #808080;
border-top: 0px;
margin: 0px;
font: bold 12px verdana,helvetica,arial,sans-serif;
background: #808080;
}
ul#navlist li
{
list-style: none;
margin: 0px;
border: 0px;
border-top: 1px solid #808080;
}
ul#navlist li a
{
display: block;
width: 122px;
\width: 158px;
w\idth: 122px;
padding: 4px 8px 4px 8px;
border: 0px;
border-left: 20px solid #aaaabb;
background: #ccccdd;
text-decoration: none;
text-align: right;
}
ul#navlist li a:link { color: #666677; }
div#navcontainer li a:visited { color: #666677; }
ul#navlist li a:hover
{
border-color: #ff9000;
color: #ffffff;
background: #000d33;
}
-->
</style>
</head>
</body>
<div class="entete">
<br>
<center>
<font color="FF6600" face="Arial Black" size="+6">
<h1>L'Atelier C</h1>
</font>
</center>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Accueil</a></li>
<li><a href="#">Qui Suis-je ?</a></li>
<li><a href="#">L'Atelier C</a></li>
<li><a href="#">Catalogue</a></li>
<li><a href="#">Lieux d'Expo</a></li>
<li><a href="#">Me contacter</a></li>
</ul>
</div>
</div>
<div class="contenu">
<div class="menu">
<br>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</div>
<div class="centre">
</div>
</div>
<div class="pied">
</div>
</body>
</html>
Merci d'avance
-Un menu principal horizontal, situé juste en dessous du titre de ma page,
-Un menu secondaire vertical, situé sur la gauche de ma page.
J'ai créé une page CSS, avec plusieurs blocs, et incorporé mes menus, mais le menu principal (situé dans un bloc d'entête), s'est calqué sur la forme du menu secondaire, et je ne sais pas comment les décoller.
Est ce que le problème vient du texte CSS contenu dans la balise head ? Ou est-ce que ce sont les blocs (HTML) qui posent problème ?
Si quelqu'un pouvait m'aider à résoudre mon problème, ce serait très gentil. :-)
voici mon script :
<html>
<head>
<style type="text/css">
<!--
html, body {
margin:10;
height: 100%;
}
.entete {
background-color: #FFFFFF;
height: 15%;
}
.contenu {
height: 80%;
background-color: #66CCFF;
}
.menu {
background-color: #FF0000;
float: left;
width: 200px;
height: 100%;
color: #ffffff;
}
.centre {
margin-left: 200px;
}
.pied {
background-color: #336699;
height: 5%;
}
-->
<!--
#navcontainer ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: #FF6600;
color: #FFFFFF;
width: 100%;
font: normal 90% arial, helvetica, sans-serif;
text-align: center;
}
li { display: inline; }
li a
{
text-decoration: none;
background-color: #FF6600;
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #FFFFFF;
}
li a:hover
{
background-color: #FF9900;
color: #fff;
}
-->
<!--
ul#navlist
{
width: 158px;
\width: 160px;
w\idth: 158px;
padding: 0px;
border: 1px solid #808080;
border-top: 0px;
margin: 0px;
font: bold 12px verdana,helvetica,arial,sans-serif;
background: #808080;
}
ul#navlist li
{
list-style: none;
margin: 0px;
border: 0px;
border-top: 1px solid #808080;
}
ul#navlist li a
{
display: block;
width: 122px;
\width: 158px;
w\idth: 122px;
padding: 4px 8px 4px 8px;
border: 0px;
border-left: 20px solid #aaaabb;
background: #ccccdd;
text-decoration: none;
text-align: right;
}
ul#navlist li a:link { color: #666677; }
div#navcontainer li a:visited { color: #666677; }
ul#navlist li a:hover
{
border-color: #ff9000;
color: #ffffff;
background: #000d33;
}
-->
</style>
</head>
</body>
<div class="entete">
<br>
<center>
<font color="FF6600" face="Arial Black" size="+6">
<h1>L'Atelier C</h1>
</font>
</center>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Accueil</a></li>
<li><a href="#">Qui Suis-je ?</a></li>
<li><a href="#">L'Atelier C</a></li>
<li><a href="#">Catalogue</a></li>
<li><a href="#">Lieux d'Expo</a></li>
<li><a href="#">Me contacter</a></li>
</ul>
</div>
</div>
<div class="contenu">
<div class="menu">
<br>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</div>
<div class="centre">
</div>
</div>
<div class="pied">
</div>
</body>
</html>
Merci d'avance
A voir également:
- Menus CSS = problème
- Css download - Télécharger - HTML
- Enlever soulignement lien css ✓ - Forum CSS
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Barre des menus windows 11 - Guide
- Css ligne horizontale ✓ - Forum CSS
2 réponses
Pas la peine de vous embeter, j'ai trouvé la solution toute seule.
pour les deux menus, les noms des blocs (navcontainer et navlist) étaient identiques... il suffisait de les changer.
Merci quand même.
pour les deux menus, les noms des blocs (navcontainer et navlist) étaient identiques... il suffisait de les changer.
Merci quand même.
Bonjour,
Je me permets quand-même quelques précisions.
“html, body {
margin:10; <---------- 10 quoi ?
height: 100%;
}”
10%, 10px ou 10em ne donnent pas le même résultat.
Tu un seul “ entete” idem pour “contenu menu centre pied”
Tu devrais donc utiliser une id et avoir “#entete” plutôt qu'une class et “.entete” etc.
Je me permets quand-même quelques précisions.
“html, body {
margin:10; <---------- 10 quoi ?
height: 100%;
}”
10%, 10px ou 10em ne donnent pas le même résultat.
Tu un seul “ entete” idem pour “contenu menu centre pied”
Tu devrais donc utiliser une id et avoir “#entete” plutôt qu'une class et “.entete” etc.
