Teil 2: CSS für Profis
- CSS für Profis
- Teil 2: CSS für Profis
- Teil 3: CSS für Profis
Positionierung der Grafik Noch fehlt die Position für die Grafik, dann ist die skalierbare Webseite fertig....
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.
