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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…