Ijs2019medienpartner.jpg

SELFHTML ist in diesem Jahr Medienpartner der IJC.

Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

CSS/Tutorials/Grundstruktur

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

Grundstruktur[Bearbeiten]

Als Grundstruktur verwenden wir unsere Webseite aus dem HTML5-Tutorial:

Beispiel: HTML5-Seite mit Grundstruktur ansehen …
<body>
  <header>
    <!--- Kopfzeile --->
  </header>
  
  <article>
     <!--- Inhalt --->
  </article>

  <aside>
    <!---weiterführende Informationen --->
  </aside>

  <footer>
    <!--- Fußzeile --->
  </footer>
</body>

Responsivität[Bearbeiten]

Damit die Webseite sowohl in einem schmalen Browserfenster des Desktop-PCs als auch auf dem Smartphone oder Laptop wunschgemäß dargestellt wird, müssen Sie mithilfe eines meta-Elements dafür sorgen, dass sich die Seite an den Viewport anpasst.

Notieren Sie dazu folgende Zeile im head der Seite:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Für weitere Erklärungen siehe HTML/Kopfdaten/meta#Viewport_einstellen.


Maximale Breite festlegen[Bearbeiten]

Textzeilen, die sich über die gesamte Breite eines großen 4k-Monitors erstrecken, sind nur schwer lesbar.

Um die Breite des Inhaltsbereichs zu begrenzen und zu lange Textzeilen zu vermeiden, wurde dem body der Beispielseite eine maximale Breite zugewiesen.

Beispiel: Seite mit flexibler Breite
body {
    margin: 0 auto;
    max-width: 60em;
}

Mit margin: 0 auto wird die Seite zentriert.

Für <body> ist die CSS-Eigenschaft max-width: 60em; angegeben, um der Seite eine maximale Breite zu geben. Bei kleineren Viewports verringert sich die Breite, sodass die Seite nie breiter als der Bildschirm wird.


Empfehlung:
Verwenden sie für Ihr Layout keine festen Breitenangaben in Pixel. Wenn ein Benutzer die Schriftgröße im Browser ändert, wird im schlimmsten Fall Ihr Layout zerschossen.
Breitenangaben in relativen em passen Ihre Webseite flexibel an die Schriftgröße an!