| Grundidee |
HTML-Elemente können mit CSS exakt positioniert werden. Zudem können die Ausdehnung, der Textfluss und die Reihenfolge bezüglich Überlappung festgelegt werden. Grundlage für ein erfolgreiches Webdesign per CSS ist die Analyse der Seitenstruktur. Eine Textseite besteht typischerweise aus einem Titelbereich, einem Hauptbereich, einer Navigation und einem Fussbereich. Entsprechend können mit HTML5 vier Box-Elemente definiert werden. Beispiel |
|
| HTML-Code inkl. integr. CSS |
<!DOCTYPE html>
<html lang="de">
<head>
<title>Einstieg in HTML5</title>
<meta charset="utf-8" />
<style type="text/css">
header {width: 100%; background-color: khaki; padding: 5px; }
nav {width: 12%; float: left; padding: 5px; }
section {width: 85%; float: right; padding: 5px; border-left: solid #cccccc; }
footer {width: 100%; clear: both; background-color: khaki; padding: 5px; }
header img {margin-top: 1em; }
nav li {list-style-type: none; }
nav a {text-decoration: none; }
article {border-bottom: solid #eeeeee; }
footer {text-align: right; }
</style>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<img src="logo.gif" align="left"/>
<h1>für Kreative-Produkte</h1>
</header>
<nav>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</nav>
<section>
<article>
<h2>Pressekonferenz vom ...</h2>
<p>Dieser Absatz hat verschiedene Betonungen: hier <em>kursiv</em>, hier
ein <q>Zitat</q> und hier <strong>fett</strong>.</p>
</article>
<article>
<h2>Produktpräsentation</h2>
<p>Text mit <strong>starker Hervorhebung</strong> lenkt die Aufmerksamkeit.<br />
Anm. der Redaktion: war immer schon so. </p>
</article>
</section>
<footer>
<address>
Firma iDea<br />
Industriestrasse 14<br />
5577 Produkthausen<br />
<a href='mailto:info@idea.com'>Kontakt</a>
</address>
</footer>
</body>
</html>
|
Die Inhalte der drei Strukturelemente werden mit <div>...</div> geklammert und dem Attribut id mit einem eindeutigen Namen versehen. |
| Positionierung |
position: [absolute/fixed/realitve] top: [..px/%/auto] left: [..px/%/auto] bottom: [..px/%/auto] right: [..px/%/auto] width: [..px/%/auto] min-width: [..px] max-width: [..px] height: [..px/%/auto] min-height: [..px] max-height: [..px] overflow: [visible/hidden/scroll/auto] direction: [ltr/rtl] float: [left/right/none] clear: [left/right/both/none] z-index: [Zahl] display: [block/inline/list-item/marker/run-in/compact/none] visibility: [hidden/visible] clip: rect(..px ..px ..px ..px) |
Positionsart Position von oben Position von links Position von unten Position von rechts Breite Mindestbreite Maximalbreite Höhe Mindesthöhe Maximalhöhe Überlauf bei übergrossem Inhalt Schreibrichtung links->rechts / rechts->links Textumfluss Aufhbeung des Textumflusses Schichtposition bei Überlappung (Reihenfolge) Anzeigeart bzw. Nichtanzeige ohne Platzhalter Anzeige bzw. Nichtanzeige mit Platzhalter Anzeigebereich eingrenzen |