Zweispaltiges Layout
Falls über diesem Text keine PDF-Präsentation zu sehen ist, wurde diese von Ihrem Browser direkt runtergeladen (wenn Sie z.B. mit Safari@Mac surfen). Sie könnnen zum Download auch hier klicken: Direktdownload PDF-Präsentation
Übungen
Alle Übungen finden Sie in der Materialsammlung (dort auch alle zusätzlichen Dateien wie Bilder, Klassendiagramme oder HTML-Vorlagen!).
Die aktuelle Übung können Sie hier als txt-File herunterladen.
***** Übungen: CSS - Zweispaltige Layouts *****
CSS_16-1: CSS-Layout gestalten (zwei Spalten)
Gegeben sei folgender HTML-Code (Auszug):
HTML-Code<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.