CSS-Styles für alle Monitor-Größen

Teil 2: CSS für Profis

  1. CSS für Profis
  2. Teil 2: CSS für Profis
  3. Teil 3: CSS für Profis

Positionierung der Grafik

Noch fehlt die Position für die Grafik, dann ist die skalierbare Webseite fertig.

.logo_box { position: absolute;
right: 20px; top: 10px; }

Die in den Container logo_box integrierte Grafik wird absolut ausgerichtet über den äußersten Container. Das Beispiel lässt sich natürlich im nächsten Schritt noch um Navigationselemente oder ein Suchfenster erweitern.

Dynamische Navigationselemente

Auch im zweiten Beispiel ist die HTML-Struktur bewusst einfach gehalten. Innerhalb des body-Bereichs finden Sie - über div-Container definiert - drei Bereiche:

<body><div id="inhalt"><div id="inhalt_main"><div id="navi"></div></div></div></body>

Den Bereich inhalt_main können Sie anschließend frei nach Ihren Wünschen auf Basis der von HTML-Elementen gestalten.

CSS-Formatierungen

Initialisieren Sie als Erstes alle Werte von padding und margin zu Beginn der CSS-Definitionen, sodass Sie später auf keine rätselhaften Effekte stoßen, die dann auch über Debugging nur noch schwer zurückverfolgbar sind.

* { padding: 0; margin: 0; }

Passen Sie dann die Höhe Ihrer Website der Höhe Ihres Browserfensters an.

html, body { height: 100%; }

Das Gleiche wiederholen Sie für die Höhe des Containers wrap_body

#wrap_body { height: 100%; }

Zum Setzen des Hintergrunds wählen Sie, wie bereits im ersten Beispiel beschrieben, entweder eine sich wiederholende Grafik oder einen festen Farbwert aus.

Positionierung der Elemente

Die Anordnung der beiden Container inhalt und navi erfolgt fortlaufend. In der CSS-Definition legen Sie im Wesentlichen die Größe, den Textfluss und den Außenabstand fest.

#inhalt {
width: 800px;
min-height: 100%;
float: left;
margin-right: 11px;
}
#navi {
float: left;
width: 200px;
margin-right: 11px;
}

Als Breite wird für den Inhaltsbereich in Kombination mit der Navigation 1.000 Pixel festgelegt, also der Breite der beiden Container zusammen. Damit Sie bei nur recht dürftigem Inhalt keine winzige Seite haben, erzwingen Sie mit der Festlegung

min-height: 100%;

das Füllen auf die komplette Seitenhöhe. Der eigentliche Inhalt ist in dem weiteren Container inhalt_main gekapselt. Dies ist nicht zwingend notwendig, aber aus optischen Gründen, wie dem Abstand des Textes vom äußeren Rahmen oder zusätzlichen farblichen Formatierungen, empfehlenswert.

#inhalt_main {
background: white;
margin: 15px;
padding: 15px;
border: 2px solid orange;
}

Navigation optisch anpassen

Bereits in Ausgabe 11/2008 des Internet Magazin haben wir Ihnen in den CSS-Tricks gezeigt, wie Sie mithilfe von Aufzählungszeichen eine Navigation aufbauen. Dieses Vorgehen finden Sie auch in diesem Beispiel wieder. Für alle, die das Heft nicht mehr zur Hand haben, die wichtigsten Punkte dieser Entwicklung hier noch einmal in Kürze.

#navi ul {
list-style-type:
none;
margin-left: 0;
border-top: 1px
dotted gray;
}

Die erste Zeile entfernt den Punkt von den verwendeten Aufzählungszeichen. margin-left:0 minimiert den linken Freiraum auf null. Die letzte Zeile

border-top: 1px dotted gray;

hat lediglich optische Aspekte und zeichnet über den Aufzählungspunkt eine gestrichelte Linie, zur optischen Trennung zwischen den Navigationspunkten.

#navi li {
border-bottom: 1px dotted gray;
padding-bottom: 0.3em;
}

Damit auch die restlichen Aufzählungselemente voneinander getrennt werden, wird als Steuerung auch noch das Listelement als solches herangezogen. Damit der Abstand regelmäßig erscheint, wird noch ein wenig Zwischenraum über padding zur Verfügung gestellt. Zusätzlich zu diesen Formatierungen wird noch der Standardunterstrich beim klassischen Link ausgeschaltet - sowohl für das Anchor-Tag als auch das zugehörige hover-Ereignis.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".