CSS: Layoutbeispiele
Das feste Layout
Ein Layout, dessen Dimensionen in der Einheit Pixel angegeben sind und sich deshalb auf unterschiedlichen Geräten nicht anpassen kann, wird als festes Layout bezeichnet. Das feste Layout hatte seine Berechtigung, als es nur Computermonitore mit definierten Auflösungen gab. Mit dem Aufkommen von Tablets und Smartphones mit unterschiedlichsten Auflösungen lässt sich z.B. eine Seite mit der Breite von 1024px auf auf einem Tablet mit einer Auflösung von 80px nicht vernünftig darstellen. Einen Ausweg bietet das adaptive Layout. Auch dies ist ein festes Layout, dass aber in verschiedenen Versionen existiert. Je nach Auflösung und verfügbarem Platz wird auf dem entsprechenden Gerät die beste mögliche Version angezeigt. Feste Layouts sind eigentlich aber nur dann nötig, wenn es um exakte Einhaltung von Pixelwerten geht.
Das fluide Layout
Beim fluiden Layout werden die Dimensionen in Prozenten des Anzeigefensters angegeben. Ändert sich die Fenstergröße, ändern sich auch die Dimensionen des Layouts. Inhalte wie Texte und Bilder bleiben jedoch in der Größe erhalten.
Das responsive Layout
Hier werden die Eigenschaften des adaptiven und fluiden Layouts kombiniert. Auch hier gibt es Schwellenwerte, bei denen sich das Layout deutlich ändert; zwischen diesen Werten verhält es sich aber wie bei einem fluiden Design. Ein besonderes Augenmerk bedarf es aber auch bei der Schrift- und Bildgröße.
Betrachtet man diverse Internetseiten, so sieht man, dass sich der Aufbau der Seiten sehr ähnelt:
Headerzeile, Navigationszeile, 1-3 Spalten, Fußzeile
Headerzeile, Navigationsspalte, 1-2 Spalten, Fußzeile
Headerzeile, Inhaltszeile, weitere Zeile
1-3 Spalten
Das folgende Bild gibt einen allgemeinen Aufbau wieder bzw. könnte um weitere Zeilen und Spalten ergänzt werden:
Dieses Raster soll als Grundlage für das Grid-Layout dienen. Der folgende HTML-Code ist Grundlage für die Beispiele. Wir benötigen einen Header, der ein Logo und eine Überschrift enthält. Es folgt eine Zeile für die Navigation mit drei Links. In der dritten Zeile befinden sich drei Spalten (aside, main, aside). Abgeschlossen wird die Seite von einem Footer.
<html lang="de">
<head>
<title>Ohne_Titel</title>
<meta charset="utf-8">
<link href="Ohne_Titel.css" rel="stylesheet" type="text/css" />
<!-- Diese externe Style-Datei muss noch erstellt werden. -->
</head>
<body>
<header class="header">
<div class="logo"> </div>
<h1>ÜBERSCHRIFT</h1>
</header>
<nav class="top-nav">
<ul class="main-nav">
<li><a href="">Dummy 1</a></li>
<li><a href="">Dummy 2</a></li>
<li><a href="">Dummy 3</a></li>
</ul>
</nav>
<aside class="left-col">
<h3>Überschrift links</h3>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</aside>
<main class="main-content">
<section>
<h1>Hauptüberschrift</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 nonumyeirmod 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.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore feugait nulla facilisi.</p>
</section>
</main>
<aside class="right-col">
<h3>Überschrift rechts</h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
</aside>
<footer class="footer">
<p>At accusam aliquyam diam diam dolore dolores duo eirmod eos erat</p>
</footer>
</body>
</html>
Im ersten Beispiel soll das Layout aus einer Überschriftszeile, einer Navigationszeile, drei Spalten und einer Fußzeile bestehen. Der HTML-Code kann so übernommen werden. Der notwendige CSS-QUellcode sieht wie folgt aus:
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
main {
display:block;
}
/* -----einfacher Style für Geräte kleiner 640px----------- */
.header {
text-align: center;
}
.main-content {
padding: 2rem 2rem 1rem 3rem;
}
.left-col {
border-top: 1px dashed #ddd;
margin-top: 1em;
padding: 2rem 3rem 2rem 2rem;
}
.right-col {
border-top: 1px dashed #ddd;
margin-top: 1em;
padding: 2rem 3rem 2rem 2rem;
}
.footer {
padding: 0.6em 2rem;
text-align: center;
}
.section {
margin: 1em 0;
}
/*** Textauszeichnungen ***/
h1 {
margin: 0 0 0.625em;
}
h2 {
margin: 0.5em 0;
}
h3 {
margin: 0.6em 0;
}
p {
margin: 0.5em 0;
}
ul,
ol {
padding: 0;
margin: 0 0 0.625em 2rem;
}
.main-nav {
margin: 0;
}
/* ----------------------------------------------------------------------------- *
* Styles für Desktops ab *
* 640px / 16px/em = 40em *
* ----------------------------------------------------------------------------- */
@media screen and (min-width: 40em) {
.gridcontainer {
margin:0 auto;
background-color: #fff;
/* nur Internet Explorer */
display: -ms-grid;
-ms-grid-columns: 2fr 6fr 2fr;
-ms-grid-rows: auto auto auto auto;
/*cW3C-Syntaxc*/
display: grid;
grid-template-columns: 2fr 6fr 2fr;
grid-template-rows: auto auto auto auto;
}
.header {
/* nur Internet Explorer */
background-color:lightsalmon;
-ms-grid-column: 1;
-ms-grid-column-span: 4;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
/* W3C-Syntax:*/
grid-area: 1 / 1 / 2 / 4;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.top-nav {
/* nur Internet Explorer */
background-color:yellow;
-ms-grid-column: 1;
-ms-grid-column-span: 4;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
/* W3C-Syntax: */
grid-area: 2 / 1 / 3 / 4;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.main-nav {
/* nur Internet Explorer */
display: -ms-grid;
-ms-grid-columns: 0.167fr 0.167fr 0.167fr 0.167fr 0.167fr 0.167fr;
/*-ms-grid-rows: auto;*/
/* W3C-Syntax: */
display: grid;
grid-template-columns: repeat(6, auto);
/*grid-template-rows: auto;*/
}
/* Navigation nur Internet Explorer - Start */
.main-nav > li {
-ms-grid-column-span: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
}
.main-nav > li:nth-of-Type(1) {
-ms-grid-column: 1;
}
.main-nav > li:nth-of-Type(2) {
-ms-grid-column: 2;
}
.main-nav > li:nth-of-Type(3) {
-ms-grid-column: 3;
}
.main-nav > li:nth-of-Type(4) {
-ms-grid-column: 4;
}
.main-nav > li:nth-of-Type(5) {
-ms-grid-column: 5;
}
.main-nav > li:nth-of-Type(6) {
-ms-grid-column: 6;
}
/* Navigation nur Internet Explorer - Ende */
.main-nav > li {
text-align: center;
border: none;
width: auto;
}
.main-nav > li > a,
.main-nav > li > b {
padding: 0.7em 0;
font-size: 1.6rem; /* 16px */
}
.main-nav::after {
content: '';
display: table;
clear: both;
}
.main-content {
padding: 2em 2rem;
background-color: #fff;
/* nur Internet Explorer */
-ms-grid-column: 2;
-ms-grid-column-span: 1;
-ms-grid-row: 3;
-ms-grid-row-span: 1;
/* W3C-Syntax: */
grid-area: 3 / 2 / 4 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.left-col {
padding: 2rem;
background-color: lightgreen;
margin-top:0;
/* nur Internet Explorer */
-ms-grid-column: 1;
-ms-grid-column-span: 1;
-ms-grid-row: 3;
-ms-grid-row-span: 1;
/* W3C-Syntax: */
grid-area: 3 / 1 / 4 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.right-col {
padding: 2rem;
background-color: lightblue;
margin-top:0;
/* nur Internet Explorer */
-ms-grid-column: 3;
-ms-grid-column-span: 1;
-ms-grid-row: 3;
-ms-grid-row-span: 1;
/* W3C-Syntax: */
grid-area: 3 / 3 / 4 / 4;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.footer {
/* nur Internet Explorer */
background-color:lightgray;
-ms-grid-column: 1;
-ms-grid-column-span: 4;
-ms-grid-row: 4;
-ms-grid-row-span: 1;
/* W3C-Syntax:*/
grid-area: 4 / 1 / 5 / 4;
/* grid-area: row-start / column-start / row-end / column-end; */
}
}
Im zweiten Beispiel befindet sich das Menue in der linken Spalte, die drei anderen Spalten bleiben bestehen. Die obere CSS-Datei muss wie folgt geändert werden:
/*
-----------------------------------------------------------------------------
*
* Styles für Desktops ab *
* 640px / 16px/em = 40em *
*
-----------------------------------------------------------------------------
*/
@media screen and (min-width: 40em) {
.gridcontainer {
margin:0 auto;
background-color: #fff;
/* nur Internet Explorer */
display: -ms-grid;
-ms-grid-columns: 2fr 2fr 6fr 2fr;
-ms-grid-rows: auto auto auto;
/*cW3C-Syntaxc*/
display: grid;
grid-template-columns: 2fr 2fr 6fr 2fr;
grid-template-rows: auto auto
auto;
}
.header {
/* nur Internet Explorer */
background-color:lightsalmon;
-ms-grid-column: 1;
-ms-grid-column-span: 4;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
/* W3C-Syntax:*/
grid-area: 1 / 1 / 2 / 5;
/* grid-area:
row-start / column-start / row-end / column-end; */
}
.top-nav
{
/* nur Internet Explorer */
background-color:yellow;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
/* W3C-Syntax: */
grid-area: 2 / 1 / 3
/ 2;
/* grid-area: row-start / column-start / row-end / column-end;
*/
}
.main-nav {
box-shadow: none;
margin: 1.6em 0 0;
padding: 0;
}
.main-nav > li {
width: 100%;
text-align:
left;
}
.main-nav > li > a,
.main-nav > li > b {
padding: 0.5em 3rem;
display: block;
}
.main-nav a:link,
.main-nav a:visited {
color: #fff;
}
.main-nav a:hover,
.main-nav a:focus,
.main-nav a:active {
color: #fff;
background-color: #96cfbf;
}
.main-nav__item-act b {
color:
#397367;
}
.main-content {
padding: 2em 2rem;
background-color: #fff;
/* nur Internet Explorer */
-ms-grid-column: 3;
-ms-grid-column-span: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
/* W3C-Syntax: */
grid-area: 2 / 3 / 3
/ 4;
/* grid-area: row-start / column-start / row-end / column-end;
*/
}
.left-col {
padding: 2rem;
background-color:
lightgreen;
margin-top:0;
/* nur Internet Explorer */
-ms-grid-column: 2;
-ms-grid-column-span: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
/* W3C-Syntax: */
grid-area: 2 / 2 / 3
/ 3;
/* grid-area: row-start / column-start / row-end / column-end;
*/
}
.right-col {
padding: 2rem;
background-color:
lightblue;
margin-top:0;
/* nur Internet Explorer */
-ms-grid-column: 4;
-ms-grid-column-span: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
/* W3C-Syntax: */
grid-area: 2 / 4 / 3
/ 5;
/* grid-area: row-start / column-start / row-end / column-end;
*/
}
.footer {
/* nur Internet Explorer */
background-color:lightgray;
-ms-grid-column: 1;
-ms-grid-column-span: 4;
-ms-grid-row: 4;
-ms-grid-row-span: 1;
/* W3C-Syntax:*/
grid-area: 3 / 1 / 4 / 5;
/* grid-area:
row-start / column-start / row-end / column-end; */
}
}
Ein komplettes Beispiel wird im Hauptregister "Alternativen" dargestellt.