Das Spectrum-Theme von Ignacio Ricci ist wirklich der Hammer! Vielleicht müssen noch ein paar CSS-Angaben für die Widgets in der Sidebar geändert werden, aber ansonsten sieht das schon sehr chic aus. :)

Auch interessant:

1. In eigener Sache: Serverumzug erfolgreich
2. TV Theme Medley
3. In eigener Sache: Besuchersturm

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:

<p>
Etwas Text in der gleichen Zeile mit einem
großen Bild <img src="grossesBild.jpg" alt="Großes Bild" style="vertical-align:middle;" />
</p>

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

Auch interessant:

1. PHP-Funktionen (II): Text nach Wort abschneiden

Ein HTML-Auszug sieht so aus:

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

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:

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

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:

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

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

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

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.

Auch interessant:

1. JQuery Event Listener für hinzugefügten Inhalt

jQuery.expr[':'].regex = function(elem, index, match) {
	var matchParams = match[3].split(','),
	validLabels = /^(data|css):/,
	attr = {
		method: matchParams[0].match(validLabels) ?
		matchParams[0].split(':')[0] : 'attr',
		property: matchParams.shift().replace(validLabels,'')
	},
	regexFlags = 'ig',
	regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
	return regex.test(jQuery(elem)[attr.method](attr.property));
}

Ein paar Beispiele wie die Funktion benutzt werden kann:

// Wählt alle Elemente aus, deren ID mit einem Vokal anfangen:
$(':regex(id,^[aeiou])');
// Wählt alle DIVs mit Klassen aus, die Zahlen enthalten:
$('div:regex(class,[0-9])');
// Wähle alle SCRIPT tags aus, die jQuery im src enthalten:
$('script:regex(src,jQuery)');

Bei der Benutzung ist darauf zu achten, dass Backslashes im regulären Ausdruck durch doppelte Backslashes ersetzt werden müssen (bspw. ^\w+$ -> ^\\w+$). Zudem wird nicht zwischen Groß- und Kleinschreibung unterschieden – ist also case insensitive.

Die Funktion lässt sich auch für CSS einsetzen:

// Wähle alle Elemente mit einer Weite zwischen 100 und 300 aus:
$(':regex(css:width, ^[1-3]\\d{2}px$)');
// Wähle alle DIVs aus, die NICHT als Block angezeigt werden:
$('div:not(:regex(css:display, ^block$))');

Auch interessant:

1. CSS Eltern-Selektor in jQuery
2. JQuery Event Listener für hinzugefügten Inhalt