Dateien: layout.css
Mit dem CSS-Befehl @media können sie Stylesheet auf bestimmt Ausgabemedien optimieren. Entsprechend finden sie die Beispiele auch in der Datei vorlagen/layout.css. Wichtig ist das für die Ausgabe der Seite auf dem Drucker und besonders großen oder kleinen Displays.
Für das Drucklayout wird das Menu versteckt und der Inhalt ganz nach links verschoben, um den ganzen Druckbereich ausnutzen zu können.
/* Drucklayout */
@media print {
#MenueDiv { display: none; }
#InhaltDiv { left: 0px; }
}
Mit der Druckvorschau von Firefox, können sie sich dieses Varhalten anschauen.
Das dynamische Layout verändert Poition und Aussehen des Menüs auf Geräten die weniger als 480 Pixel in der Breite haben. Neu sind hier die Umdefinition der <ul> als display: inline;, das heißt aus dem Block-Element wird ein Inline-Element und damit stehen alle Menüpunkt hintereinander.
Außerdem werden die Positionen der <div> nicht mehr position: absolute; oder position: fixed; sondern position: static; definiert. Das bewirkt, dass Kopf, Menü und Inhalte wie normale HTML-Elemente direkt untereinander gestellt werden (wie in unserem Visitenkartenbeispiel die <p>). So wird das kleine Display optimal ausgenutzt.
/* Dynamisches Layout */
@media only screen and (min-width: 481px) {
ul.Menue { width: 10em; margin: 0; padding: 2pt; }
li.Menue { list-style: none; margin: 2pt;
padding: 2pt; border: 1px solid gray;
background-color: silver; }
}
/* Spezielle Defintionen für Mobilgeräte */
@media only screen and (max-width: 480px) {
ul.Menue { display: inline; }
li.Menue { list-style: none; border: 1px solid gray;
background-color: silver; display: inline; }
}
@media only screen and (max-width: 480px) {
#KopfDiv { position: static; height: auto; width: 100%; }
#MenueDiv { position: static; padding: 0; width: 100%; height: 50px; }
#InhaltDiv { position: static; min-width: 50%; min-height: 50%; }
}