target=“_blank“ und XHTML Strict

Wer seine Website schonmal mit XHTML Strict durch den W3C HTML-Validator gejagt hat, wird feststellen, dass einige Attribute inzwischen nicht mehr erlaubt sind. Dazu gehört unter anderem der Befehl target=“_blank“, der Links in einem neuen Fenster oder Tab öffnen lässt.

Der Benutzer soll selbst entscheiden, ob ein Link in einem neuen Fenster geöffnet werden soll, oder nicht.

Dieser These kann ich mich nicht unbedingt anschließen, denn inzwischen erwartet man einfach, dass sich externe Links in einem neuen Tab öffnen. Natürlich gibt es immer noch Workarounds, um den gewünschten Effekt zu erzielen. Aus dem Grund stelle ich an dieser Stelle eine (wie ich finde) sehr elegante Lösung vor, die zwar auf JavaScript basiert, aber auch funktioniert, wenn JavaScript im Browser deaktiviert ist.
Eine zweite Methode basiert auf CSS3, die allerdings noch nicht von allen Browser vollständig unterstützt wird. Ich rate daher vorerst auf JS zurückzugreifen.

» Weiterlesen

jQuery Tabelle mit odd & even (JavaScript)

Und wieder einmal geht es um ein Problem, auf das so ziemlich jeder Webentwickler schon einmal gestoßen ist. Man möchte eine Tabelle mit alternierenden Zeilenfarben erstellen und muss jedesmal überlegen, wie man das in PHP und dem Modulo-Operator umsetzt. Doch jetzt gibt es endlich Abhilfe: Ein jQuery-Selector für odd und even nimmt uns bequem die Arbeit ab.

Und so geht’s:

View Code XML
<style type="text/css">
tr.odd { background-color: #f00; }
tr.even { background-color: #0f0; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$('tbody tr:odd').addClass('odd');
	$('tbody tr:even').addClass('even');
});
</script>
 
<table>
	<thead>
		<tr>
			<th>Überschrift 1</th>
			<th>Überschrift 2</th>
		</tr>
	<thead>
	<tbody>
		<tr>
			<td>Lorem</td>
			<td>Ipsum</td>
		</tr>
		<tr>
			<td>Dolor</td>
			<td>Sit</td>
		</tr>
		<tr>
			<td>Amet</td>
			<td>Consectetuer</td>
		</tr>
	</tbody>
</table>

Unser kleines JavaScript schnappt sich selbständig die Tabellenzeilen und fügt automatisch die CSS-Klassen odd und even ein. Ganz nach dem Motto „Write Less, Do More“ wie es jQuery immer verspricht.

<div> mittig zentrieren

So ziemlich jeder HTML-Entwickler stand schon einmal vor demselben Problem: Wie zentriert man ein <div> oder anderes Block-Element genau mittig auf der Seite?

Erstellen wir uns erst einmal ein HTML Grundgerüst:

View Code XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Zentriertes Div</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	</head>
	<body>
		<div class="centered">
			<p>Text, der genau in der Mitte der Seite platziert ist.</p>
		</div>
	</body>
</html>

Jetzt brauchen wir noch ein wenig CSS und schon sind wir fertig:

View Code CSS
.centered {
	position: absolute;
	width: 512px;
	height: 100px;
	top: 50%;
	left: 50%;
	margin-left: -256px;
	margin-top: -50px;
	border: 1px solid #000000;
	background-color: #eeeeee;
}
.centered p {
	text-align: center;
}

Zentriertes Div
Der interessante Teil ist das „margin-left: -256px;“ bzw. das „margin-top: -50px;„, denn ohne die negativen Margin-Werte, würde das Zentrieren nicht funktionieren.
Achtung: Wenn sich die Breite oder die Höhe des Div-Containers ändert, müssen die Margin-Werte ebenfalls angepasst werden. Die Margin-Werte ergeben sich immer aus Breite/2 bzw. Höhe/2. Würden wir die Breite z.B. auf 200px reduzieren, muss das margin-left mit -100px angegeben werden.