Hilfe:Gestalterische Seitenelemente

Wechseln zu: Navigation, Suche

Spalten

zwei Spalten

Klassen für zwei Spaltenlayouts sind bereits vordefiniert. Dies ermöglicht das teilen des Inhalts in die folgenden Verhältnisse:

  • 75% / 25% (Klassen c75l und c25r)
  • 66% / 33% (Klassen c66l und c33r)
  • 62% / 38% (Klassen c62l und c38r)
  • 50% / 50% (Klassen c50l und c50r)
  • 38% / 62% (Klassen c38l und c62r)
  • 33% / 66% (Klassen c33l und c66r)
  • 25% / 75% (Klassen c25l und c75r)

Verschachteln von Spaltenklassen ist möglich.

linke Spalte (62%)

Dies ist die linke Spalte. Sie ist 62% breit. Dies ist die linke Spalte. Sie ist 62% groß. Dies ist die linke Spalte. Sie ist 62% breit. Dies ist die linke Spalte. Sie ist 62% breit. Dies ist die linke Spalte. Sie ist 62% breit. Dies ist die linke Spalte. Sie ist 62% breit.

rechte Spalte (38%)

Dies ist die rechte Spalte. Sie ist 38% groß. Dies ist die rechte Spalte. Sie ist 38% groß. Dies ist die rechte Spalte. Sie ist 38% groß. Dies ist die rechte Spalte. Sie ist 38% groß.

Der Code sieht wie folgt aus: 

<!-- 2 Columns, ratio 66/33 -->
<div class="subcolumns">
 <div class="c68l">
  <div class="subcl">
   ...Inhalt linke Spalte...
  </div>
 </div>
 <div class="c32r">
  <div class="subcr">
   ...Inhalt rechte Spalte...
  </div>
 </div>
</div>

drei Spalten

Klassen für drei Spaltenlayouts sind bereits vordefiniert. Dies ermöglicht das teilen des Inhalts in das Verhältnis 33%.

linke Spalte (33%)

Dies ist die linke Spalte. Sie ist 33% groß. Dies ist die linke Spalte. Sie ist 33% groß. Dies ist die linke Spalte. Sie ist 33% groß. Dies ist die linke Spalte. Sie ist 33% groß.

mittlere Spalte(33%)

Dies ist die mittlere Spalte. Sie ist 33% groß. Dies ist die mittlere Spalte. Sie ist 33% groß. Dies ist die mittlere Spalte. Sie ist 33% groß.

rechte Spalte (33%)

Dies ist die rechte Spalte. Sie ist 33% groß. Dies ist die rechte Spalte. Sie ist 33% groß. Dies ist die rechte Spalte. Sie ist 33% groß. Dies ist die rechte Spalte. Sie ist 33% groß.

Der Code sieht wie folgt aus: 

<!-- 3 Columns, ratio 33/33/33 -->
<div class="subcolumns">
 <div class="c33l">
  <div class="subcl">
   ...Inhalt linke Spalte...
  </div>
 </div>
 <div class="c33l">
  <div class="subc">
   ...Inahlt mittlere Spalte...
  </div>
 </div>
 <div class="c32r">
  <div class="subcr">
   ...Inhalt rechte Spalte...
  </div>
 </div>
</div>

Kästen

Die Kästen vom linken Menü können auch im Inhaltsbereich verwendet werden. Sie bestehen aus einer Kopfzeile und Fußzeilen, die die runden Ecken unterstützen, eine optional farbige Titelleiste, eine optional farbige Fußleiste und die Inhaltsfläche. Deshalb ist das Layout der Kästen mit verschiedenen Kombinationen, sehr flexibel. Vorzugsweise nutzen sie die Kästen in Kombination mit Spalten.

einfache Kästen

grüner Kasten

Dies ist die Inhaltsfläche von dem grünen Kasten. Jeder Typ von wiki/HTML geht hier.

grauer Kasten

Dies ist die Inhaltsfläche von dem grauen Kasten. Jeder Typ von wiki/HTML geht hier.


Der Code sieht wie folgt aus: 

<div class="green_box">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Kasten Titel...
  </div>
 </div>
 <div class="box_content">
  ...Inhalt...
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>

<div class="grey_box">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Kasten Titel...
  </div>
 </div>
 <div class="box_content">
  ...Inhalt...
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>

Doppelkästen

Ein grüner Doppelkasten

Dies ist die Inhaltsfläche von dem grünen Doppelkasten. Jeder Typ von wiki/HTML geht hier.

...grüne Doppelbox Fußzeile...
eine graue Doppelbox

Dies ist die Inhaltsfläche von dem grauen Doppelkasten. Jeder Typ von wiki/HTML geht hier.

...graue Doppelbox Fußzeile..


Der Code sieht wie folgt aus: 

<div class="green_box_double">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Kasten Titel...
  </div>
 </div>
 <div class="box_content">
  ...Inhalt...
 </div>
 <div class="box_footer_row">
  <div class="box_footer">
   ...Fußzeile...
  </div>
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>

<div class="grey_box_double">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Kasten Titel...
  </div>
 </div>
 <div class="box_content">
  ...Inhalt...
 </div>
 <div class="box_footer_row">
  <div class="box_footer">
   ...Fußzeile...
  </div>
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>

zusammengebaute Kästen

Eine zusammengebaute grüne Box

Dies ist die Inhaltsfläche von dem grünen Doppelkasten. Jeder Typ von wiki/HTML geht hier.

Subtitle 1

Dies ist eine andere Inhaltsfläche von dem zusammengebauten grünen Kasten. Jeder Typ von wiki/HTML geht hier.

Subtitle 2

Dies ist noch eine andere Inhaltsfläche von dem zusammengebauten grünen Kasten. Jeder Typ von wiki/HTML geht hier.

Ein zusammengebauter grauer Doppelkasten

Dies ist die Inhaltsfläche des grauen Doppelkastens. Jeder Typ von wiki/HTML geht hier.

Subtitle

Dies ist eine andere Inhaltsfläche von der zusammengebauten, grauen Doppelbox. Jeder Typ von wiki/HTML geht hier.

... zusammengebaute graue Doppelbox Fußzeile...


Der Code sieht wie folgt aus: 

<div class="green_box">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Kasten Titel...
  </div>
 </div>
 <div class="box_content">
  ...Inhalt...
 </div>
 <div class="box_title_row">
  <div class="box_title" style="padding-top: .5em">
   ...Untertitel1...
  </div>
 </div>
 <div class="box_content">
  ...Inhalt1...
 </div>
 <div class="box_title_row">
  <div class="box_title" style="padding-top: .5em">
   ...Untertitel2...
  </div>
 </div>
 <div class="box_content">
  ...Inhalt2...
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>

<div class="grey_box_double">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Kasten Titel...
  </div>
 </div>
 <div class="box_content">
  ...Inhalt...
 </div>
 <div class="box_title_row">
  <div class="box_title" style="padding-top: .5em">
   ...Untertitel...
  </div>
 </div>
 <div class="box_content">
  ...Inhalt1...
 </div>
 <div class="box_footer_row">
  <div class="box_footer">
   ...Fußzeile...
  </div>
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>
Abgerufen von „https://de.opensuse.org/index.php?title=Hilfe:Gestalterische_Seitenelemente&oldid=37033“