Header mit beliebigem Inhalt:

Header am Seitenanfang fixieren:

Am Seitenanfang Platz für den fixierten Header reservieren:

Demo:

• https://jsfiddle.net/s31tz/tdboLrLz/

Mitunter soll das erste Element eines HTML-Konstrukts per CSS speziell gestaltet werden, z.B. was dessen Außenabstände angeht. Diese Anforderung gibt es in zwei Ausprägungen:

1. Das zu behandelnde Element ist das erste Element, das dem Bezugselement folgt.

2. Das zu behandelnde Element ist das erste Element, das dem Bezugselement untergeordnet ist.

Diese beiden Element-Anordnungen erfordern unterschiedliche CSS-Selektoren.

1. Element folgt auf Bezugselement

1 <X>...</X>
2 <Y>
3   ...
4 </Y>
5 ...

Der CSS-Selektor lautet:

1 X + * {
2     ...
3 }

Bezugselement ist X. Der Selektor + selektiert das unmittelbar folgende Element. Der Universelle Selektor * füllt hier syntaktisch die zweite Argumentposition des Selektors und nimmt keine weitere Einschränkung vor.

Beispiel: Jedes erste Element nach einer <h1>-Überschrift soll einen oberen Außenabstand von 0.5em erhalten:

1 h1 + * {
2     margin-top: 0.5em;
3 }

2. Element ist Bezugselement untergeordnet

1 <X>
2   <Y>
3     ...
4   </Y>
5 </X>

Der CSS-Selektor lautet:

1 X > *:first-child {
2     ...
3 }

Bezugselement ist X. Der Selektor > selektiert alle Elemente, die dem Bezugselement direkt untergeordnet sind. Die Pseudoklasse *:first-child schränkt diese Menge auf das erste Kindelement ein (der Stern kann auch weggelassen werden).

Beispiel: Jedes erste Unterelement <Y> eines <dd>-Definitionsabschnitts soll keinen oberen Außenabstand besitzen, sondern direkt an den Definitionsterminus <dt> anschließen:

HTML:

1 <dl>
2   <dt>...</dt>
3   <dd>
4     <Y>
5       ...
6     </Y>
7   </dd>
8   ...
9 </dl>

CSS:

1 dd > *:first-child {
2     margin-top: 0;
3 }

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.

oder

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.

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 eine 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 ein künstliches Wurzelelement, 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.

Eingabefeld

<input type="text"  id="e" name="text" size="20" />

Umrahmung

Rahmen von 1px Breite statt der normalen Dekoration.

#e {
  border: 1px #999 solid;
}

Hintergrundfarbe

Die Hintergrundfarbe des Eingabefeldes ändern, wenn es mit der Maus überfahren wird (:hover) oder den Fokus bekommt (:focus). Besitzt das Feld weder den Fokus noch befindet sich die Maus darüber, wird die ursprüngliche Hintergrundfarbe automatisch wieder hergestellt. Dies braucht nicht vereinbart werden.

#e:hover, #e:focus {
  background-color: #eee;
}

Font

Ein Text-Eingabefeld sollte m.E. normalerweise einen monospaced Font eingestellt haben, nur dann entspricht die optische Feldbreite exakt der Anzahl der Zeichen, die in das Feld passen.

#e {
  font-family: monospace;
}

In HTML:

Per CSS (#t sei die Tabelle):

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 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.

Das W3C stellt zwei Services zur Validierung von HTML- und CSS-Code zur Verfügung:

• HTML-Validator: http://validator.w3.org/
• CSS-Validator: http://jigsaw.w3.org/css-validator/

Um den HTML- bzw. CSS-Code einer Seite direkt zu validieren, können folgende Links in die Seite eingebaut werden. Aus dem Referer-Header ermittelt der Validator die Ausgangsseite und ruft diese ab. Das geht natürlich nur, wenn die Seite öffentlich zugreifbar ist.

Validierung von XHTML-Code

<a href="http://validator.w3.org/check/referer?ss=1">
  <img src="valid-xhtml10.png" width="88" height="31" alt="Valid XHTML 1.0!" />
</a>

Der URL-Parameter ss=1 sorgt dafür, dass der Validator ein Source-Listing erzeugt. Dies ist sehr sinnvoll, da dann von einem Fehler aus direkt an die beanstandete Stelle gesprungen werden kann.

Validierung von CSS2-Code

<a href="http://jigsaw.w3.org/css-validator/check/referer">
  <img src="valid-css2.png" width="88" height="31" alt="Valid CSS!" />
</a>