Home | Content | Suche | Navigation | Werkzeuge | Actions | Andere Sprachen

Hilfe:Strukturelle Seitenelemente

aus openSUSE, der freien Wissensdatenbank

Inhaltsverzeichnis

[bearbeiten]

Spalten

[bearbeiten]

Zwei Spalten

Klassen für eine zweispaltige Anordnung sind bereits vordefiniert. Sie erlauben es, den Teil für den Inhalt in den folgenden Verhältnissen aufzuteilen:

  • 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)

Verschachtelte Klassen sind möglich.

Linke Spalte (62%)

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. 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% breit. Dies ist die rechte Spalte. Sie ist 38% breit. Dies ist die rechte Spalte. Sie ist 38% breit. Dies ist die rechte Spalte. Sie ist 38% breit.

Der Code sieht so aus: 

<!-- 2 Columns, ratio 66/33 -->
<div class="subcolumns">
 <div class="c68l">
  <div class="subcl">
   ...Inhalt der linken Spalte...
  </div>
 </div>
 <div class="c32r">
  <div class="subcr">
   ...Inhalt der rechten Spalte...
  </div>
 </div>
</div>
[bearbeiten]

Drei Spalten

Klassen für eine dreispaltige Anordnung sind bereits vordefiniert. Sie erlauben die Drittelung des Inhaltsteils zu jeweils 33%.

Linke Spalte (33%)

Dies ist die linke Spalte. Sie ist 33% breit. Dies ist die linke Spalte. Sie ist 33% breit. Dies ist die linke Spalte. Sie ist 33% breit. Dies ist die linke Spalte. Sie ist 33% breit.

Mittelspalte (33%)

Dies ist die Mittelspalte. Sie ist 33% breit. Dies ist die Mittelspalte. Sie ist 33% breit. Dies ist die Mittelspalte. Sie ist 33% breit.

Rechte Spalte (33%)

Dies ist die rechte Spalte. Sie ist 33% breit. Dies ist die rechte Spalte. Sie ist 33% breit. Dies ist die rechte Spalte. Sie ist 33% breit. Dies ist die rechte Spalte. Sie ist 33% breit.

Der Code sieht wie folgt aus: 

<!-- 3 Columns, ratio 33/33/33 -->
<div class="subcolumns">
 <div class="c33l">
  <div class="subcl">
   ...Inhalt der linken Spalte...
  </div>
 </div>
 <div class="c33l">
  <div class="subc">
   ...Inhalt der mittleren Spalte...
  </div>
 </div>
 <div class="c32r">
  <div class="subcr">
   ...Inhalt der rechten Spalte...
  </div>
 </div>
</div>
[bearbeiten]

Boxen

Die Boxen aus dem linken Menü können auch im Inhaltsbereich genutzt werden. Sie bestehen aus einem Kopf- und Fußteil, die die abgerundeten Ecken bereitstellen, einer optional farbigen Kopfzeitle, einem optional farbigen Fußteil und dem Bereich für den Inhalt. Dadurch ist die Boxenanordnung in zahllosen Kombinationen sehr flexibel. Nutzen Sie die Boxen vorzugsweise in Kombination mit Spalten.

[bearbeiten]

Einfache Boxen

Eine grüne Box

Dies ist der Inhaltsbereich der grünen Box. Jede Art von Wiki/HTML-Auszeichnungen können hier genutzt weden.

Eine graue Box

Dies ist der Inhaltsbereich der grauen Box. Jede Art von Wiki/HTML-Auszeichnungen können hier genutzt weden.


Der Code sieht so 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">
   ...Boxtitel...
  </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">
   ...Boxtitel...
  </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>
[bearbeiten]

Doppelboxen

Eine grüne Doppelbox

Dies ist der Inhaltsbereich der grünen Doppelbox. Jede Art von Wiki/HTML-Auszeichnungen können hier genutzt weden.

...Fußbereich der grünen Doppelbox...
Eine graue Doppelbox

Dies ist der Inhaltsbereich der grünen Doppelbox. Jede Art von Wiki/HTML-Auszeichnungen können hier genutzt weden.

...Fußbereich der grauen Doppelbox...


Der Code sieht so 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">
   ...Boxtitel...
  </div>
 </div>
 <div class="box_content">
  ...Inhalt...
 </div>
 <div class="box_footer_row">
  <div class="box_footer">
   ...Fußbereich...
  </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">
   ...Boxtitel...
  </div>
 </div>
 <div class="box_content">
  ...Inhalt...
 </div>
 <div class="box_footer_row">
  <div class="box_footer">
   ...Fußbereich...
  </div>
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>
[bearbeiten]

Montierte Boxen

Eine montierte, grüne Box

Dies ist ein Inhaltsbereich der montierten, grünen Doppelbox. Jede Art von Wiki/HTML-Auszeichnungen können hier genutzt weden.

Untertitel 1

Dies ist ein weiterer Inhaltsbereich der montierten, grünen Doppelbox. Jede Art von Wiki/HTML-Auszeichnungen können hier genutzt weden.

Untertitel 2

Noch ein ein Inhaltsbereich der montierten, grünen Doppelbox. Jede Art von Wiki/HTML-Auszeichnungen können hier genutzt weden.

Eine montierte, graue Doppelbox

Dies ist ein Inhaltsbereich der montierten, grauen Doppelbox. Jede Art von Wiki/HTML-Auszeichnungen können hier genutzt weden.

Untertitel

Noch ein ein Inhaltsbereich der montierten, grauen Doppelbox. Jede Art von Wiki/HTML-Auszeichnungen können hier genutzt weden. genutzt weden.

...Fußbereich der montierten, grauen Doppelbox...


Der Code sieht so 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">
   ...Boxtitel...
  </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">
   ...Boxtitel...
  </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_footer_row">
  <div class="box_footer">
   ...Fußbereich...
  </div>
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>
Von "http://de.opensuse.org/Hilfe:Strukturelle_Seitenelemente"
Der Inhalt dieser und anderer Wiki-Seiten wurde von Mitgliedern der Gemeinschaft erstellt. Die Autoren handeln nicht im Auftrag von Novell, Inc., unabhängig davon, ob sie anderweitige Beziehungen zu Novell unterhalten.
This site uses the YAML CSS framework.
Über openSUSE | Lizenzbestimmungen | Feedback
Diese Seite wurde zuletzt geändert um 01:26, 18. Mär 2009. Diese Seite wurde bisher 115 mal abgerufen.

Founded by Novell