Navigation

Inhalt Hotkeys
Universitäts­rechen­zentrum
Inhalt

CSS-Gestaltungselemente für Inhalte

Standard-Überschriften

Sie sollten Ihre Webseiten mit Überschriften gliedern (besonders wichtig für Screenreader). Jede Seite beginnt mit einer Überschrift <h1>. Für weitere Untergliederungen verwenden Sie je nach Hierarchie-Tiefe <h2> bis <h6>. Halten Sie diese Hierchie bitte korrekt ein.

Der Stil wird von Größe und Gewicht (normal, fett) bestimmt.

Überschrift h1 ist die oberste

Überschrift h2 ist die erste Untergliederung

Überschrift h3 ist eine zweite Unter-Hierarchie

Überschrift h4 untergliedert weiter

Überschrift h5 noch eine Unter-Hierarchie
<h1>Überschrift h1 ist die oberste</h1>
<h2>Überschrift h2 ist die erste Untergliederung</h2>
<h3>Überschrift h3 ist eine zweite Unter-Hierarchie</h3>
<h4>Überschrift h4 untergliedert weiter</h4>
<h5>Überschrift h5 noch eine Unter-Hierarchie</h5>

Falls Ihnen die Schriftgröße nicht zusagt, verwenden Sie eine Klasse h1 bis h6, die eine logische Überschrift wie eine andere aussehen lässt:

Überschrift h1, die wie eine h2 aussieht

Überschrift 2 wie eine Überschrift h4

<h1 class="h2">Überschrift h1, die wie eine h2 aussieht</h1>
<h2 class="h4">Überschrift 2 wie eine Überschrift h4</h2>

Besondere Überschriften

Überschriften mit Linie

Überschriften mit Linie in der Farbe der Einrichtung (Standard), grau oder schwarz

Überschrift ist eine Schrift, die drüber steht

Überschrift ist eine Schrift, die drüber steht

Überschrift ist eine Schrift, die drüber steht

<h1 class="linie">Überschrift ist eine Schrift, die drüber steht</h1>
<h2 class="linie grey">Überschrift ist eine Schrift, die drüber steht</h2>
<h3 class="linie black">Überschrift ist eine Schrift, die drüber steht</h3>

Überschriften mit Abstand

Überschriften mit weiterem Zeichenabstand

Überschrift ist eine Schrift, die drüber steht

Überschrift ist eine Schrift, die drüber steht

Überschrift ist eine Schrift, die drüber steht

<h1 class="topics">Überschrift ist eine Schrift, die drüber steht</h1>
<h2 class="topics">Überschrift ist eine Schrift, die drüber steht</h2>
<h3 class="topics">Überschrift ist eine Schrift, die drüber steht</h3>

Überschriften mit doppelter Linie

Überschriften mit Linien oberhalb und unterhalb in der Farbe der Einrichtung (Standard), grau und schwarz.

Überschrift ist eine Schrift, die drüber steht

Überschrift ist eine Schrift, die drüber steht

Überschrift ist eine Schrift, die drüber steht

<h1 class="teaser">Überschrift ist eine Schrift, die drüber steht</h1>
<h2 class="teaser grey">Überschrift ist eine Schrift, die drüber steht</h2>
<h3 class="teaser black">Überschrift ist eine Schrift, die drüber steht</h3>

Tabellen

Den Vorgaben des Corporate Designs folgend, werden Tabellen mit horizontalen schwarzen Linien (Standard) dargestellt. Alternativ können auch graue Linien (class="horizontal grey") verwendet werden.

Sollen Tabellen mit einer Tabellenüberschrift versehen werden, wird hierfür das Element caption genutzt, welches direkt auf das table-Element folgt.

Das summary-Element sollte nur dann eingesetzt werden, wenn besondere Hinweise notwendig sind, damit Screenreader-Nutzer die komplexe Tabelle erschließen können.

Tabellen zur Ausrichtung

Ohne Angabe der Klasse kann die Tabelle zur Ausrichtung von Text eingesetzt werden, wovon jedoch im Hinblick auf die Standardkonformität (Trennung von Inhalt und Layout) sowie Aspekte der Barrierefreiheit abzuraten ist. Sollte diese Möglichkeit dennoch genutzt werden, wird dem Browser über das Attribut role="presentation" im table-Element mitgeteilt, dass die Tabelleninformation für Screenreader auszulassen ist. Informationen zur Gestaltung von Tabellen im responsive Webdesign finden Sie außerdem in den Gestaltungsgrundlagen.

Tabellenüberschrift
Tabellenkopf Link Tabellenkopf Link Tabellenkopf Link
Tabellenzelle Link Tabellenzelle Link Tabellenzelle Link
Tabellenzelle Link Tabellenzelle Link Tabellenzelle Link
Tabellenkopf Link Tabellenkopf Link Tabellenkopf Link
Tabellenzelle Link Tabellenzelle Link Tabellenzelle Link
Tabellenzelle Link Tabellenzelle Link Tabellenzelle Link
Tabellenkopf Link Tabellenkopf Link Tabellenkopf Link
Tabellenzelle Link Tabellenzelle Link Tabellenzelle Link
Tabellenzelle Link Tabellenzelle Link Tabellenzelle Link
<table class="horizontal">
  <caption>Tabellenüberschrift</caption>
  <tbody>
    <tr>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
  </tbody>
</table>

<table class="horizontal grey">
  <tbody>
    <tr>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
  </tbody>
</table>

<table class="zeile">
  <tbody>
    <tr>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
  </tbody>
</table>

Abbildungen/Fotos auf der Webseite

Bitte verwenden Sie nur Abbildungen bzw. Fotos, an denen Sie die Rechte zur Online-Veröffentlichung haben! Bilder, die bspw. unter einer Creative-Commons-Lizenz veröffentlicht sind, können verwendet werden – jedoch nur, wenn die in der entsprechenden Lizenz genannten Bedingungen eingehalten werden (bei Lizenz CC-BY: Nennung des Namens des Urhebers).

Bilder sollten immer mit gesetztem alt-Attribut veröffentlicht werden:

<img src="image.png" alt="Bildbeschreibung">

Beachten Sie dazu die Hinweise zu Alternativtexten im Kapitel Barrierefreiheit.

Copyright-Hinweis definieren

Die Nennung des Urhebers bzw. des Copyright-Inhabers ist als Einblendung direkt auf dem Bild möglich (ohne den Schriftzug in dieses integrieren zu müssen). Dazu muss ein Bild von einem <figure />-Element mit der CSS-Klasse imgtitle und einem title-Attribut mit der Copyright-Notiz umgeben werden. Standardmäßig wird der Hinweis dann in weißer Schrift schwarz umrandet unten rechts auf dem Bild dargestellt. Mit den weiteren CSS-Klassen left (unten links) und black (schwarze Schrift weiß umrandet) kann dieser auch noch angepasst werden.
Smartphone und Laptop mit aufgerufener TU-Seite
<figure class="imgtitle black left" title="Copyright-Hinweis">
  <img class="img-responsive" src="rsrc/responsive-design.jpg"
       alt="Smartphone und Laptop mit aufgerufener TU-Seite">
</figure>

Verfügbare Zeichen

Das Corpotate Design der TU Chemnitz umfasst Symbole, die Sie auf Ihren Seiten verwenden können. Zusätzlich dazu bietet Bootstrap selbst über 200 sogenannte Glyphs aus der Zeichenmenge von Glyphicons Halflings. Weitere Informationen dazu entnehmen Sie bitte der Dokumentation von Bootstrap.

  • tucicon-​nav-up
  • tucicon-​nav-down
  • tucicon-​nav-left
  • tucicon-​nav-right
  • tucicon-link
  • tucicon-​link-extern
  • tucicon-​link-download
  • tucicon-search
  • tucicon-​key-open
  • tucicon-​key-closed
  • tucicon-​rss
  • tucicon-​sm-fb
  • tucicon-​sm-tw
  • tucicon-​sm-yt
  • tucicon-​sm-xi
  • tucicon-​sm-in

Verwendung

Die ersten vier Zeichen sollen dabei zur Navigation auf der Seite und zwischen Seiten genutzt werden. Die Symbole „tucicon-link“ und „tucicon-link-extern“ dienen der Kennzeichnung von Verweisen/Verlinkungen.

Die Icons sind in Klassen vordefiniert und werden mit Angabe der entsprechenden Bezeichnung eingebunden.

Sonderfall class="extern"

Die Klasse linkextern, die für Verlinkungen genutzt wird, bindet das Icon immer hinter dem Link-Text ein. Bei Verwendung der Klasse tucicon-link-extern steht das Symbol – wie bei allen tucicon-Klassen – vor dem Text.

Icons sind standardmäßig schwarz, können aber durch die CSS-Eigenschaft color beliebig eingefärbt werden. Auch die Änderung der Größe ist möglich.

<button class="btn btn-info" type="button">
 <span class="tucicon-search">Suche</span></button>
<button class="btn btn-info" type="button">
 <span class="tucicon-search" style="color:red">Suche</span></button>

Hervorhebungen

Besondere Textauszeichnungen können farblich hervorgehoben werden. Dazu stehen drei unterschiedliche Boxen-Typen zur Verfügung.

Hinweisboxen für besondere Hervorhebungen im Text

Hinweisboxen werden üblicherweise direkt im Text für besondere Hervorhebungen verwendet. Sie haben keinen farbigen Hintergrund, sind jedoch durch eine farblich passende Markierung auf der linken Seite sowie einen Rahmen gekennzeichnet. Die Basisklasse ist mit "tucbox-tip" bezeichnet und hat standardmäßig die Hausfarbe.

Überschrift Hinweisbox tucbox-tip Link

Diese Box erscheint in der Hausfarbe… Link

Überschrift Hinweisbox tucbox-tip-info Link

Diese Box ist grau… Link

Überschrift Hinweisbox tucbox-tip-warning Link

Diese Box soll Warnungen kennzeichnen… Link

Überschrift Hinweisbox tucbox-tip-danger Link

Diese Box kennzeichnet besonders wichtige, dringende und besonders hervorzuhebende Hinweise… Link

<div class="tucbox-tip">
<h4>Überschrift Hinweisbox <code>tucbox-tip</code> <a href="#">Link</a></h4>
<p>Diese Box erscheint in der Hausfarbe… <a href="#">Link</a></p>
</div>

<div class="tucbox-tip-info">
<h4>Überschrift Hinweisbox <code>tucbox-tip-info</code> <a href="#">Link</a></h4>
<p>Diese Box ist grau… <a href="#">Link</a></p>
</div>

<div class="tucbox-tip-warning">
<h4>Überschrift Hinweisbox <code>tucbox-tip-warning</code> <a href="#">Link</a></h4>
<p>Diese Box soll Warnungen kennzeichnen… <a href="#">Link</a></p>
</div>

<div class="tucbox-tip-danger">
<h4>Überschrift Hinweisbox <code>tucbox-tip-danger</code> <a href="#">Link</a></h4>
<p>Diese Box kennzeichnet besonders wichtige, dringende und besonders hervorzuhebende Hinweise… <a href="#">Link</a></p>
</div>

Textauszeichnung

Diese Flächen sollen Informationen innerhalb von Texten besonders hervorheben. Textauszeichnungen tragen standardmäßig die Fakultäts- oder Einrichtungsfarbe, können aber auch in grau verwendet werden.

Dies stellt eine besondere Hervorhebung im Text dar und kann beliebig erweitert werden. Link
Dies stellt eine besondere Hervorhebung im Text dar und kann beliebig erweitert werden. Link
<div class="tucbox-area">Dies stellt eine besondere <strong>Hervorhebung</strong> im Text dar
und kann beliebig erweitert werden.  <a href="#">Link</a></div>

<div class="tucbox-area-info">Dies stellt eine besondere <strong>Hervorhebung</strong> im Text dar
und kann beliebig erweitert werden. <a href="#">Link</a></div>

Panels

Panels können ebenfalls der Hervorhebung im Text dienen. Anders als bei den Textauszeichnungen sind Panels nicht im gesamten Bereich farblich hinterlegt. Lediglich die Überschrift und die Umrandung ist farblich der jeweiligen Klasse angepasst. Auch Panels sind standardmäßig in Fakultäts- oder Einrichtungsfarbe und können alternativ in grau verwendet werden.

Überschrift im Panel, auch mit Link

Hier steht der Inhalt.

Überschrift im Panel tucbox-panel-infol, auch mit Link

Hier steht der Inhalt.
<div class="tucbox-panel">
<div class="panel-heading">
<h3 class="panel-title">Überschrift im Panel, <a href="#">auch mit Link</a></h3>
</div>
<div class="panel-body">Hier steht der Inhalt.</div>
</div>

<div class="tucbox-panel-info">
<div class="panel-heading">
<h3 class="panel-title">Überschrift im Panel <code>tucbox-panel-info</code>l, <a href="#">auch mit Link</a></h3>
</div>
<div class="panel-body">Hier steht der Inhalt.</div>
</div>

Alert-Boxen

„Alerts“ haben keine runden Ecken und keine Schatten. Es sind vier Farben (Fakultäts- bzw. Einrichtungsfarbe, grau, orange für Warnungen, rot für Gefahr/Verbote) verfügbar. Eine typische Verwendung für Alerts ist die Warnung bei fehlender Eingabe in ein Formular.

Gut gemacht! Sie haben eben diese Botschaft gelesen.
Obacht! Dieser Text braucht Ihre Aufmerksamkeit, ist aber nicht extrem wichtig.
Warnung! Sie sollten diesem Text schon Bedeutung zumessen!
Fehler! Diese wichtigen Informationen beschreiben die Details.
<div class="alert alert-success"><strong>Gut gemacht!</strong> Sie haben eben <a href="#">diese Botschaft</a> gelesen.</div>
<div class="alert alert-info"><strong>Obacht!</strong> Dieser Text braucht <a href="#">Ihre Aufmerksamkeit,</a> ist aber nicht extrem wichtig.</div>
<div class="alert alert-warning"><strong>Warnung!</strong> Sie sollten diesem Text schon <a href="#">Bedeutung</a> zumessen!</div>
<div class="alert alert-danger"><strong>Fehler!</strong> Diese <a href="#">wichtigen Informationen</a> beschreiben die Details.</div>

Buttons

Die in Bootstrap enthaltenen Standard-Button-Klassen wurden wie folgt umdefiniert. Der Button der Klasse btn-default wird in Einrichtungs- bzw. Fakultätsfarbe dargestellt.

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>

Gleiches gilt für alle Klassen, die Buttons verwenden, wie beispielsweise die Klasse btn-group.

Schaltflächen sind eigentlich für Aktionen gedacht. Ab und zu werden aber Links auch wie Schaltflächen gestaltet. Im Sinne der Barrierefreiheit ist in solchen Fällen daran zu denken, dem Screenreader diese Information über die WAI-ARIA-Rolle mitzugeben.:

<a class="btn btn-default" href="/urz/www/bf" role="button">Hinweise zur Barrierefreiheit</a>

Formulare

Für webbasierte Formulare ist das Responsive Design besonders nützlich, damit sowohl auf kleinen Mobilgeräten als auch am normalen PC-Bildschirm sinnvolle Eingaben gemacht werden können. Dafür ist die Verwendung des Grids sehr nützlich, wie man am folgenden Beispiel schon sieht:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputName" class="col-xm-3 control-label">Name</label>
    <div class="col-xm-9">
      <input type="text" class="form-control" id="inputName" placeholder="Name">
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail" class="col-xm-3 control-label">E-Mail-Adresse</label>
    <div class="col-xm-9">
      <input type="email" class="form-control" id="inputEmail" placeholder="E-Mail-Adresse">
    </div>
  </div>
  <div class="form-group">
    <div class="col-xm-offset-3 col-xm-9">
      <div class="checkbox">
        <label><input type="checkbox" id="checkExpert"> Experte</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xm-offset-3 col-xm-9">
      <button type="submit" class="btn btn-default">Absenden</button>
    </div>
  </div>
</form>

Hinweise

Presseartikel