Seitenlayout gestalten mit CSS

Seitenlayout gestalten mit CSS

Jetzt machen wir endlich mal was, damit unsere HTML-Seiten ein bisschen ansehnlicher werden.

Allerdings ist dafür nicht HTML zuständig, sondern eine andere Technik namens Cascading Style Sheets, kurz CSS.

Anmerkung: Die Inhalte dieser Seite stammen von SelfHTML - HTML-Tutorial - Kapitel 5, das Logo von PNG All.

Aufgabe 1

Erstellt einen neuen Ordner für diese Lektion
Kopiert die Dateien der letzten Lektion in diesen Ordner und arbeitet mit diesen Kopien als Anfangspunkt.

Info

Wie so oft im Leben, fallen auch Herrn Meier die wichtigsten Sachen erst zum Schluss ein:

Ziemlich cool wäre es doch, wenn seine Adresse und Telefonnummer erscheinen würde.
Daneben soll jede Seite einen gleichmäßigen Seitenkopf und -fuß erhalten.

Mit CSS können nicht nur die Farben, sondern auch Positionierungen auf der Webseite festgelegt werden. In diesem Kapitel führen wir einige Elemente zur Seitenstrukturierung ein und lernen, wie wir einzelne Elemente gezielt ansprechen und formatieren können.

header und footer

Neben der Textauszeichnung als Überschriften und "normale" Absätze, die bereits in Lektion 2 besprochen wurde, gibt es weitere Elemente, die einzelne Abschnitte des HTML-Dokuments beschreiben.

Der sichtbare Seitenkopf mit Logo und Firmenname wird von einem header-Element umschlossen (nicht zu verwechseln mit dem unsichtbaren head). Das Seitenende enthält einen footer mit Links zu Kontakt und Impressum.

<body>
  <header>
    <a id="backlink" href="index.html"><img src="logo.png" alt="logo"></a>
    <h1>Schreinerei Meier</h1>
    <p>Ihre Werkstatt für gutes Wohnen!</p>
  </header>
 
  ...
 
  <footer>
     <a href="kontakt.html">Kontakt</a>
     <a href="impressum.html">Impressum</a>
     <p>© 2021 by selfHTML</p>
  </footer>
</body>

Aufgabe 1

Fügt die header- und footer-Elemente in alle eure HTML-Dateien ein (index.html und preise.html). Speichert anschließend das Logo unten im gleichen Ordner.

Ergebnis:

Nun sieht das allerdings noch nicht so gut aus, das Logo ist noch riesig und man sieht auf Anhieb gar nichts mehr von der Seite:

Aufgabe 2

Fügt dafür die folgenden CSS-Regeln in eure formate.css ein:

header img {
    max-width: 100px;
}
 
header {
    text-align: center;
}

Ergebnis

Und schon ist das Logo ein bisschen kleiner geworden und in die Mitte gerutscht:

aside – (nicht nur) neben dem Inhalt

Unser Schreinermeister ist der Meinung, dass die Liste der Leistungen dermaßen wichtig ist, dass man diese angemessen hervorheben muss. Und wie so oft im Leben, fallen auch Herrn Meier die wichtigsten Sachen erst zum Schluss ein: Ziemlich cool wäre es doch, wenn er sein neuestes Angebot hervorheben könnte! Aber dies soll natürlich in einem eigenen Kasten stehen.

Unmöglich, sagst du? Mitnichten! Es gibt ein Element für Abschnitte einer Seite, deren Inhalt nur in einem indirekten Zusammenhang mit dem umgebenden Inhalt steht: aside.

Aufgabe 3

Passt euren Code von index.html an, indem ihr der Liste ein id-Attribut hinzufügt und direkt unterhalb das aside-Element anfügt:

<ul id="leistungen">
    <li>Möbel nach Ihren Wünschen
        <ul>
            <li>Küchenmöbel</li>
            <li>Regale und Schrankwände</li>
            <li>Badezimmermöbel</li>
        </ul>
    </li>
    <li>Haustüren</li>
    <li>Gartenzäune</li>
    <li>Reparaturen</li>
</ul>
 
<aside id="angebot">
  <h2>Angebot</h2>
  <p>Nächste Woche 10% auf alles!</p>
</aside>

Ergebnis

Ergebnis: Das Angebot ist unterhalb der Liste.

Einmalig und einzigartig

Sowohl die ul-Liste als auch das aside-Element haben nun wieder ein Attribut, also eine zusätzliche Information: id="leistungen" und id="angebot".

Im Unterschied zu den feststehenden Elementnamen sind dies Wörter, die wir uns ausgedacht haben, also keine CSS-Bezeichnung.

Damit können wir die gewünschte Liste mit CSS gezielt ansprechen - unsere Hervorhebungen sollen ja schließlich nur exklusiv für dieses eine Element gelten, und nicht für andere.

Information: Universalattribut id

Das Attribut id dient einfach der Identifikation, damit wir genau dieses Element ansprechen und mit CSS gestalten können.

Bitte wundert eich nicht über die durchgehende Kleinschreibung - dies ist einfach üblich, aber nicht zwingend.

Achtet aber auf jeden Fall darauf, dass ihr die einmal gewählte Schreibweise in HTML und CSS beibehaltet, damit es keine Probleme gibt.

Eindeutige Elemente mit CSS formatieren

Jetzt brauchen wir nur noch einen Weg, unser mit id="angebot" bezeichnetes Element mit CSS anzusprechen. Nichts leichter als das - wir brauchen nicht mal dazuzusagen, dass wir das aside-Element meinen, der Browser ist schlau genug, das selbst zu folgern. Im CSS schreiben wir einfach:

#angebot {
  /* CSS-Festlegungen */
}
#angebot p {
  /* CSS-Festlegungen für einen Absatz innerhalb des Elements mit der id "angebot" */
}

Das vorangestellte #-Zeichen sagt dem Browser, dass dieser Selektor nicht nach einen HTML-Element <angebot> suchen soll (das es auch gar nicht gibt), sondern nach einem Element, das das Attribut id="angebot" trägt. Es gibt sehr viele Möglichkeiten, mit CSS-Selektoren nach bestimmten Eigenschaften von Elementen zu suchen.

Wenn wir nicht das aside-Element selbst ansprechen wollen, können wir auch präziser sein. Soll zum Beispiel das p-Element innerhalb des Elements mit id="angebot" angesprochen werden, dann geht auch dies.

Layout mit CSS

Bereits im vorigen Kapitel haben wir mit der Gestaltung einzelner Elemente angefangen. Nun sollen diese auch entsprechend in der Seite platziert werden. Wir haben für unseren Angebotskasten gleich mal ganz viel da reingeschrieben:

#angebot {
    background-color: firebrick;
    padding: 1em;
    width: 20em;
    text-align: center;
}
 
#angebot h3 {
    font-size: 2em;
    font-variant: small-caps;
    color: lightyellow;
}
 
#angebot p {
    color: white;
}

Und selbstverständlich versäumen wir es nicht, alles zu erläutern:

padding: 1em; legt den Innenrand in unserer Box fest. Der Text soll nicht direkt an den Rand stoßen.
- Die Breite des Innenrands beträgt 1em in alle Richtungen.
margin: 1em 3em; legt den Außenrand um unsere Box fest.
- die Werte 1em und 3em geben an, dass der Außenrand 1em Höhe nach oben und unten und je 3em Breite nach links und rechts betragen soll. Natürlich wären auch vier verschiedene Werte für jede Richtung möglich.
width: 10em; besagt, dass der Kasten mit der id angebot eine Breite von 10em erhalten soll.

Aufgabe

Fügt den CSS-Code in eure formate.css ein:

#angebot {
    background-color: firebrick;
    padding: 1em;
    width: 20em;
    text-align: center;
}
 
#angebot h3 {
    font-size: 2em;
    font-variant: small-caps;
    color: lightyellow;
}
 
#angebot p {
    color: white;
}

Ergebnis

Der Angebots-Kasten sieht nun schon etwas besser aus und sticht ins Auge.

Platzverschwendung – nein, danke!

Weiterhin fanden wir es ziemlich verschwenderisch, den Platz rechts neben unserer Liste mit den Leistungen frei zu lassen. Wäre es nicht klasse, wenn dort unser Angebotskasten stehen würde?

Nichts leichter als das, aber vorher müssen noch einige Grundlagen behandelt werden:

HTML ohne CSS ist bereits responsiv, d.h. es passt sich der Größe des Fensters an. Auf dem Handy sieht die Seite etwas anders aus als auf dem PC.
Bis jetzt nehmen alle Blockelemente wie Überschriften, Absätze und Listen die volle Breite ein. Falls Elemente mehr Inhalt haben als Platz ist, brechen sie automatisch in die nächste Zeile um.

Aufgabe 5

Wir wollen, dass das Angebot neben der Liste steht. Dazu brauchen wir ein neues Element, das section-Element.

Fügt dieses so ein, dass die Liste und die Angebots-Box in diesem neuen Element zu finden sind:

<section>
  <ul id="leistungen">
      ...
  </ul>
 
  <aside id="angebot">
    ...
  </aside>
</section>

Fügt anschließend folgenden Code in die formate.css ein:

section {
    display: grid;
    grid-template-columns: 1fr 22em;
}

Ergebnis

Und schon ist das Angebot auf der rechten Seite neben der Liste!

Erklärung

Die Leistungen werden mitsamt dem Angebotskasten von einem neuen section-Element umfasst, dass nun mit display: grid; zum Raster wird:

Dieses Raster ist aber nicht pixelgenau festgelegt, sondern besteht aus flexiblen Rasterfeldern:

grid-template-columns: 1fr 22em;

Es werden mit grid-template-columns 2 Spalten gebildet:

die zweite mit unserem Angebotskasten soll 12em breit werden (width: 20em + je 1em padding)
die linke Rasterzelle mit der Liste kann ja so breit wie möglich sein und nimmt mit 1fr den restlichen, verfügbaren Platz ein (hier steht die Einheit fr für engl. fraction, also "Anteil". 1fr steht also für den "ganzen rest").

Aufgabe 6

Zu guter letzt passen wir noch den Footer an:

footer {
    text-align: center;
    font-size: 1em;
    border: 1px solid black;
    padding: 1em;
    background-color: teal;
    color: white;
}
 
footer p {
    display: inline;
    font-size: 1em;
    color: white;
}
 
footer a {
    color: white;
}

Ergebnis

Alles in Allem sollte unsere Website nun so aussehen: