Navigation

Springe zum Hauptinhalt
Universitäts­rechen­zentrum
Beispiele

Beispiele

Überschrift

Lorem ipsum dolor sit amet, …

Zweispaltiges Design

Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
<h2 class="linie">Überschrift</h2>
<p>Lorem ipsum dolor sit amet, …
</p>

<h3>Zweispaltiges Design</h3>
 <div class="row spacing">
  <div class="col-xm-4"><img src="/tu/images/campus.jpg"
  class="img-responsive" style="width:260px;margin:auto" alt="Das Hörsaalgebäude"></div>
  <div class="col-xm-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.</div>
 </div>
 <div class="row spacing">
  <div class="col-xm-4"><img src="/tu/images/campus.jpg" class="img-responsive" alt="Das Hörsaalgebäude"></div>
  <div class="col-xm-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.</div>
 </div>

Hinweis

  • Die Klasse "spacing" fügt unter jeder Spalte einen Abstand von 7px ein.

Dateikopf

<?php

// Konfigurationsdatei laden
require_once('../config/config.inc');

// Variablen für diese Seite separat setzen
$keywords 'Beispielseite, Schlüsselwort';

// CSS-Variable initialisieren, wenn das in der config.inc noch nicht gemacht wurde
if (!isset($css_in))
   $css_in '';

// CSS-Dateien hinzufügen (Vor @import darf kein anderer Befehl kommen!)
$css_in '@import url(zweites-css.css);' $css_in;
$css_in '@import url(erstes-css.css);' $css_in;

// Weiteren CSS-Code hinzufügen
$css_in .= '
.bsp {
   padding-top: 14px;
}
';

// Laden von Erweiterungen
require_once('php/hs.inc');

// Laden des Templates mit speziellem Seitentitel
seite(__FILE__'Seitentitel');?>

Verschachteltes zweispaltiges Design

Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
<div class="row spacing">
  <div class="col-xm-6"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-6"><div class="row bsp">
      <div class="col-xs-6"></div>
      <div class="col-xs-6"></div>
    </div>
  </div>
</div>

Asymmetrisches zweispaltiges Design

Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
<div class="row spacing">
  <div class="col-xm-3"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-9"></div>
</div>

Dreispaltiges Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Das Hörsaalgebäude
<div class="row spacing">
  <div class="col-xm-4"></div>
  <div class="col-xm-4"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-4"></div>
</div>
<div class="row spacing">
  <div class="col-xm-4"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-4"></div>
  <div class="col-xm-4"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
</div>

Anpassendes Design

Verändern Sie zum Testen die Breite Ihres Browserfensters!
Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Das Hörsaalgebäude
<div class="row spacing">
  <div class="col-xm-6 col-md-4 col-lg-3">Verändern Sie …</div>
  <div class="col-xm-6 col-md-4 col-lg-3"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-6 col-md-4 col-lg-3 clear-xm">Lorem ipsum …</div>
<!-- clear-xm zwingt das Element für diese Displaygröße auf eine neue Zeile,
     sonst könnte es unter das vorherige Element rutschen. //-->
  <div class="col-xm-6 col-md-4 col-lg-3 clear-md"><img
  src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-6 col-md-4 col-lg-3 clear-xm clear-lg">Lorem ipsum …</div>
  <div class="col-xm-6 col-md-4 col-lg-3"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
</div>

Hinweis

  • Die Klassen "clear-*" zwingen ein Element auf die nächste Zeile.
    • Auf die angegebene Breite beschränkt
    • Beispiel: class="clear-xm" erzwingt einen Zeilenumbruch von 550px bis 800px
    • Nötig, wenn…
      • die Spalten nicht mehr alle auf einer Zeile (class="row") dargestellt werden können,
      • noch mehr als zwei Spalten auf der Zeile sind oder
      • die umspringende Spalte von der Breite unter das vorherige Element passt.

Presseartikel

  • Chemnitzer Linux-Tage 2021: „Mach es einfach anders.”

    Für eine der größten Linux- und Open-Source-Veranstaltungen im deutschsprachigen Raum können bis zum 10. Januar 2021 Beiträge eingereicht werden …

  • Besondere Helden

    Bundesregierung veröffentlichte Video-Clip mit fiktivem Chemnitzer Studenten Anton Lehmann als Teil der Corona-Kommunikation und landet Hit im Internet - Klare Botschaft: "Bleib zuhause" …

  • Motivation ist alles

    Der diesjährige Tag des wissenschaftlichen Nachwuchses am 5. November 2020 stand stark unter dem Einfluss der Pandemie-Situation und widmete sich drängenden Fragen rund um die Promotion und die akademische Karriere - Im Fokus: das Thema "Motivation" …

  • Interaktive Hörbücher für mehr Audio-Genuss

    Alumni und Student der TU Chemnitz gründeten „audory“, eine Plattform für interaktive Geschichten – Testerinnen und Tester für App gesucht …