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

Teil 2: CSS für Profis

Inhalt
  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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.