Vorlage:Stammbaumliste/styles

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: -1em;
}
.treeview ul > li {
    padding-left: 30px;
    text-indent: -0.5em;
}
.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 top;
}
.treeview li li:last-child {
    background: url("//upload.wikimedia.org/wikipedia/commons/e/e6/Treeview-bottom-child.png") no-repeat 0 -32px;
}
.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

<templatestyles src="Stammbaumliste/styles.css" />

Weitere Verwendung

Neben 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:

┌──┴──┐

┌─┴┐ ┌─┼──┐