3 Spalten im Footer responsive gestalten

[Rolf B]

Hallo Marcel,

<img src="icon_tix.png" alt=""/><h5>Eintrittskarten</h5>
<ul class="list">...</ul>

Whoa - so bitte nicht.

• h5? Wo sind die Überschiften h2 bis h4? Überschriften erzeugen eine Gliederung. Das muss h2 sein. Wenn Du im CSS sicher sein willst, dass Du nur die h2 im Footer und die h2 im main Bereich korrekt separierst, bau die Selektoren entsprechend (also main h2 und footer h2 statt einfach nur h2).

• Das <img> vor die Überschrift und dann mit der Margin-Axt die Überschrift zurechtzimmern sieht zwar irgendwie passend aus. Aber auch nur irgendwie. Nimm das img in die Überschrift hinein.

<h5><img src="icon_tix.png" alt=""/>Eintrittskarten</h5>

Damit das img auf der richtigen Höhe ist, gibt's vertical-align:

footer h2 img {
   vertical-align: middle;
}

Die Margins vom h2 setzt Du auf 0 - den bottom-margin meinetwegen auch leicht ins Minus, und das margin-top vom ul geht auch auf 0. Dann ist es wieder so kompakt wie vorher.

footer h2 {
   margin: 0 0 -0.2em 0;   /* oben rechts unten links */
}

footer ul.links {   /* Anpassumg im HTML nicht vergessen :) */
   list-style: none;
   padding: 0;
   margin-top: 0;
}

Warum footer ul.links statt .list? Klassen sollten eine fachliche Beschreibung des Elements liefern. Man könnte den Selektor schon als zu genau ansehen (was man lassen sollte), aber nach meiner Meinung drückt dieser Selektor genau den fachlichen Zusammenhang aus. Liste der Links im Footer.

Da die Icons reiner Schmuck sind, könnte man auch sagen: Die gehören gar nicht ins HTML. Das geht auch, mit dem ::before Pseudoelement:

<h2 class="tickets">Eintrittskarten</h2>
<ul>...</ul>

footer h2 {
   margin: 0 0 -0.1em 0;
}
footer h2.tickets::before {
   content: " ";
   display: inline-block;
   vertical-align: middle;
   width: 3em; height: 3em;
   background: url(icon_tix.png) no-repeat center/contain;
}

Die Angaben in der background-Eigenschaft sind etwas magisch. url() ist klar, no-repeat sicher auch. center/contain ist merkwürdig. Ich brauche eigentlich nur contain, was das Bild so verkleinert, dass es verzerrungsfrei in die Box eingepasst wird, aber die background-size Angabe lässt sich nur kombiniert mit background-position (hier: center) angeben. Die CSS Syntax will es nicht anders.

Rolf