Bonjour,
Je développe un site avec un menu à gauche qui renvoie vers un sous-menu multi-niveaux à l'intérieur de la page. Je suis nouvelle dans les css, et c'est un peu galère! Ce serait gentil si qq pourrait m'aider.
Dans le div <conteneurcentre>, j'ai un <p id="mainnav"> et un <p id="contenu">.
Je n'arrive pas à ce que mon mainnav soit à l'intérieur du conteneur dans Dreamweaver, dans la preview IE c'est ok, je ne peux pas tester dans Firefox.
Voici le code:
MErci d'avance pour votre aide.
Modifié par donoro (21 Mar 2005 - 12:15)
Je développe un site avec un menu à gauche qui renvoie vers un sous-menu multi-niveaux à l'intérieur de la page. Je suis nouvelle dans les css, et c'est un peu galère! Ce serait gentil si qq pourrait m'aider.
Dans le div <conteneurcentre>, j'ai un <p id="mainnav"> et un <p id="contenu">.
Je n'arrive pas à ce que mon mainnav soit à l'intérieur du conteneur dans Dreamweaver, dans la preview IE c'est ok, je ne peux pas tester dans Firefox.
Voici le code:
<script type="text/javascript">
function count(passedClass)
{
var counted = 0;
var total = document.getElementsByTagName("ul");
for(z=0;z<total.length;z++)
{
var elementClass = total[z].className;
if(elementClass == passedClass)
{
counted++;
}
}
return counted;
}
function cacheall()
{
var nbrSublevel = count("sublevel");
var nbrSubsublevel = count("subsublevel");
bodyclass = getbodyclass();
bodyclass2 = bodyclass.substr(0,bodyclass.length-2);
for (i=1; i<=nbrSublevel; i++)
{
//alert ("bodyclass = "+bodyclass+"\nbodyclass2 = "+bodyclass2+"\ncurrent = sub"+i);
if (document.getElementById("sub"+i) && bodyclass != "sub"+i && bodyclass2 != "sub"+i)
{
document.getElementById("sub"+i).style.display = "none";
}
for (var j=1; j<=nbrSubsublevel; j++)
{
//alert ("bodyclass = "+bodyclass+"\nbodyclass2 = "+bodyclass2+"\ncurrent = sub"+i+"_"+j);
if (document.getElementById("sub"+i+"_"+j) && bodyclass != "sub"+i+"_"+j)
{
document.getElementById("sub"+i+"_"+j).style.display = "none";
}
}
}
}
function toggle(id)
{
var elmt = document.getElementById(id);
bodyclass = getbodyclass();
bodyclass2 = bodyclass.substr(0,bodyclass.length-2);
//alert ("bodyclass = "+bodyclass+"\nbodyclass2 = "+bodyclass2+"\nid = "+id);
if (bodyclass != id && bodyclass2 != id)
{
if (elmt.style.display == "block" || elmt.style.display == "")
{
elmt.style.display = "none";
}
else
{
elmt.style.display = "block";
}
}
}
function getbodyclass()
{
var bodyclass = document.getElementById("body").className;
return bodyclass;
}
</script>
<body>
<div class="conteneurcentre">
<p id="mainnav">
<ul class="toplevel">
<li><a href="" onclick="javascript:toggle('sub1'); return false;">TRAVAUX</a>
<ul id="sub1" class="sublevel">
<li><a href="1_1.html" onclick="javascript:toggle('sub1_1'); return false;">Projets</a>
<ul id="sub1_1" class="subsublevel">
<li><a href="1_1_1.html">Projet1</a></li>
<li><a href="1_1_2.html">Projet2</a></li>
<li><a href="1_1_3.html">Projet3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="1_2.html" onclick="javascript:toggle('sub1_2'); return false;">Dessins & Illustrations</a>
<ul id="sub1_2" class="subsublevel">
<li><a href="1_2_1.html">Dessins</a></li>
<li><a href="1_2_2.html">Illustrations</a>
<ul>
<li><a href="">Illustration1</a></li>
<li><a href="">Illustration2</a> </li>
<li><a href="">Illustration3</a></li>
<li><a href="">Illustration4</a></li>
</ul>
</li>
</p>
<p id="contenu">
bla bla bla
</p>
</body>
--------------
styles
.conteneurcentre {
margin-left: 180px;
background-color:#FFFFFF;
width: 570px;
padding-top: 10px;
}
#mainnav {
}
/*styles des menus intérieurs*/
.toplevel{
margin:5px 5px 0 0;
padding:5px;
font:bold 11px Verdana, Arial, Helvetica, sans-serif;
}
.toplevel ul {
margin:0 0 0 1em;
padding:0;
font:normal 11px Verdana, Arial, Helvetica, sans-serif;
}
.toplevel ul li{
list-style-type:none;
margin-left:10px;
font:normal 11px Verdana, Arial, Helvetica, sans-serif;
}
.toplevel li a{
text-decoration: none;
color:#0062a5;
}
.toplevel li a:hover {
color:#C7004B;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
text-decoration: none;
}
.toplevel li a:active{
color:#C7004B;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
text-decoration: none;
}
MErci d'avance pour votre aide.
Modifié par donoro (21 Mar 2005 - 12:15)
