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
Suis sûre aussi que les styles toplevel ne sont pas correctement écrits, merci de votre aide.
Modifié par donoro (15 Mar 2005 - 15:36)
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
<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;
}
Suis sûre aussi que les styles toplevel ne sont pas correctement écrits, merci de votre aide.
Modifié par donoro (15 Mar 2005 - 15:36)
