Heutzutage werden Webseiten mit vielen verschiedenen Geräten besucht. Hier erkläre ich kurz, wie man eine Webseite mit einspaltigen Layout realisiert/anpasst, damit sie sich an die jeweilige Bildschirmgrösse anpasst.
Der HTML-Code sieht so aus:
<!doctype html>
<head>
<meta charset="utf-8" />
<title>Titel der Webseite</title>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="wrapper"> // Ein Div-Container wird erstellt
<header> //Die ganzen Webseiten-Elemente werden in diesen Container eingefügt
</header>
<article>
</article>
<footer>
</footer>
</div>
</body>
</html>
Erklärung: Es wurde ein Div-Container erstellt. In diesen Div-Container kommen alle Webseiten-Elemente rein, also z.B (Header, Inhalt, Footer)
Der CSS-Code (design.css) sieht danach so aus:
body {
margin: 0 auto; //Das ganze wird zentriert
padding: 0 10px; //Abstand zum Bildschirmrand
max-width: 960px; //Maximale Breite der Webseite
}
#wrapper {
width:100%; //Breite des Containers im Verhältnis zum Body
}
Erklärung: Die Maximale Breite der Webseite wird im Body definiert, der Div-Container kann also nicht breiter werden als diese Breite.
Wichtig ist, man darf im CSS-Code keine feste Pixelgrösse für die Breite definieren, sonst funktioniert es nicht.
Man kann z.B. schreiben:
#wrapper {
width:90%;
}
Was nicht funktioniert:
#wrapper {
width:900px;
}
Dann wird nähmlich diese fixe Breite für jede Bildschirmgrösse angenommen.
Kommentar eingeben