input {
    vertical-align: bottom;
}

Diese Variante funktioniert leider nicht im Internet Explorer.
Der geliebte IE benötigt wiedermal eine Sonderbehandlung:

input {
    vertical-align: baseline;
}

Damit z.B. Firefox die vertikale Ausrichtung bottom und der IE die Ausrichtung baseline interpretiert, hier zwei Vorschläge zur Umsetzung.

IE-Hack

input {
    vertical-align: bottom;
    #vertical-align: baseline /* IE */
}

Conditional Comments

<!--[if IE]>
input {
    vertical-align: baseline;
}
<![endif]-->

Ziel: Gleiche Höhe

Ziel ist es einen Radio-Button bzw. Checkbox zu erstellen. Daneben wird ein Beschreibungstext angezeigt, der auf gleicher Höhe angezeigt wird.

Es wird folgender HTML-Code verwendet:

<input type="checkbox" id="test" />
<label for="test">Gleiche Höhe</label>

Nicht auf gleicher Höhe

Wenn dieser Code verwendet wird, sieht das Ergebnis jedoch nicht so aus, wie es angedacht ist.

Um das Problem zu lösen, reicht folgende CSS-Eigenschaft:

input {
    vertical-align: bottom;
}

Mit dieser kleinen Änderung wird nun der Text direkt neben dem Radio-Button bzw. neben der Checkbox angezeigt.

Update

IE-Kompatibel

Und warum?

• Proven technology. It’s been around since 2001.
• NO bugs.
• No unnecessary features that use up valuable screen space, such as tabs.
• Handles GIF transparency.
• First with AJAX technology (XMLHttpRequest, available since IE5).
• Renders all pages as they are supposed to look by the only standard that really matters.
• Consistent rendering of pages makes it the web designer’s best friend.
• The most aesthetically pleasing web browser logo.
• Highly secure (has received lots of security updates).
• Clear interface.
• Used by 97.34% of all internet users according to a onestat survey released July 28, 2003.

PS: The SaveIE6 campaign was launched on April 1

Seit einiger Zeit benötige ich zum Umsetzen eines Designs in HTML eine Variante um möglichst flexible abgerundete Div-Container (nachfolgend: Container) zu erstellen.
Dabei bin ich auf viele verschiedene Möglichkeiten gestoßen und möchte die meiner Meinung nach (momentan) Beste vorstellen und beschreiben wie ich sie anwende.

Gleich zu Beginn schonmal die Vor- und Nachteile:

Vorteile

• Nur eine Grafik
• Sehr flexibel in Breite und Höhe (die Breite ist von der Größe der Grafik abhängig, dazu aber später mehr)
• Verhältnismäßig wenig HTML- und CSS-Code
• Kein Javascript

Nachteile

• Vorder- und Hintergrund muss einfarbig sein

Beschreibung

Grafik

Ich verwende eine Grafik mit den Maßen 2000px*16px. Dadurch habe ich die Möglichkeit, abgerundete Container mit einer Breite von 1000px zu erstellen. Warum “nur” 1000px, dazu jetzt mehr.

Hier die Grafik (Achtung: Nach rechts scrollen).

Die Grafik teilen wir uns gedanklich in zwei Bereich der Größe 1000px*16px.
Der linke Bereich stellt den größten Teil des Wunsch-Containers dar. Es fehlen nur die abgerundeten Ecken auf der rechten Seite.

Der rechte Bereich beinhaltet lediglich die abgerundeten Ecken am rechten Rand. Die restliche Fläche ist transparent.

Soviel vorerst zur Grafik.

Theorie

Bevor ich den HTML- und CSS-Code erkläre, vorerst die Theorie, was letztendlich passieren soll:

Wir erstellen einen Container mit einer Breite von 500px und variabler Höhe der als Grundlage für unseren späteren abgerundeten Container dient.
In diesem Container wird der benötigte HTML-Code für die abgerundeten Ecken eingebaut, der aus fünf Containern besteht.

Insgesamt haben wir also sechs Container, von denen der Erste den Zweiten, der Zweite den Dritten usw. einschließt.

Dadurch werden sechs Container der gleichen Größe aus HTML-Sicht “übereinander” gelegt.
Der unterste Container definiert die Größe des Wunsch-Containers.
Der zweite Container beinhaltet die obere linke, der Dritte die obere rechte, der Vierte die untere linke und der Fünfte die untere rechte abgerundete Ecke.
Im sechsen Container wird der Inhalt eingetragen.

HTML

Auf HTML-Seite ist es relativ einfach, jedoch ist die Reihenfolge wichtig:

<div class="container">
	<div class="rounded-box tl">
		<div class="rounded-box tr">
			<div class="rounded-box bl">
				<div class="rounded-box br">
				  <div class="rounded-box content">
				     Inhalt
				  </div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

Nun zum interessanten Teil:

div.container {
    margin: 0;
    padding: 0;
}
div.container div.rounded-box {
    background-image:url(rounded-box.gif) top left no-repeat;
}

Um später nicht für alle vier Container (top left, top right, bottom left, bottom right) jeweils das Bild per background-image definieren zu müssen, definiere ich es einmalig in der CSS-Klasse “rounded-box”.

Ecke oben links (tl)

div.container div.rounded-box.tl {
    background-position: left top;
}

Schritt #1 anzeigen

Das Hintergrundbild wird im Container am oberen linken Rand positioniert um die abgerundete Ecke anzeigen zu lassen.

Ecken oben rechts (tr)

Im nächsten Schritt wird die obere rechte Ecke hinzugefügt:

div.container div.rounded-box.tr {
    background-position: right top;
}

Schritt #2 anzeigen

Dieser Container liegt direkt über dem tl-container. Die Positionierung des Hintergrundbilds ist diesmal so angelegt, dass die rechte obere Ecke angezeigt wird.
Hier kommt der transparente Bereich der Grafik zum Tragen. Wäre der Teil nicht transparent, würde die obere linke Ecke verdeckt werden.

Wie zu sehen ist, haben wird prinzipiell nur die Grafik an die Breite des ersten Containers angepasst. Es werden schon alle vier abgerundeten Ecken angezeigt.
Das Problem ist, dass sich die Grafik nicht an die Höhe des Inhalts anpasst.

Ecke unten links (bl)

Um nun die untere linke Ecke auch unterhalb des Textes zu positionieren, wird folgende CSS-Klasse genutzt:

div.container div.rounded-box.bl {
    background-position: left bottom;
}

Schritt #3 anzeigen

Nun wird die Grafik ein zweites Mal angezeigt, dieses Mal jedoch an der unteren Kante und es fehlt die untere rechte abgerundete Ecke.

Ecke unten rechts (br)

div.container div.rounded-box.br {
    background-position: right bottom;
}

Schritt #4 anzeigen

Wenn wir diese CSS-Klasse eingebaut haben, wird uns also die Grafik zwei Mal angezeigt:
Zum einen am oberen Rand und zum andere am unteren Rand des ersten Containers.

Das wichtige hierbei ist, dass wir an allen vier Ecken die abgerundete Grafik abgezeigt bekommen. Zwar entspricht das aktuelle Ergebnis noch nicht unserem Wunschergebnis, jedoch ist man dem Ziel schon deutlich näher.

Inhaltshintergrund

Im nächsten Schritt wird der fehlende Teil zwischen der oberen und unteren Kante mit der gewünschten Hintergrundfarbe befüllt:

div.container div.rounded-box.content {
    background: #17a5c9;
}

Schritt #5 anzeigen

Wenn wir uns das Ergebnis nun aber anschauen, fehlen jegliche abgerundeten Ecken.
Der Grund dafür liegt in den Größen der Boxen. Es liegen sechs gleichgroße Div-Boxen übereinander. Wenn man sich das anhand gleich großer Folien auf einem Overheadprojektor vorstellt, versteht man auch das Ergebnis:

• Folie 1: Leer
• Folie 2: Oberer Bereich blau gefärbt inklusive einer abgerundeten Ecke mit weißem Hintergrund
• Folie 3: Der obere rechte Teil mit der abgerundeten Ecke
• Folie 4: Untere linke Ecke und bis zum rechten Rand blau
• Folie 5: Unterer rechter Bereich gefärbt (siehe Folie 3)
• Folie 6: Komplett blau gefärbt.

Um nun die abgerundeten Ecken wieder sichtbar zu machen, “schneiden” wir von Folie 6 oben und unten einen Teil ab. Die Höhe der abgeschnittenen Teile entspricht der Höhe einer abgerundeten Ecke. In diesem Fall also 5px.

Bezogen auf HTML bzw. CSS können wir nicht einfach einen Teil eines Containers abschneiden. Stattdessen bringen wir andere Boxen dazu, dass darauffolgende Container erst 5px unter ihnen anfangen dürfen.
Dazu nutzen wir die Eigenschaft padding.

Daraus ergibt sich letztendlich folgender CSS-Code:

div.container {
    margin: 0;
    padding: 0;
}
div.container div.rounded-box {
    background:url(rounded-box.gif) top left no-repeat;
}
div.container div.rounded-box.tl {
    background-position: left top;
}
div.container div.rounded-box.tr {
    background-position: right top;
    padding-top: 5px;
}
div.container div.rounded-box.bl {
    background-position: left bottom;
}
div.container div.rounded-box.br {
    padding-bottom: 5px;
    background-position: right bottom;
}
div.container div.rounded-box.content {
    background: #17a5c9;
    padding: 0 5px;
}

Schritt #6 anzeigen

Nun werden auch wieder die abgerundeten Ecken angezeigt.
Damit der Text in der Box nicht am Rand “klebt”, habe ich noch einen rechten und linken Abstand definiert und das Ergebnis entspricht nun der Wunschvorstellung.

Diese Variante habe ich im IE6, IE7, Firefox, Opera und Safari getestet und sie funktioniert einwandfrei.

Demnächst werde ich einen auf diesem Artikel basierenden Beitrag schreiben, wie man mit dieser Methode Boxen mit einem Rahmen erstellt.

Firefox, Opera, Safari usw. zeigen die PNG-Grafik auch wie gewünscht an, wo liegt also das Problem?
Wie zu erwarten, liegt es natürlich auf Seiten des geliebten Internet Explorer 6. Wenn man sich das Ergebnis anschaut, werden die halbtransparenten Pixel grau dargestellt.

Zur Lösung des Problems gibt es diverse Scripts und Befehle, jedoch habe ich noch keine Variante entdeckt, die eine perfekte Kompatibilität des IE6 mit halbtransparenten Grafiken bietet.
Zwei Varianten möchte ich kurz vorstellen und zeigen wie sie angewendet werden.

AlphaImageLoader Filter

Microsoft bietet zur Darstellung den AlphaImageLoader Filter.
Somit lässt sich mit dem folgenden Code eine PNG-Grafik im IE6 richtig darstellen:

<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='grafik.png', sizingMethod='scale')" ></div>

Das ganze lässt sich auf eine Reihe von HTML-Tags anwenden (siehe Microsoft Developer Network).
Leider bietet es keine Unterstützung der CSS-Eigenschaft Background-Repeat, jedoch kann mit dem Attribut “sizingMethod” das Bild beschnitten (crop) und gestreckt bzw. skaliert (scale) werden.

Vorteile

• Keine Einbindung externer Scripte.

Nachteile

• Keine Unterstützung von Background-Position, dementsprechend keine halbtransparenten CSS-Sprites.
• Keine Unterstützung von Background-Repeat.

Scripts

Im Internet geistern diverse Scripts umher, die in ihrer Funktionsweise ähnlich sind, sich aber im Umfang unterscheiden.
Ich benutze den “IE PNG Fix” von TwinHelix.
Mittels CSS wird die Datei iepngfix.htc eingebunden:

<style type="text/css">
img, div, .pngfix, input { behavior: url("iepngfix.htc") }
</style>

Diese Einbindungs-Variante wird auf der Demoseite angeboten.

Jedoch komm es bei größeren HTML-Dokumenten zu dem Problem, dass jedes <img>-, <div>- und <input>-Tag vom Script auf PNG-Grafiken überprüft wird.
Dadurch ergibt sich eine teilweise lange Ladezeit im IE6.  Ich habe die Erfahrung gemacht, dass über 800 Elemente durchsucht wurden und die Seiten während des Ladevorgangs nur stockend zu benutzen war.

Meine Lösung ist recht einfach. Anstatt für alle oben genannten Elemente das Script einzubinden, wird nur auf alle Elemente, denen eine bestimmten Klasse zugewiesen ist, das Script angewendet:

.pngFix { behavior: url("iepngfix.htc") }

Nun brauch man z.B. einem DIV-Container nurnoch die Klasse .pngFix zuweisen (<div class=”pngFix”></div>) und der Rest geschieht automatisch.
Durch die Microsoft-spezifische CSS-Eigenschaft behavior, wird das Script auch nur vom Internet Explorer ab Version 5.5 eingebunden. Für den IE4.0 und IE5.0 bietet das Script keine Unterstützung, genauso wie für den IE5/Mac.

Vorteile

• Das Script wird nur vom IE6 eingebunden und interpretiert (.htc)

Nachteile

• Auch hier kann kein Background-Position/-Repeat eingesetzt werden, jedoch wird es von der v2.0 Alpha 3 ermöglicht.
• Die PNG-Grafiken werden am Ende des Ladevorgangs ersetzt, es besteht also bei langsamer Verbindung die Möglichkeit, dass erst die eingegrauten PNG´s angezeigt werden, die nach und nach ersetzt werden.

Leider sind das alles nur bedingt nutzbare Hilfsmittel. Ein Zwangsupdate auf den IE7 seitens Microsoft würde solche Probleme ersparen.

Dieser Artikel richtet sich an Webmaster, deren Website-Layout(s) mehrere Grafiken beinhalten, die optimiert eingebunden werden sollen, wodurch sich die Ladezeit reduziert.

Seit einiger Zeit wird die CSS-Sprites-Technik immer bekannter und auch durch größere Unternehmen, wie yahoo, angewendet und vorangetrieben.
Doch welche Vorteile bringt die Verwendung, wie benutze ich CSS-Sprites auf meiner Seite und welche Probleme können auftreten?
All das versuche ich euch in diesem Artikel näher zu bringen.

Was sind CSS-Sprites / Image-Sprites?

Mehrere kleine Grafiken zu einem großem Image-Sprite kombiniert.
Um nun die gewünschte Grafik anzuzeigen, wird, mittels CSS-Befehlen, nur dieser Bereich im Image-Sprite angezeigt.

Wozu?

Kurz und knapp: Ladezeitoptimierung.
Trotz der immer weiter sinkenden Anzahl an ISDN/Modem-Benutzern, sollte der moderne Webmaster einen Blick auf diese Technik werfen.

Hintergrund

Umsetzung eines Homepageentwurfs des Grafikers:
Man beginnt (zumindest geh ich nach diesem Prinzip vor) sich im Kopf oder auf Papier eine Grundstrukur aufzubauen, deren HTML-Code möglichst schlank und die endgültige Darstellung skalierbar ist.
Nach dieser Strukur wird das Design in Einzelteile zerlegt und der HTML- und CSS-Code geschrieben.

Warum nun also CSS-Sprites?

• Ladezeit bei Modem/ISDN-Nutzern verkürzen.
• Anzahl der HTTP-Requests verringern.

Was bitte? HTTP-Requests?

HTTP (Hypertext Transfer Protocol) ist ein zustandsloses Protokoll, das die Verbindung zwischen dem Server und dem Client regelt und über das z.B. Bilder, HTML-, CSS-und Javascript-Dateien geladen werden.

Es muss also für jedes noch so kleine Bild und jede Datei eine neue HTTP-Verbindung aufgebaut werden.

Anwendung

Der CSS-Code könnte also zum jetzigen Zeitpunkt folgendermaßen aussehen:

div#meinBildDiv1 {
    width:10px;height:10px;
    background:url(bild1.gif) no-repeat;
}

div#meinBildDiv2 {
    width:20px;height:20px;
    background:url(bild2.gif) no-repeat;
}

div#meinBildDiv3 {
    width:30px;height:30px;
    background:url(bild10.gif) no-repeat;
}

Bild1.gif:

Bild2.gif:
Bild3.gif

Das Problem dabei ist, dass nur eine bestimmte Anzahl an parallelen Requests vom Browser zugelassen werden (Firefox 2: Standardmäßig 2; siehe about:config – network.http.max-persistent-connections-per-server).
Demzufolge werden die vom HTML-Dokument eingebundenen Dateien nacheinander vom Server geladen.
Die logische Konsequenz ist die verlängerte Ladezeit.

Und an diesem Punkt kommen die CSS-Sprites zum tragen.

Anstatt nun, wie im Beispiel-Code, drei Bilder zu laden, von denen jedes einen HTTP-Request verursacht, werden sie zusammen in einem großen Image-Sprite gespeichert (Beispiel-Sprite von yahoo.com).

Nun ändert sich unser CSS-Code folgendermaßen:

div#meinBildDiv1,
div#meinBildDiv2,
div#meinBildDiv3 {
    background:url(sprite.gif) no-repeat;
}

div#meinBildDiv1 {
    width:10px;height:10px;
    background-position:0px 0px;
}
div#meinBildDiv2 {
    width:20px;height:20px;
    background-position:0px -20px;
}
div#meinBildDiv3 {
    width:30px;height:30px;
    background-position:0px -50px;
}

Sprite.gif:

Was passiert hier?

Im ersten Schritt weisen wir allen drei DIV-Boxen unser erstelltes sprite.gif als Hintergrundbild zu.
Aufgrund der unterschiedlichen Bildgrößen der einzelnen Boxen, müssen diese individuell angegeben werden.
Soweit nichts neues…

Nun zum Befehl background-position.

Ich werde die Funktionsweise von background-position: 0px -20px; beim zweiten DIV anhand eines Overhead-Projektors und 2 transparenten Folien erklären.
Auf der unteren Folie könnt ihr euch das sprite.gif vorstellen, das die drei vorher benutzten Bilder beinhaltet.
Die zweite, obere, Folie hat ein dünnen Rahmen um ein Quadrat der Größe 20px*20px und liegt standardmäßig in der oberen linken Ecke.
Anstatt des 20px*20px großen Bereichs oben links der unteren Folie, möchten wir einen Bereich weiter unten einblenden.
Wir müssen also die obere Folie verschieben.
Wird sie nach oben bzw. nach rechts verschoben, sind die background-position-Werte positiv.

Jedoch möchten wir unsere Folie nach unten verschieben, da das DIV2-Bild von der oberen Kante aus um 20px nach unten verschoben ist. Eine horizontale Verschiebung ist in unserem Fall nicht gegeben.
Demzufolge ergibt sich eine Verschiebung von 0px in der Horizontalen und -20px in der Vertikalen.
Diese Werte werden in der Reihenfolge background-position: Horizontal Vertikal;

background-position:0px -20px;

Nun haben wir also unser Quadrat auf der oberen Folie um 20px nach unten verschoben.

Bei den zwei weiteren DIV-Boxen verwenden wir auf der oberen Folie ein kleineres bzw. größeres Quadrat, ansonsten verändert sich nichts.

Was es zu beachten gibt

Der Browser Opera (bis 9.0) unterstützt beim Befehl background-position nur Werte bis zu (-)2042px.
Alle Werte kleiner -2042px, bzw. größer 2042px werden nicht angenommen und stattdessen wird auf diesen Wert auf- bzw. abgerundet.

Abschließende Worte

Ich hoffe euch hat mein Artikel geholfen und bitte um Nachsicht, da es ist mein erster Blogartikel ist.
Bei entsprechender Resonanz, oder Langeweile meinerseits, werde ich auf die Anwendung von transparenten PNG-Grafiken und den entstehenden Problemen eingehen.

Weiterführende Links

• http://spritegen.website-performance.org/