CSS
/* [[:en:Template:Tree list/styles.css]] */
.treeview ol,
.treeview ul {
padding: 0;
margin: 0;
}
.treeview li {
padding: 0;
margin: 0;
list-style-type: none;
list-style-image: none;
}
.treeview ol > li {
list-style-type: decimal;
list-style-position: inside;
padding-left: 36px;
text-indent: -0.8em;
}
.treeview ul > li {
padding-left: 30px;
text-indent: -0.4em;
}
.treeview ul > li div,
.treeview ol > li div {
padding: 0.3em;
margin-bottom: 0.2em;
text-indent: 0;
}
.treeview ol > li > ul > li::before {
content: '…';
}
.treeview li li {
background: url("//upload.wikimedia.org/wikipedia/commons/8/86/Treeview-child.png") no-repeat 0 -10px;
}
.treeview li li:last-child {
background: url("//upload.wikimedia.org/wikipedia/commons/e/e6/Treeview-bottom-child.png") no-repeat 0 -28px;
}
.treeview div {
border: solid gray;
margin: 0;
padding: 0.3em;
display: inline-block;
font-size: 14px;
}
.horrizontalBranch div {
display: block;
position: absolute;
text-align: center;
transform: translate(-50%,0);
}
.horrizontalBranch {
position: relative;
margin: 1em;
}
.treeview table {
position:absolute;
border-collapse:collapse;
margin:0;
}
Kopiervorlage
Bearbeiten<templatestyles src="Stammbaumliste/styles.css" />
Weitere Verwendung
BearbeitenNeben klassischen vertikalen Stammbaumlisten können auch horizontal gegliederte Stammbäume gestaltet werden. Eine Vorlage hierfür existiert bislang jedoch nicht. Statt dessen können Vorlagen gestaltet werden, die diese Styles direkt verwenden.
Ein Beispiel sei:
<div class="treeview" style="margin:1em"> <div style="margin:0 0 0 160px;">[[Substanz#Naturwissenschaften|Stoff]]</div><br /> <span style="margin:0 0 0 75px;>┌──┴──┐</span><br /> <div style="margin:0 115px 0 60px;">[[Reinstoff]]</div><div>[[Gemisch]]</div><br /> <span style="margin:0 0 0 15px;">┌─┴┐ ┌─┼──┐</span><br /> <div>[[Chemisches Element|Element]]</div><div style="margin:0 20px 0 20px;">[[Chemische Verbindung|Verbindung]]</div><div>[[Lösung (Chemie)|Lösung]]</div><div style="margin:0 20px 0 20px;>[[Kolloid]]</div><div>[[Dispersion (Chemie)|Dispersion]]</div> </div>
wird zu: