28173 sujets

CSS et mise en forme, CSS3

Menu onglet et div empilés

Bonjour,

Je voudrais créer un menu à onglets, avec trois liens ancrés sur la même page. L'idée est d'empilé les div avec la position absolute et de les faire apparaître en cliquant sur les liens. Pour cela, j'ai repris et retravaillé le code trouvé sur alsacréation. Mon problème est, visiblement une mauvaise compréhension de la propriété z-index...

Quelqu'un pourrait-il me donner des pistes de recherche : à savoir
-> m'aider à identifier les lacunes dans le code
-> m'aider à trouver les ressources sur le web

Merci d'avance.

Thibaux

Je mets le code pour plus de compréhension
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>menu horizontal en CSS</title>


  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  <style type="text/css">
/* CSS issu des tutoriels  www.alsacreations.com/articles  */
body {margin: 10px; padding: 0; font: 14px Verdana, sans-serif;}
ul {
list-style-type: none;
width: 100%; /* précision pour Opera */
}
.blocmenu {
}
.menu li {
float: left;
}
.menu a {
margin: 0 2px;
width: 120px;
height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}
.menu a:hover {
background: #ccc;
border: 1px solid gray; }
.menu a:active {
background: gray;
border: 1px solid gray; color: #fff;
}
#cadre1 {
position:absolute;
top:40px;
width:100%;
border:solid;
border-width:3px;
border-color:yellow;
background:white;
z-index:2;
}
#cadre2 {
position:absolute;
top:40px;
width:100%;
border:solid;
border-width:3px;
border-color:black;
background:white;
z-index:1;
}
#cadre3 {
position:absolute;
top:40px;
width:100%;
border:solid;
border-width:3px;
border-color:green;
background:white;
z-index:0;
}
  </style>
</head>


<body>

<div class="blocmenu">
<ul class="menu">

  <li><a href="#cadre1">Cadre I</a></li>

  <li><a href="#cadre2">Cadre II</a></li>

  <li><a href="#cadre3">Cadre III</a></li>

</ul>

</div>
<div>
<div id="cadre1">
<p>
Voilà la place du cadre 1
</p>
</div>

<div id="cadre2">
<p>
Voilà la place du cadre 2
</p>
</div>

<div id="cadre3">
<p>
Voilà la place du cadre 3
</p>
</div>

<div>
</body>
</html>
Sujet clos
Aller à