Universität Bielefeld

© Universität Bielefeld

"Zebrastreifen"

Der "Zebrastreifen" ist verwendbar mit Tabellen, Listen, Content- und Klappboxen.


Listen

Überschrift / Titel

  • Meine Listenspunkte
  • ...
  • ...

Code-Schnipsel

<div class="contentbox">
    <h1> Überschrift </h1>
    <ul class="pfeil-liste feed zebrastreifen">
        <li>Meine Listenpunkte</li>         <li>...</li>         <li>...</li>     </ul>
</div>


Tabellen

Überschrift / Titel

Spalte 1, Zeile 1

Spalte 2, Zeile 1

Spalte 1, Zeile 2

Spalte 2, Zeile 2

Spalte 1, Zeile 3

Spalte 2, Zeile 3

Spalte 1, Zeile 4

Spalte 2, Zeile 4

Spalte 1, Zeile 5

Spalte 2, Zeile 5

Code-Schnipsel

<div class="contentbox">
  <h1> Überschrift </h1>
  <table class="tabelle-typ3 mobile-float zebrastreifen" cellpadding="4" cellspacing="2" width="100%">
  <tbody>
    <tr>
      <td width="180" valign="top"><p><strong>Spalte 1, Zeile 1</strong></p></td>
      <td valign="top"><p>Spalte 2, Zeile 1</p></td>
    </tr>
    <tr>
      <td valign="top"><p><strong>Spalte 1, Zeile 2</strong></p></td>
      <td valign="top"><p>Spalte 2, Zeile 2</p></td>
    </tr>
    <tr>
      <td valign="top"><p><strong>Spalte 1, Zeile 3</strong></p></td>
      <td valign="top"><p>Spalte 2, Zeile 3</p></td>
    </tr>
  </tbody>
  </table>
</div>


Content- und Klappboxen

Jede zweite Contentbox wird automatisch grau hinterlegt.

...

...

Code-Schnipsel

<div class="zebrastreifen">

  <div class="contentbox">
    <h2> Titel </h2>
    <p> Inhalt der Contentbox </p><br /><br />
  </div>

  <div class="contentbox">
    <h2> Titel </h2>
    <p> Inhalt der Contentbox </p><br /><br />
  </div>

  <div class="contentbox">
    <h2> Titel </h2>
    <p> Inhalt der Contentbox </p><br /><br />
  </div>

</div> <!-- zebrastreifen ende -->