Stellaplan
Stellaplan weiter Alle Anleitungen

10 < 11 Webdesign | start

Seitengestaltung mit dem 12-Spalten-Raster

Die Einteilung einer Seite in 12 Spalten ermöglicht eine flexible Seitengestaltung. Mediaqueries (Einstellungen durch Abfrage der Geräte informationen) ermöglichen eine flexible Seitengestaltung

Seitengestaltung mit semantischen Elementen

Erstellen Sie aus folgenden Elementen im Body der HTML-Seite folgende Seitenaufteilung

<body>
<header><h1>Sprüche und Gedichte</h1></header>
<main>
    <nav>Menü</nav>
    <section>
        <article>Artikel 1</article>
        <article>Artikel 2 </article>
        <article>Artikel 3 </article>
    </section>
    <aside>Sidebar</aside>
</main>
<footer>Fußzeile </footer>
</body>

 

CSS-Befehle für die Seitenspalteneinteilung

* {
box-sizing: border-box;
/* Alle Elemente enthalten border und padding nach innen berechnet, das heißt, die Angaben für border und padding werden nicht zur Breite und HÖhe dazugerechnet sondern davon abgezogen */
}

/* Spalten anzeige für die Desktopansicht */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* Spalten werden alle gefloatet, d.h. nebeneinander angeordnet */
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 {
float:left;
padding: 5px;
}

Aufgabe 1: Erstellen Sie eine Seite mit einem Header (header) in voller Breite, darunter Spalten bestehend aus einer Spalte für Navigation (nav), einem Abschnitt (section) mit drei nebeneinander angeordneten Artikeln (article) und einem rechten Randbereich (aside). Unter der Section soll eine Fußzeile (footer) angezeigt werden. Benutzen Sie zur Darstellung der Spalten die oben angegebenen Klassen .col-1 bis .col-12. Damit Sie die Anzeige kontrollieren können, geben Sie den Spalten eine Hintergrundfarbe, eine Höhe und einen Rahmen und einen beschreibenden Text, z.B. Titelleiste, Spalte 1 usw.

Navigation mit Hilfe einer Liste

<nav>
 <ul>
  <li><a href="morgenstern.html">Morgenstern</a></li>
  <li><a href="schiller.html">Schiller</a></li>
  <li><a href="huchel.html>Franz Huchel</a></li>
  <li><a href="impressum.html>Impressum</a></li>
 </ul>
</nav>

Aufgabe: Erstellen Sie eine Navigation in Form einer Liste. Die Liste innerhalb des Elementes nav (nav ul) soll ohne Listenpunktanzeige (list-style-type: none) mit einem Abstand oben von ca. 15px und einem Abstand links und rechts von 0 angegeben werden.
Jeder einzelne Listenpunkt (li) soll einen Innenabstand erhalten, jeweils unterhalb eines Listenpunktes (margin-bottom) soll ein kleiner Abstand stehen, der Hintergrund jedes Listenpunktes soll eine dunklere Farbe erhalten. Die Schrift soll weiß dargestellt werden.
Da Links automatisch blau und unterstrichen dargestellt werden, muss für eine korrekte Anzeige, das Linkelement innnerhalb der Navigation (nav a) ohne Unterstreichung (text-decoration:none) und die Schriftfarbe (color) eingestellt werden.

Ergebnis sieht dann z.B. so aus:

Navigation

Mit einem Hoverbefehl kann beim Drüberfahren mit der Maus den Menüpunkt hervorheben:

/* Hoverbefehl hover erzeugt eine farbige Hervorhebung beim Mouseover */
nav li:hover {
background-color: #0099cc;
}

Ergebnis:

Gridlayout

Mediaqueries für schmale Bildschirme (Mobilgeräte) und für den Druck

Mediaqueries in der CSS-Datei ermöglichen es die Einstellungen für Medienausgaben zu definieren und zu überschreiben.

/* Definition für die Monitoransicht von 0 bis zu einer Maximalbreite von 768px. Zum Beispiel für mobil phones. */

@media only screen and (max-width: 768px) {
    [class*="col-"] {width: 100%;}
}

/* oder alternativ in dieser Schreibweise: */
@media only screen and (max-width: 768px) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {width: 100%;}
}


/* Definition, die nur im Druck gelten soll. Hier: Alle Farben werden ersetzt durch black oder white */

@media print {
  header, nav, footer, aside, li, nav li {background-color:#fff;color: black;}
}

[class*="col-"] ist die alternative Schreibweise für einen Selektor und bedeutet: alle(*) Klassen, die "col-" beinhalten, werden so definiert, wie in den geschweiften Klammern danach definiert: {...}. Ebenso könnte man alle Klassen durch Komma getrennt aneinanderreihen und danach den Befehl {...} angeben.

Aufgabe: Fügen Sie der CSS-Datei die Medienqueries hinzu und testen Sie die Bildschirmanzeige. Wird der Bildschirm auf unter 768px verkleinert müssen alle Spalten in einer Breite von 100% dargestellt werden.

Aufgabe: Erstellen Sie die Unterseiten und fügen Sie passende Texte hinzu. Gestalten Sie die Texte mit Überschriften, Quellenangaben. Unterscheiden Sie die Artikel durch unterschiedliche Gestaltungsinformationen (z.B. Border, Background, Color)

 

 

 

johannes.bucka@t-online.de. Diese Anleitung steht unter Creative Commons Lizenz: Namensnennung | Keine kommerzielle Nutzung | Weitergabe unter gleichen Bedingungen (http://de.creativecommons.org/).