Folien



(letzte Synchronisation der PDF-Präsentation: 02.08.2017)

Falls keine PDF-Präsentation zu sehen ist, klicken Sie zum Download hier: 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.