Navigation

Inhalt Hotkeys
Universitäts­rechen­zentrum
Beispiele

Beispiele

Überschrift

Lorem ipsum dolor sit amet, …

Zweispaltiges Design

Auditorium maximum im neuen Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Auditorium maximum im neuen 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/audimax.jpg" class="img-responsive" style="width:260px;margin:auto" alt="Auditorium maximum im neuen 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/audimax.jpg" class="img-responsive" alt="Auditorium maximum im neuen 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

Auditorium maximum im neuen 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/audimax.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

Auditorium maximum im neuen 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/audimax.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.
Auditorium maximum im neuen Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Auditorium maximum im neuen Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Auditorium maximum im neuen Hörsaalgebäude
<div class="row spacing">
  <div class="col-xm-4"></div>
  <div class="col-xm-4"><img src="/tu/images/audimax.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/audimax.jpg" class="img-responsive" /></div>
  <div class="col-xm-4"></div>
  <div class="col-xm-4"><img src="/tu/images/audimax.jpg" class="img-responsive" /></div>
</div>

Anpassendes Design

Verändern Sie zum Testen die Breite Ihres Browserfensters!
Auditorium maximum im neuen Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Auditorium maximum im neuen Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Auditorium maximum im neuen 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/audimax.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/audimax.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/audimax.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

  • Einblick in Softwareunternehmen für Studentinnen und Schülerinnen

    Das Mentoring-Projekt „Girls´ Tandem“ bot MINT-interessierten Schülerinnen und MINT-Studentinnen der TU Chemnitz Einblicke in das aus der TU ausgegründete Unter-nehmen „BASELABS GmbH“ …

  • Robotik zum Anfassen

    Die „RoboSchool“ der TU Chemnitz verbindet erfolgreich Studienorientierung mit Roboter-Bau für Schülerinnen und Schüler – Nächstes Ferienangebot startet am 18. Februar 2019 – Anmeldung bis Ende Januar …

  • Auf ins Ausland mit Erasmus+!

    Bewerbung für ein Auslandssemester im Wintersemester 2019/20 oder im Sommersemester 2020 – Frist bis zum 31. März 2019 …

  • "TU-Ferienspaß" geht in die zehnte Runde

    Familienservice der TU Chemnitz lädt vom 18. bis 22. Februar 2019 zum winterlichen Ferienprogramm ein - Anmeldungen sind ab sofort möglich …