Frank Seitz' Developer Logbuch - CSS

CSS: Listen portabel einrücken

nospam@example.com (Frank Seitz) — Mon, 31 May 2010 16:41:10 +0200

Die Browser benutzen unterschiedliche Wege, Listen einzurücken. Einige rücken per Padding ein, andere per Margin.

Soll die Einrückung portabel verändert werden, müssen margin-left uns padding-left also zusammen gesetzt werden, und zwar eine Angabe auf die gewünschte Einrückung und die andere auf 0.

1	ul {
2	padding-left: 20px;
3	margin-left: 0;
4	}

oder

1	ul {
2	padding-left: 0;
3	margin-left: 20px;
4	}

HTML-Konstrukte mit CSS gestalten

nospam@example.com (Frank Seitz) — Sun, 30 May 2010 13:35:05 +0200

Problem

Ein aus mehreren Elementen bestehendes HTML-Konstrukt soll in seinem Aussehen frei gestaltbar sein. Wie lässt sich dies mit CSS erreichen?

Beispiel

Gegeben sei ein Inhaltsverzeichnis, bestehend aus einer Überschrift (h1) und verschachtelten Listen (ul, li) mit Links (a) auf die Dokument-Abschnitte.

1	<h1>Title</h1>
2	<ul>
3	<li>
4	<a href="#section_1">Section 1</a>
5	<ul>
6	<li>
7	<a href="#section_1_1">Section 1.1</a>
8	<ul>
9	<li>
10	<a href="#section_1_1_1">Section 1.1.1</a>
11	</li>
12	<li>
13	<a href="#section_1_1_2">Section 1.1.2</a>
14	</li>
15	</ul>
16	</li>
17	<li>
18	<a href="#section_1_2">Section 1.2</a>
19	</li>
20	</ul>
21	</li>
22	<li>
23	<a href="#section_2">Section 2</a>
24	</li>
25	</ul>

Der HTML-Code wird ohne CSS vom Browser (Firefox) ungefähr so dargestellt (die Strukturelemente für den Titel (h1) und die Listen (ul) sind zur Verdeutlichung grau hinterlegt):

Lösung

Um ein HTML-Konstrukt aus mehreren Elementen per CSS anpassbar zu machen, gehen wir folgendermaßen vor:

Wir geben dem Wurzelelement des Konstruktes eine eindeutige Bezeichnung und weisen ihm hierzu eine Id oder einen Klassennamen (oder beides) zu.

1 <ELEMENT id="my-toc-4711" class="my-toc">

2 ...

3 </ELEMENT>

Eine Id verwenden wir, wenn wir ein bestimmte Instanz des Konstrukts gestalten wollen. Wollen wir alle Instanzen des Konstruktes gestalten, verwenden wir einen Klassennamen.
Hat das Konstrukt kein Wurzelelement, wie im Beispiel, denn auf oberster Ebene stehen hier zwei Elemente: h1 und ul, erzeugen wir eins, indem wir das Konstrukt in ein <div> einfassen.

1 <div class="my-toc">

2 HTML

3 </div>

Ein Wurzelelement zu haben, ist in vielerlei Hinsicht praktisch, denn es kann Definitionen aufnehmen, die das Konstrukt als Ganzes (Hintergrund, Abstände, etc.) oder alle seine Subelemente betreffen (Texteigenschaften etc.).

Im Stylesheet adressieren wir die Elemente ausgehend vom Wurzelelement mit entsprechenden Selektoren. Bei obiger Inhaltsverzeichnis-Struktur könnte dies so aussehen:

1	.my-toc {
2	/* das gesamte Konstrukt */
3	}
4	.my-toc h1 {
5	/* die Überschrift */
6	}
7	.my-toc ul {
8	/* die Liste der Ebene 1 */
9	}
10	.my-toc ul ul {
11	/* die Listen der Ebene 2 */
12	}
13	.my-toc ul ul ul {
14	/* die Listen der Ebene 3 und tiefer */
15	}
16	.my-toc a {
17	/* alle Links */
18	}

Weitere Klassennamen oder Ids werden innerhalb des Konstruktes nicht benötigt, es sei denn, es liegt der eher seltene Fall vor, dass CSS-Selektoren die erforderliche Elementauswahl nicht treffen können. Beispiel: gerade oder ungerade Zeilen einer Tabelle.

Cellspacing per CSS unterdrücken

nospam@example.com (Frank Seitz) — Sat, 09 Jan 2010 16:03:10 +0100

In HTML:

<table cellspacing="0">

Per CSS (#t sei die Tabelle):

#t {
  border-collapse: collapse;
}

#t > td {
  padding: 0;
}

Dreispaltiges Seitenlayout mit CSS

nospam@example.com (Frank Seitz) — Sat, 09 Jan 2010 11:27:23 +0100

Layout mit Kopf, Fuss und drei Spalten:

Der HTML- und CSS-Code, der dies realisiert:

<div id="header">
Header
</div>
<div id="left">
Left
</div>
<div id="right">
Right
</div>
<div id="middle">
Middle
</div>
<div id="footer">
Footer
</div>

#header {
  clear: both;
}
#left {
  float: left;
  width: 80px;
}
#right {
  float: right;
  width: 80px;
}
#middle {
  padding: 0 80px 0 80px;
}
#footer {
  clear: both;
}

Anmerkungen

Die Farben und die Höhe der Elemente sind weggelassen, da diese mit der Lösung nichts zu tun haben.
Die Breite von #header, #middle und #footer passt sich dem zur Verfügung stehenden Raum dynamisch an.
Die Reihenfolge der divs in HTML ist signifikant. Das div #middle kommt nach #left und #right.
"clear: both;" bei #header bewirkt, dass neben dem Header kein Float platziert wird. D.h. die beiden Floats #left und #right werden vom Browser darunter platziert.
Durch "float: left;" wird das Element #left links platziert. Analog wird Element #right durch "float: right;" rechts platziert. Die Breitenangabe "width: 80px;" weist den Floats ihren (fixen) horizontalen Raum am linken und rechten Rand zu.
Das Element #middle hat keine clear-Angabe und kann daher zwischen die Elemente #left und #right treten. Damit der Inhalt des div sich nicht mit den Randelementen überschneidet, wird mit "padding: 0 80px 0 80px;" ein Padding eingestellt, das den Raum, der von den Randelementen belegt wird, ausspart. Die Reihenfolge der Angaben ist: oben, rechts, unten, links.
"clear: both;" bei #footer verhindert, dass beim horizontalen Verkleinern des Fensters die oberen Floats neben oder unter den Footer springen.
Die Konstruktion aus den fünf divs kann in den HTML <body> oder eine Tabellenzelle <td> eigebettet werden.

1	<ELEMENT id="my-toc-4711" class="my-toc">
2	...
3	</ELEMENT>

1	<div class="my-toc">
2	HTML
3	</div>