Schlagwort-Archive: html

CSS: Vertikales Ausrichten von Text um ein Bild

[code lang=’html‘]

Etwas Text in der gleichen Zeile mit einem
großen Bild Großes Bild

[/code]
Möchte man nun die Schrift in der gleichen Zeile des Bildes (sagen wir) mittig positionieren, so muss man nicht den Absatz p-Tag per vertical-align:middle; mittig anordnen, sondern das Bild:
[code lang=’html‘]

Etwas Text in der gleichen Zeile mit einem
großen Bild Großes Bild

[/code]

Das finde ich doch etwas eigenartig, denn so ordnet man ja nicht das Bild mittig an, sondern die Schrift drumherum…

CSS Attribut Selektoren

Da schreibt man im letzten Artikel etwas über Regexp-Selektoren in JQuery und meint damit ein Problem zwar etwas umständlich, aber elegant gelöst zu habe. Einen Tag später allerdings stellt man fest, dass man den Umweg über JQuery gar nicht hätte gehen müssen, sondern gleich auf Attributbedingte Formate (wie es bei SELFHTML so schön deutsch heißt) hätte setzen müssen.

Ein HTML-Auszug sieht so aus:

[sourcecode lang=“html“]
<div id="posting_1234">
Dies ist ein <a href="http://link.de">Link</a> im Posting.</div>
<div>
Ein anderer <a href="http://andererlink.de">Link</a> in einem anderen DIV.</div>
<!– … –>
<div id="posting_1235">
Dies ist ein <a href="http://link.de">Link</a> im Posting.</div>
<div>
Ein anderer <a href="http://andererlink.de">Link</a> in einem anderen DIV.</div>
[/sourcecode]

Nun will man mit CSS alle Links innerhalb des td-Tags, dessen id mit td_posting_ anfängt, anders darstellen. Das kann man umständlich mit der gestern vorgestellten JQuery-Funktion hinbekommen, aber einfacher und direkter ist es mit den CSS Attribut Selektoren:

[sourcecode lang=“css“]
td[id^="td_posting_"] a:link{
text-decoration: underline;
color: #032846;
}
[/sourcecode]

Das ^-Zeichen hinter id dient dazu festzulegen, dass id mit der angegebenen Zeichenkette beginnen soll. Es wäre ja auch denkbar, dass id mit einer bestimmten Zeichenkette enden soll, denn müsste anstatt ^ ein $ Zeichen benutzt werden:

[sourcecode lang=“css“]
td[id$="ende"] a:link{
text-decoration: underline;
color: #032846;
}
[/sourcecode]

Wenn nur überprüft werden soll, ob eine Zeichenkette irgendwo in der ID vorkommt muss ein *-Zeichen benutzt werden:

[sourcecode lang=“css“]
td[id*="zeichen"] a:link{
text-decoration: underline;
color: #032846;
}
[/sourcecode]

Das deckt zwar viele Anwendungsfälle ab, aber wenn man auf einen komplizierteren regulären Ausdruck angewiesen ist, muss man auf die gestrige JQuery-Funktion zurück greifen.