Vorlage:Stammbaumliste/styles
aus Wikipedia, der freien Enzyklopädie
< Vorlage:Stammbaumliste
Dies ist die aktuelle Version dieser Seite, zuletzt bearbeitet am 2. Mai 2022 um 15:16 Uhr durch imported>Vollbracht(580435) (AZ: Die Seite wurde neu angelegt: <noinclude>{{Dokumentation/styleSeite|css=1}} == 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: <nowiki> <div class="treeview" style="margin:1em"> <div st).
Diese Seite dokumentiert TemplateStyles betreffend Vorlage:Stammbaumliste.
Sie sind auf dieser Seite aktiviert.
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:
