Menus CSS = problème

Fermé
Paloma - 1 mars 2007 à 18:32
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 1 mars 2007 à 23:51
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

2 réponses

Réponse 1 / 2
redcow Messages postés 13 Date d'inscription jeudi 1 mars 2007 Statut Membre Dernière intervention 10 février 2008 2
1 mars 2007 à 18:58
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.
0
Réponse 2 / 2
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 779
1 mars 2007 à 23:51
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.
0

Discussions similaires

trait horizontal avec du css
tipi75 -
alainpre -

9 réponses
indice et exposant en css ?
yiv -
Kitkatryne -

19 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
Enlever trait sous un lien href
ponpon17430 -
trucmachinchose-rose -

30 réponses
CSS/Comment enlever couleur liens ?
alexou1984 -
Tonio -

6 réponses