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?
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?
