Heutzutage hat man es nicht mehr mit ein paar unterschiedlichen Bildschirmgrößen eines Desktop Bildschirms zu tun, sondern muss auf eine Vielzahl verschiedener Viewports reagieren. Stichwort "Responsive Design" (responsive= reagierend, ansprechbar). Man unterscheidet hier verschiedene Layoutansätze:
Desweiteren sind diese Begriffe nicht in Stein gemeißelt. Selbstverständlich kann man auch alles miteinander mischen. Beispielsweise eine Spalte für die Navigation mit fester Breite, währen der andere Teil in einem fluiden Design angelegt ist. Oder bestimmte Blöcke mit fester Breite, die je nach Größe anders angeordnet werden.
Mithilfe von CSS kann man also Layouts mit festen Maßangaben (Pixeln) oder relativen Maßen (Prozent) anlegen. Bei fixierten Layouts erstellt man ein div oder ein anderes Blockelement, als Wrapper, in den man alle weiteren Inhalte der Webseite einfügt. Hier gibt man eine feste Gesamtbreite an, die auf eine bestimmte Bildschirmgröße zielt. Für 1024 Pixel breite Bildschirme nimmt man in der Regel eine Breite von 960 Pixeln, um Platz zu lassen für Betriebssystemelemente wie beispielsweise Scrollleisten.
In diesen Wrapper gibt man eine Anzahl von Spalten ein, die als Basis für das Layout dienen. Beispielsweise das bekannte 960gs beruht auf 12 Spalten mit 60 Pixeln und 10 Pixeln Außenabstand. Auf dieser Grundlage werden alle realen Layoutblöcke erstellt. So kann man beispielsweise eine 3 spaltiges Layout einfügen, wobei jeder Block aus 4 Spalten besteht. 4 * 3=12.
Mit dem Gridcalculator kann man sich so ein Grid erstellen, um es für ein Mockup zu benutzen. Ein Mockup ist eine grafische Vorlage für das Webseiten Layout.
Wenn man aus so einem festen Gridsystem ein fluides Gridsystem erstellen will, so muss man die Pixel in Prozent umrechnen:
(Spaltenbreite * 100) / Gesamtbreite des Gridsystems = Spaltenbreite in Prozent
Siehe auch Umrechner Pixel in em
Ein adaptives Layout arbeitet mit Umbruchpunkten (Breakpoints). Die einfachste Möglichkeit wäre ein Layout für 2 verschiedende Bildchrimgrößen. Auf folgende Weise lässt sich so eine CSS Bedingung erstellen:
@media (max-width: 960px){
/*CSS Anweisungen*/
}
In die geschweiften Klammern werden CSS Anweisungen notiert, die nur zum Tragen kommen, wenn eine Bildschirmgröße von 960 Pixeln unterschritten wird. Mehr dazu unter "Media Queries".
Siehe auch Media Queries / Der richtige Breakpoint
<div id="titelzeile"> <div id="navi-imprint"> <div id="inhalt"> </div> </div> </div>
Weise jeder id ein Stylesheet mit einer Hintergrundfarbe zu.
#titelzeile {
background-color: rgb(119,52,40);
}
#navi_imprint {
background-color: rgb(248,196,135);
}
#inhalt {
background-color: rgb(246, 236, 216);
}
Weisen jeder id einen Innenabstand mittels padding zu.
#titelzeile {
padding:15px 2px 2px 2px;
background-color: rgb(119,52,40);
}
#navi_imprint {
padding: 10px;
background-color: rgb(248,196,135);
}
#inhalt {
padding: 50px;
background-color: rgb(246, 236, 216);
}
Fügen Sie im Body Bereich Inhalte ein.
Nehmen Sie weitere Formatierungen vor.
#titelzeile {
padding:15px 2px 2px 2px;
background-color: rgb(119,52,40);
text-align:center;
}
#navi_imprint {
padding: 10px;
margin-top: 10px;
background-color: rgb(248,196,135);
}
#inhalt {
padding: 50px;
margin: 5px;
margin-top: 0px;
background-color: rgb(246, 236, 216);
text-align:left;
}
Weisen Sie in einer externen Stylesheet Datei weitere Formatierungen zu und binden Sie diese im head - Bereich ein.
<link type="text/css" rel="stylesheet" href="standard13.css">
weiteres Beispiel mit zentriertem Inhalt
In diesem Beispiel sind nur 2 Bereiche erforderlich. Der Bereich für den Hauptinhalt und ein Menü, welches vom Text des Hauptinhalts umflossen wird.
Das Menü wird vom Rest umflossen, deshalb muss es am Anfang stehen. Es wird mit dem HTML5 Element nav ausgezeichnet.
<nav>Link Link...</nav>
Der eigentliche Inhalt der Seite wird in einem darauffolgenden Element <article> eingefügt.
Weisen Sie nun das Stylesheet für Farbe und weitere Formatierungen zu. Das wichtigste ist, dass das nav-Element die Eigenschaft float: right bekommt. Es benötigt eine widht oder min-width Angabe. Für einige Browser sollte auch display: block eingefügt werden.
Ein klassisches Layout bei Webseiten ist der 2-Spalter mit einem Menü am linken Rand und dem Hauptbereich rechts. Die Seite ist folgendermaßen aufgebaut.
<div id="container">
<nav>
</nav>
<article>
</article>
</div>
Hier wurde ein zweispaltiges Layout erreicht, indem die Navigation mit float: left am linken Rand plaziert wird. Daneben erscheint der eigentliche Inhaltsbereich. Das padding-left des Inhalts ist so groß wie die gesamte linke Spalte.
Außerdem wurde noch mittels media queries ein einspaltiges Layout für Smartphones oder kleine Viewports hinzugefügt.
Die komplizierten Berechnungen der wirklichen Breite oder Höhe einer Box durch hinzuaddieren von padding, border und margin kann man vereinfachen durch box-sizing.
Eine andere Möglichkeit prozentuale und absolute Werte zu kombinieren bietet die calc() Funktion.
Hier erzeuge ich ein dreispaltiges Layout mit float und prozentualen Breitenangaben. Damit der Hintergrund sich über die gesamte Höhe der Seite erstreckt, also auch über die eigentliche Höhe einer Spalte hinaus, habe ich die Hintergrundfarben mittels eines Verlaufes im body eingefügt. Wenn der Viewport sehr klein ist, kann es vorkommen, dass das linke Menü in den mittleren Bereich hineinragt. Im nächsten Beispiel wird das Problem gelöst.
Das geht aber auch anders und zwar mit dem Trick für gleich hohe Spalten siehe unten.
so sieht das gleiche Beispiel aus mit dem Trick für gleiche hohe Spalten
Im folgenden Beispiel gibt es außen links und rechts jeweils eine Spalte mit fixer Breite. Das ist vor allen Dingen bei kleinen Bildschirmgrößen von Vorteil. Der mittlere Bereich, der sowieso größer ist, kann ruhig etwas kleiner werden.
Der Hintergrund wurde genau wie im vorigen Beispiel mit einem Farbverlauf für den body definiert. Damit das auch bei dieser Mischung aus Prozent und absoluten Pixelwerten funktioniert, wurde die CSS Methode calc() angewendet. Damit hat man die Möglichkeit Prozent und Pixel zu mischen oder zu berechnen.
calc(100% - 150px)
100 Prozent minus 150 Pixel, bedeutet in diesem Fall 150 Pixel vom rechten Rand entfernt.
Hier eine andere Art wie man generell einTabellenlayout erzeugen kann. Ein Div umschließt die Tabelle. Div Elemente die direkt der Tabelle folgen werden, als table-row definiert. Darin enthaltene divs als table-cell.
<style type="text/css">
.table {
display:table;
}
.table div {
display:table-row;
}
.table div div {
display:table-cell;
width:300px;
background-color: #FBCC6A;
border: 1px solid #937640;
font-size: 1.5em;
margin: 10px;
padding: 10px;
}
</style>
<div class="table">
<div>
<div><p>Navigation</p></div>
<div><p>Inhalt</p></div>
</div>
</div>
Responsive Design mit Media Queries
weitere Layout Möglichkeiten mit Flexbox
siehe auch diesen Tipp im PC Magazin
Wenn 2 Spalten innerhalb einer Box auf gleiche Höhe setzen will, gibt es verschiedene Lösungen. Eine Lösung von Alex Robinson funktioniert folgendermaßen. Man setzt in den Spalten padding-bottom auf einen sehr hohen Wert und margin-bottom auf den gleichen aber negativen Wert. Desweiteren setzt man im umgebenden Container, die Eigenschaft overflow: hidden.
so sieht´s aus /
oder so
oder so
Andere Möglichkeiten bestehen darin, dass man mit einem Hintergrundbild im umgebenden Container eine gleiche Höhe vorgaukelt, oder man benutzt die zuvor beschriebenen Methode mittels display: table etc.
siehe auch Media Queries