7 - Das Layout

1. Platziere den Cursor direkt auf dem Element <header>
2. Mit Menu >Navigation >Schnell bearbeiten (Ctrl+E) öffnest du das Eingabefenster für die CSS-Stile
3. Formatiere das Header-Element:
   
   • Hintergrund (Grau): background:#a8a8a8;
   • Höhe: height:60px;
4. Formatiere das Navigations-Element <nav class="top">:
   (Ergänze den CSS-Selektor manuell: "nav.top", so beschränkst du deine Formatierung auf die Navigation)
   
   • Breite: width:25%;
   • Schwimmendes Element: float:left;
   • Beachte: %-Werte passen sich dem Elternelement an. Mit "float" lässt du das nachfolgende Element (article) links neben (nav) "schwimmen".
5. Formatiere das Inhalts-Element <article>
   • Breite: width:75%;
   • Schwimmendes Element: float:left;
   • Beachte: Die %-Werte von "nav" und "article" dürfen 100% nicht überschreiten um nebeneinander dargestellt zu werden.
6. Formatiere das Fusszeilen-Element <footer>
   • Schwimmendes Element aufheben: clear:both;
   • Höhe: height:60px;
   • Hintergrundfarbe (Grau): background:#a8a8a8;
   • Beachte: Wird ein Html-Element aus dem "normalen" Fluss entfernt und zu einem "schwimmenden" Element gemacht mit "float", muss das folgende Element mit "clear" wieder zurückgesetzt werden.
7. Speichere deine Datei
8.  Mit Klick auf den Button "Live-Vorschau" kannst du deine Seite im Browser öffnen

Weiter, die Navigation verlinken, die weiteren Ordner und Seiten erstellen

Beispieldateien: Startseite - weblabor.css

Code-Beispiel CSS (Der Html-Code bleibt unverändert)

body {
    color:#4c4c4c;
    background: #c1c1c1;
    font-family: Arial,sans-serif;
}

#container {
    background:#ffffff;
    width:500px;
    margin:auto;
}

header h1 {
    color:#a30000;
    padding: 8px;
}

h2 {
    color:#a30000;
    padding: 8px;
}

header {
    background:#a8a8a8;
    height:60px;
}

nav.top {
    width:25%;
    float:left;
}

article {
    width:75%;
    float:left;
}

footer {
    clear:both;
    height:60px;
    background:#a8a8a8;
}