Zweispaltiges Layout
Folien
Falls keine PDF-Präsentation zu sehen ist: Direktdownload der PDF-Präsentation
Übungen
Zusätzliche Dateien (Bilder, Klassendiagramme, HTML-Vorlagen) finden Sie in der Materialsammlung. Diese Übungen können Sie als txt-Datei herunterladen.
Übungen: CSS - Zweispaltige Layouts
CSS_16-1: CSS-Layout gestalten (zwei Spalten)
Gegeben sei folgender HTML-Code (Auszug):
<div class="navigation">
<ul>
<li><a href="#" title="Starseite">Home</a></li>
<li><a href="#" title="Zum DVD-Verleihsystem">DVD leihen</a></li>
<li><a href="#" title="Impressum">Impressum</a></li>
</ul>
</div>
<div class="hauptbereich">
<h1>Willkommen bei Easy DVD 3000!</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="footer">
<p>All rights reserved (Name).</p>
<p>(c) 2010</p>
</div>Erstellen Sie daraus mithilfe eines CSS-Stylesheets ein zweispaltiges Layout. Lassen Sie dazu die Navigation links "floaten" und verschieben Sie den Hauptbereich mittels "border-left" um 200 Pixel nach rechts.