nicht angemeldet
CSS Tree menue falsch eingerückt, bleibt nicht aufgeklappt
ersteinmal Hallo,
hab ein css-tree-menue zusammengestellt, welches auch einigermaßen funktioniert.
das problem ist, wenn man auf haupt1 klickt öffnet sich alles so weit so gut. warum ist aber ab haupt2 diese seite eingerückt? hab in der css datei gesucht und bin irgendiwe nicht aiúf einen grünen zweig gekommen (evtl betriebsblindheit)
was muss geändert werden damit alles ordentlich untereinander (je nach unterkategorie) steht?
ist es möglich dies zu ändern, dass es offen bleibt (bei den angeklickten link) (kommt man glaube ich nicht um javascript herum) und wenn man einen anderen hauptpunkt anklickt, dass es den offenen schließt?
das dritte ist, wie bekomme ich den inhalt (website) des angeklickten ziellinkes in ein bestimmten div-container einer css-aufgebauten website?
---------------------------------------------------------------------------------------------------------------------------------------------
inhalt css-datei
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }
body, form, ul, li, p, h1, h2, h3, h4, h5
{
margin: 0;
padding: 0;
}
body { background-color: #606061; color: #ffffff; margin: 0; }
img { border: none; }
p
{
font-size: 1em;
margin: 0 0 1em 0;
}
html { font-size: 100%; /* IE hack */ }
body { font-size: 0.75em; /* Sets base font size to 16px */ }
table { font-size: 100%; /* IE hack */ }
input, select, textarea, th, td { font-size: 1em; }
/* CSS Tree menu styles */
ol.tree
{
padding: 0 0 0 30px;
width: 300px;
}
li
{
position: relative;
margin-left: -15px;
list-style: none;
}
li.file
{
margin-left: -1px !important;
}
li.file a
{
background: url(toggle-small-expand.png) 0 0 no-repeat;
color: #fff;
padding-left: 20px;
text-decoration: none;
display: block;
}
li.file a { background: url(toggle-small-expand.png) 0 0 no-repeat; }
li input
{
position: absolute;
left: 0;
margin-left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
height: 1em;
width: 1em;
top: 0;
}
li input + ol
{
background: url(toggle-small-expand.png) 40px 0 no-repeat;
margin: -0.938em 0 0 -44px; /* 15px */
height: 1em;
}
li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
li label
{
/*background: url(folder-horizontal.png) 15px 1px no-repeat;*/
cursor: pointer;
display: block;
padding-left: 10px;
}
li input:checked + ol
{
background: url(toggle-small.png) 40px 5px no-repeat;
margin: -1.25em 0 0 -44px; /* 20px */
padding: 1.563em 0 0 80px;
height: auto;
}
li input:checked + ol > li { display: block; margin: 0 0 0.125em; /* 2px */}
li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }
---------------------------------------------------------------------------------------------------------------------------------------------
inhalt html-datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="robots" content="all">
<!--[if gte IE 9 ]><link rel="stylesheet" type="text/css" href="_styles.css" media="screen"><![endif]-->
<!--[if !IE]>--><link rel="stylesheet" type="text/css" href="_styles2.css" media="screen"><!--<![endif]-->
</head>
<body>
<ol class="tree">
<li>
<label for="haup1">haup1</label> <input type="checkbox" id="haupt1" />
<ol>
<li>
<label for="unter1">unter1</label> <input type="checkbox" id="unter1" />
<ol>
<li class="file"><a href="">unter1_1</a></li>
<li class="file"><a href="">unter1_2</a></li>
</ol>
</li>
<li>
<label for="unter2">unter2</label> <input type="checkbox" id="unter2" />
<ol>
<li class="file"><a href="">unter2_1</a></li>
<li class="file"><a href="">unter2_2</a></li>
<li class="file"><a href="">unter2_3</a></li>
<li class="file"><a href="">unter2_4</a></li>
<li class="file"><a href="">unter2_5</a></li>
<li class="file"><a href="">unter2_6</a></li>
<li>
<label for="unter2_1">unter2_1</label> <input type="checkbox" id="unter2_1" />
<ol>
<li class="file"><a href="">unter2_1_1</a></li>
<li class="file"><a href="">unter2_1_2</a></li>
</ol>
</li>
<li class="file"><a href="">unter2_7</a></li>
<li class="file"><a href="">unter2_7</a></li>
</ol>
</li>
<li class="file"><a href="">haupt2</a></li>
<li class="file"><a href="">haupt3</a></li>
<li class="file"><a href="">haupt4</a></li>
<li class="file"><a href="">haupt5</a></li>
</ol>
</li>
</ol>
</body>
</html>
danke für die hilfe?
-
Hola ita2001,
ich habe den code mal auf das notwendige rezuziert, somit fällt die Übersicht leichter.
ol { list-style: none; position: relative; width: 300px; } li input { position: absolute; opacity: 0; } li input + ol > li { display: none } li label { display: block; cursor: pointer; font-weight: bold; } li input:checked + ol > li { display: block; margin: 0 0 0.125em; } li input:checked + ol > li:last-child { margin: 0 0 0.063em; } .dino {display: none} .dino:target {display: block}<ol> <li> <label for="haupt1">haup1</label><input type="checkbox" id="haupt1" /> <ol> <li> <label for="unter1">unter1</label><input type="checkbox" id="unter1" /> <ol> <li><a href="#unter1_1">unter1_1</a></li> <li><a href="#unter1_2">unter1_2</a></li> </ol> </li> <li> <label for="unter2">unter2</label><input type="checkbox" id="unter2" /> <ol> <li><a href="#unter2_1">unter2_1</a></li> <li><a href="#unter2_2">unter2_2</a></li> <li> <label for="unter2_3">unter2_3</label><input type="checkbox" id="unter2_3" /> <ol> <li><a href="#unter2_3_1">unter2_3_1</a></li> <li><a href="#unter2_3_2">unter2_3_2</a></li> </ol> </li> <li><a href="#unter2_4">unter2_4</a></li> </ol> </li> </ol> </li> <li><a href="#haupt2">haupt2</a></li> <li><a href="#haupt3">haupt3</a></li> </ol> <div id="haupt2" class="dino">haupt2 Inhalt</div> <div id="haupt3" class="dino">haupt3 Inhalt</div> <div id="unter1_1" class="dino">unter1_1 Inhalt</div> <div id="unter1_2" class="dino">unter1_2 Inhalt</div> <div id="unter2_1" class="dino">unter2_1 Inhalt</div> <div id="unter2_2" class="dino">unter2_2 Inhalt</div> <div id="unter2_3_1" class="dino">unter2_3_1 Inhalt</div> <div id="unter2_3_2" class="dino">unter2_3_2 Inhalt</div> <div id="unter2_4" class="dino">unter2_4 Inhalt</div>grüsse und viel Spass damit
qx