Vorlage:Stammbaumliste/styles

Diese Vorlage(n) wurde(n) fast unverändert von der deutschsprachigen Wikipedia übernommen. Es wurden nur geringfügige technische, stilistische und organisatorische Anpassungen ans ÖsterreichWiki durchgeführt.

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

┌──┴──┐

┌─┴┐ ┌─┼──┐