Cascading Stlye Sheets ( CSS ) Sprites
Viele große Internetseiten wie etwa Amazon oder EA nutzen sogenannten CSS Sprites. Nun, was ist das überhaupt … “CSS Sprites”? Bei sogentannten CSS Sprites nutzen wir nicht mehr viele einzelne Grafiken, sondern beispielsweise nur eine. Dies ermöglicht uns, die Größe der Webseite zu vergingern und damit natürlich auch die Ladezeit.Hier sind einmal die Grafiken, wie Amazon sie verwendet.
Wir haben also nur eine Grafik, statt mehrere einzelne. Ich möchte euch nun Anhand eines simplen Beispiels zeigen, wir Ihr diese Grafiken einsetzt. Wir möchten nun eine horizontale Navigation erstellen. Wie in Abbildung 1 zu sehen, haben wir hier die Orginale komplette einzelne Grafik mit stolzen 1,337 KB. In Abbildung 2 ist unsere CSS Sprite Grafik zu sehen. Diese wurde in drei einzelne Stücke geteilt, ergibt aber wie Abbildung 1 nur eine Grafik. Der Unterschied: Die CSS Sprite Grafik ist um die Hälfte kleiner, nähmlich nur 621 Byte.
Wie in Abbildung 2 zu sehen ist, ist jede der drei Grafiken 40 Pixel hoch. Diese Angabe ist sehr wichtig für uns, da wir diese für die positinierung unseres Hintergrundbildes benötigen.
Fangen wir an
Zunächst erstellen wir unser Markup.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cascading Style Sheets Sprites</title>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<div id="box-1">
<div id="box-2">
<div id="box-3">
hier kommt euer text ...
</div>
</div>
</div>
</body>
</html>
Wir haben nun drei ineinander verschachtelte Div Container. Der erste Container mit der ID “box-1″ wird die linke Seite der Navigation bilden. Der Container mit der ID “box-3″, wird den mittleren Teil der Navigation bilden. Das heisst auch, dass dieser vertikal wiederholt werden muss, jenachdem wie lang unsere Navigation ist. Zum Schluss der letzte Container. Das DIV mit der ID “box-2″ bildet den rechten Teil der Navigation und wird nicht wiederholt.
Die CSS Datei
Nun erstellen wir die CSS Datei. Wir sagen dem DIV mit der ID “box-2″, nehme das Bild nav.png als Hintergrundbild. Durch die -80 Pixel die wir angeben, wird nur der Bereich dargestellt, welcher nach 80 Pixel Höhe kommt, wie in Abbildung 2 zu sehen ist. Da wir dem Div eine Höhe von 40 Pixel zugewiesen haben, wird auch nur der Bereich des Bildes angezeigt, den wir benötigen.
Durch das Padding des zweiten Containers verhindern wir, dass zwischen dem ersten und zweiten Container ein Abstand zu dem mittleren dritten Div Container entsteht.
body {
margin:0 auto;
padding:200px 0 0 0;
width:500px;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
p {
margin:0;
padding:10px 0;
text-align:center;
}
#box-1 {
background:url(nav.png) no-repeat;
}
#box-2 {
background:url(nav.png) no-repeat 100% -80px;
padding:0 9px;
}
#box-3 {
background:url(nav.png) repeat-x -120px;
height:40px;
}
Die Breite könnt Ihr bestimmten, indem ihr dem Div Container mit der ID “box-3″ eine Breite zuweist.
Das wars. Ich hoffe ich konnte euch alles verständlich erklären, über Kiritik und Kommentare würde ich mich sehr freuen.
Ic3 (1 comments)
Kurz und knackig und direkt auf Joomla abgestimmt, gefällt mir sehr gut.
Ich komme wieder
Black (2 comments)
Danke!
weiter so!
Ingo Fahrentholz (1 comments)
Ich werde aufjedenfall auch euren feed abbonieren.. weiter machen !
Gartenantiquar (1 comments)
Danke für die Mühe. Zumindest im Überblick habe es kapiert und werde es mal damit versuchen. Allerdings muss ich mal sehen, wie ich die Positionen in Photoshop bestimme. Verstanden hab ich’s erst mal.