imported>Iris Leininger: 1 Version

2013-10-23T11:24:05Z

1 Version

← Nächstältere Version	Version vom 23. Oktober 2013, 13:24 Uhr
(kein Unterschied)

imported>Andreas Plank am 13. Mai 2011 um 09:11 Uhr

2011-05-13T09:11:41Z

Neue Seite

<includeonly>{{#switch: {{{Typ|}}}
| lu->ro = <div class="line-ll2ur" style="left:0px; top:0px; /* point A */"><div style="
border-width: 0px 0px {{Pixel2Number|{{{Höhe|50px}}}}}px {{Pixel2Number|{{{Breite|100}}}}}px; /* point B (minus A) trbl */
border-bottom-color: {{{Farbe|black}}}; /* line color */
"></div><div style="
left: {{Pixel2Number|{{{Dicke|2}}}}}px; /* line width */
border-width: 0px 0px {{Pixel2Number|{{{Höhe|50px}}}}}px {{Pixel2Number|{{{Breite|100}}}}}px; /* point B (minus A) */
border-bottom-color: {{{Hintergrund|white}}}; /* background color */
"></div></div>
| lo->ru | #default = <div class="line-ul2lr" style="left:0px; top:0px; /* point A */"><div style="
left: {{Pixel2Number|{{{Dicke|2}}}}}px; /* line width */
border-width: 0px {{Pixel2Number|{{{Breite|100}}}}}px {{Pixel2Number|{{{Höhe|50px}}}}}px 0px; /* point B (minus A) */
border-bottom-color: {{{Farbe|black}}}; /* line color */
"></div><div style="
border-width: 0px {{Pixel2Number|{{{Breite|100}}}}}px {{Pixel2Number|{{{Höhe|50px}}}}}px 0px; /* point B (minus A) */
border-bottom-color: {{{Hintergrund|white}}}; /* background color */
"></div></div>
}}</includeonly><noinclude>
Diese Vorlage erzeugt mit Hife von CSS und den border-Eigenschaften eine diagonale Linie und hat folgende Vorlagenparameter:
* Typ: „lo->ru“ (Voreinstellung = links oben nach rechts unten), „lu->ro“ (links unten nach rechts oben)
* Farbe (Voreinstellung = black)
* Hintergrund (Voreinstellung = white)
* Breite (Voreinstellung = 100px)
* Höhe (Voreinstellung = 50px)
* Dicke (dies ist die ungefähre Dicke der Linie; Voreinstellung = 2px)

Positioniert wird sie als (Hintergrund)Box relativ bei left:0px und top:0px gesetzt. Die Idee und der Code stammt von [http://erezsh.wordpress.com/2008/07/31/drawing-diagonal-lines-with-css/ Erez]

Beispiele:
<nowiki>{{Diagonale Linie}}</nowiki>
Text {{Diagonale Linie}} Text Text Text Text

<nowiki>{{Diagonale Linie | Farbe= green | Breite=150px | Typ = lu->ro}}</nowiki>
Text {{Diagonale Linie | Farbe= green | Breite=150px | Typ = lu->ro}} Text Text Text Text

{{Todo|Fix? Extrahiert man den HTML Code lokal, funktioniert es. Hier auf dem Wiki nicht. Problem ist z-index:-1|Diagonale Linie}}
[[Kategorie: Vorlagenprogrammierung]]
[[Kategorie: Formatierung]]
[[Kategorie: Vorlagen/Templates]]
{{SORTIERUNG: {{SEITENNAME Umlaute konvertiert}} }}
</noinclude>

Vorlage:Diagonale Linie - Versionsgeschichte

imported>Iris Leininger: 1 Version

imported>Andreas Plank am 13. Mai 2011 um 09:11 Uhr