Universität Bielefeld

© Universität Bielefeld

(Personen-)Reiter / Tabs

Nachfolgend sehen Sie wie Sie Personen-Steckbriefe grafisch ansprechend auf Ihren Webseiten präsentieren können.

Weiter unten auf dieser Seite finden Sie natürlich auch den passenden Code-Schnipsel zur Einbinung auf Ihren Seiten.

Sollten Sie ältere Templates verwenden (vor 2017), so wird der untenstehenden Quelltext nicht automatisch funktionieren. Wenden Sie sich in dem Fall bitte an die Web-Entwicklung (webentwicklungdüm@uni-bielefeld.de)





Dr. Markus Paulußen


Markus Paulussen
Adresse Universität Bielefeld
Referat für Kommunikation
Universitätsstraße 25
33615 Bielefeld
Raum U7-xxx
Telefon 0521 106-xxxx
E-Mail webentwicklungdüm@uni-bielefeld.de
Sprechzeiten Nach Vereinbarung


Info

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi...

Tab-Höhe

Die Höhe der gesamten Seite passt sich automatisch der Höhe der einzelnen Tabs an.

Wenn Sie eine feste Tab-Höhe bevorzugen, können Sie über die Style-Angabe
  <style>.reiter-text { height: 300px; }</style>
im Kopf Ihrer Seite die gewünschte Höhe festlegen.

Wenn Sie eine feste Höhe angegeben haben, können Sie auch mit dem Hinzufügen der Klasse "scroll"
  <div class="reiter-text scroll"> ... </div>
einen Scrollbalken zur Textbox hinzufügen.

Aktiven Tab festlegen

Mit der Klasse "active" legen Sie fest welcher Tab beim Laden der Seite geöffnet sein soll.
Diese Klasse darf immer nur einem Tab zugeordnet werden.

<!-- Tab 1 -->
<div class="reiter active"> ... </div>

<!-- Tab 2 -->
<div class="reiter"> ... </div>

<!-- Tab 3 -->
<div class="reiter"> ... </div>
Biografie

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi...

Lebenslauf

1984-86

Lorem ipsum

1986-92

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi...

Publikationen

Die untenstehenden Einträge werden automatisch aus dem PUB generiert.

Sie möchten eigene PUB-Einträge einbetten?
Hier finden Sie eine Anleitung zur PUB-Integration


Journal Articles


Book Chapter


Alle Publikationen ansehen


Code-Schnipsel (gesamter Quelltext)



<div class="content_full">

  <h1>Dr. Markus Paulußen</h1><br>

  <div class="kontaktfoto">
    <img width="287" height="330" src="/kommunikation/images/personen/markus.jpg" alt="Markus Paulussen" />
  </div>

  <div class="kontaktdaten">
    <table cellspacing="0">
      <tr>
        <td align="right" valign="top" class="mit-trennlinie"><strong>Adresse</strong></td>
        <td>
          Universität Bielefeld<br />
          Referat für Kommunikation<br>
          Universitätsstraße 25<br />
          33615 Bielefeld
        </td>
      </tr>
      <tr>
        <td align="right" valign="top" class="mit-trennlinie"><strong>Raum</strong></td>
        <td>U7-xxx</td>
      </tr>
      <tr>
        <td align="right" valign="top"class="mit-trennlinie"><strong>Telefon</strong>
        <td>0521 106-xxxx</td>
      </tr>
      <tr>
        <td align="right" valign="top" class="mit-trennlinie"><strong>E-Mail</strong></td>
        <td><a href="mailto:internet@uni-bielefeld.de">internet@uni-bielefeld.de</a></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="mit-trennlinie"><strong>Sprechzeiten</strong></td>
        <td>Nach Vereinbarung</td>
      </tr>
    </table>
  </div>

  <div style="clear: both;"></div>

  <br><br>

  <div class="reiter-wrapper">

    <!-- Tab 1 -->
    <div class="reiter active">
      <span class="reiter-titel">Biografie</span>
      <div class="reiter-text">
        <insert file="/kommunikation/internet/lorem-ipsum.html" />
        <h1>Lebenslauf</h1>
        <table class="tabelle-typ2 mobile-float" cellpadding="4" cellspacing="2" width="100%">
          <tr>
            <td width="100" valign="top"><p><strong>1984-86</strong></p></td>
            <td valign="top"><p>Lorem ipsum</p></td>
          </tr>
          <tr>
            <td valign="top"><p><strong>1986-92</strong></p></td>
            <td valign="top"><insert file="/kommunikation/internet/lorem-ipsum.html" /></td>
          </tr>
        </table>
        <insert file="/kommunikation/internet/lorem-ipsum.html" />
      </div>
    </div>
    <!-- Tab 1 Ende -->

    <!-- Tab 2 -->
    <div class="reiter">
      <span class="reiter-titel">Forschung</span>
      <div class="reiter-text">
        <insert file="/kommunikation/internet/lorem-ipsum.html" />
      </div>
    </div>
    <!-- Tab 2 Ende -->

    <!-- Tab 3 -->
    <div class="reiter">
      <span class="reiter-titel">Publikationen</span>
      <div class="reiter-text">

        <p>Die untenstehenden Einträge werden automatisch aus dem PUB generiert.</p>
        <p>Sie möchten eigene PUB-Einträge einbetten?<br/>
        <a href="/kommunikation/internet/weitere/pub-einbindung.html" target="_blank"><i class="font-icon pfeil-rechts3 orange small"></i> Hier finden Sie eine Anleitung zur PUB-Integration</p>
        <br>

        <h1>Journal Articles</h1>
        <div class="publ feed pfeil-liste">
          <script type="text/javascript" charset="UTF-8" src="https://pub.uni-bielefeld.de/publication?q=heeren&q=type%3Djournalarticle&ftyp=js"></script>
          <noscript><a href="https://pub.uni-bielefeld.de/publication?q=heeren&q=type%3Djournalarticle" target="_blank">My Publication List</a></noscript>
        </div><br>

        <h1>Book Chapter</h1>
        <div class="publ feed pfeil-liste">
          <script type="text/javascript" charset="UTF-8" src="https://pub.uni-bielefeld.de/publication?q=heeren&q=type%3Dbookchapter&ftyp=js"></script>
          <noscript><a href="https://pub.uni-bielefeld.de/publication?q=heeren&q=type%3Dbookchapter" target="_blank">My Publication List</a></noscript>
        </div><br>

        <a href="https://pub.uni-bielefeld.de/publication?q=heeren&fmt=html"><i class="font-icon pfeil-rechts3 gruen small"></i> Alle Publikationen ansehen</a>

      </div>
    </div>
    <!-- Tab 3 Ende -->

  </div> <!-- reiter-wrapper Ende -->

</div> <!-- content_full ende -->

Code-Schnipsel (nur Tabs ohne Kontaktdaten)



<div class="reiter-wrapper">

  <!-- Tab 1 -->
  <div class="reiter active">
    <span class="reiter-titel">Biography</span>
    <div class="reiter-text">
      <h2>Informationen zu den jQuery Tabs</h2>
      Die Höhe der gesamten Seite passt sich automatisch der Höhe der einzelnen Tabs an.<br /><br />
      Wenn Sie eine feste Tab-Höhe bevorzugen, können Sie über die Style-Angabe <br />
      <code>
        &lt;style>.reiter-text { height: 300px; }&lt;/style><br />
      </code>
      im Kopf Ihrer Seite die gewünschte Höhe festlegen.<br /><br />
      Wenn Sie eine feste Höhe angegeben haben, können Sie auch mit dem Hinzufügen der Klasse "scroll"<br />
      <code>
        &lt;div class="reiter-text scroll">...&lt;/div><br />
      </code>
      einen Scrollbalken zur Textbox hinzufügen.
    </div>
  </div>
  <!-- Tab 1 Ende -->

  <!-- Tab 2 -->
  <div class="reiter">
    <span class="reiter-titel">Research</span>
    <div class="reiter-text">
      <h2>Blindtext</h2>
      Die Universität Bielefeld wurde 1969 mit explizitem Forschungsauftrag und hohem Anspruch an die Qualität einer forschungsorientierten Lehre gegründet.<br /><br />
      Heute umfasst sie 13 Fakultäten, die ein differenziertes Fächerspektrum in den Geistes-, Natur-, Sozial- und Technikwissenschaften abdecken.<br /><br />
      Mit rund 24.000 Studierenden in 115 Studienangeboten, ca. 2.750 Mitarbeiterinnen und Mitarbeitern, gehört sie zu den mittelgroßen Universitäten in Deutschland.<br />
    </div>
  </div>
  <!-- Tab 2 Ende -->

  <!-- Tab 3 -->
  <div class="reiter">
    <span class="reiter-titel">Publications</span>
    <div class="reiter-text scroll" style="height: 300px;">
        <p>Die untenstehenden Einträge werden automatisch aus dem PUB generiert.</p>
        <p>Sie möchten eigene PUB-Einträge einbetten?<br/>
        <a href="/kommunikation/internet/weitere/pub-einbindung.html" target="_blank"><i class="font-icon pfeil-rechts3 orange small"></i> Hier finden Sie eine Anleitung zur PUB-Integration</p>
        <br>

        <h1>Journal Articles</h1>
        <div class="publ feed pfeil-liste">
          <script type="text/javascript" charset="UTF-8" src="https://pub.uni-bielefeld.de/publication?q=heeren&q=type%3Djournalarticle&ftyp=js"></script>
          <noscript><a href="https://pub.uni-bielefeld.de/publication?q=heeren&q=type%3Djournalarticle" target="_blank">My Publication List</a></noscript>
        </div><br>

        <h1>Book Chapter</h1>
        <div class="publ feed pfeil-liste">
          <script type="text/javascript" charset="UTF-8" src="https://pub.uni-bielefeld.de/publication?q=heeren&q=type%3Dbookchapter&ftyp=js"></script>
          <noscript><a href="https://pub.uni-bielefeld.de/publication?q=heeren&q=type%3Dbookchapter" target="_blank">My Publication List</a></noscript>
        </div><br>

        <a href="https://pub.uni-bielefeld.de/publication?q=heeren&fmt=html"><i class="font-icon pfeil-rechts3 gruen small"></i> Alle Publikationen ansehen</a>

    </div>
  </div>
  <!-- Tab 3 Ende -->

</div> <!-- reiter-wrapper ende -->


Zurück zum Styleguide