Teil 2: Workshop CSS
- Workshop CSS
- Teil 2: Workshop CSS
- Teil 3: Workshop CSS
Bewertungen grafisch darstellen Nicht nur bei Amazon können Sie Sterne für die Qualität der Artikel und des Lieferanten vergeben - viele Meinungsportale erlauben inzwischen diese Art der Bewertung. Das folgende Skript zeigt Ihnen, wie Sie mithilfe von CSS und einer Stern-Grafik die grafische Um...
Bewertungen grafisch darstellen
Nicht nur bei Amazon können Sie Sterne für die Qualität der Artikel und des Lieferanten vergeben - viele Meinungsportale erlauben inzwischen diese Art der Bewertung. Das folgende Skript zeigt Ihnen, wie Sie mithilfe von CSS und einer Stern-Grafik die grafische Umsetzung angehen können.
Dieses Beispiel setzt die Kenntnis des eben beschriebenen Effekts voraus. Die Listen-elemente werden so angepasst, dass Sie horizontal laufen, die Aufzählungszeichen verschwinden und die Grafik mit den Sternen eingeblendet wird. Da jeder Stern eine Breite von 20 Pixeln hat, erlangt der Sternenbanner eine Gesamtbreite von 100 mal 20 Pixel:
.sternenbanner{
list-style:none;
margin: 0px;
padding:0px;
width: 100px; height: 20px;
position: relative;
background: url(sterne.gif) top
left repeat-x; }Die Grafik wird mehrfach wiederholt, so dass eine Liste von fünf Sternen entsteht. Die Arbeit wird anschließend in den CSS-Formatierungen der Anchor-Teile erledigt:
.sternenbanner li a{
display:block;
width:20px; height: 20px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px; }Die wichtigsten Elemente, damit der Trick mit den Sternen funktioniert, sind der z-Index sowie die absolute Positionierung. Die Positionierung ist notwendig, damit die einzelnen Sterne direkt angesteuert werden können. Der z-Index kommt im Zusammenhang mit dem hover-Effekt zum Tragen:
.sternenbanner li a:hover{
background: url(star_rating.gif)
left bottom; z-index: 1;
left: 0px; }An dieser Stelle wird dem Link das Hintergrundbild zugewiesen und der z-Index auf 1 verschoben. Damit wandert dieser 20 Pixel nach unten und zeigt nun den markierten Stern an. Die Vervielfältigung dieses Effekts kommt durch die einzelnen Klassen zustande, welche den Anchor-Elementen zugewiesen wurden. Diese sorgen dafür, dass fünf Sterne angezeigt werden.
.sternenbanner a.einstern{
left: 0px; }
.sternenbanner a.einstern:hover{
width:20px; }Prozentuale Balkendarstellung
Sie können auf diese Weise auch prozentuale Ergebnisse - beispielsweise ein Balkendiagramm - darstellen. Im nächsten Beispiel sehen Sie das Ergebnis einer Abstimmung, bei dem die einzelnen Punkte eine Zustimmung von 20, 40, 60, 80 und 100 Prozent erhalten haben.
Als Basis dient wieder eine Aufzählung mit fünf Listenelementen, welche die einzelnen Prozentwerte widerspiegeln. Im Gegensatz zu den anderen Beispielen wird bei den Balkendiagrammen die Grafik nicht in x-Richtung, sondern in y-Richtung wiederholt. Damit benötigen Sie lediglich einen schmalen Streifen und können diesen beliebig oft wiederholen.
Für die einzelnen Listenelemente wurde folgende Formatierung gewählt:
ul.balkendiagramm li{
margin-bottom: .5em;
padding: .2em;
background: #600;
color: white;
font-family: monospace;
font-size: 14px;
font-weight: bold; }Die Hintergrundfarbe ist braun, die Schrift weiß, die Schriftart Monospace, fett und 14 Punkte groß. Die Breite der Balken steuern Sie über die Eigenschaft padding - erhöhen Sie den Wert, so wird der Balken breiter.
ul.balkendiagramm li.20prozent{
background: url(balkendiagramm20.
jpg) repeat-y 20% 0; }Die einzelnen Listenelemente sind dann nicht mehr als der Aufruf der zugehörigen Grafik und die Angabe, dass die Wiederholung in y-Richtung stattfindet.
Den einzigen Unterschied macht die 100-Prozent-Spalte, die komplett in Braun erscheint. Hier kommt lediglich die in der Formatierung der Listenelemente festgelegte Hintergrundfarbe zum Tragen.
Blog-Einträge aufgepeppt
Gerade bei Blogs und News, die in der Regel sehr textlastig sind, kommen Grafiken zur Hervorhebung von Inhalten gut zur Geltung. Das folgende Skript setzt das aktuelle Datum grafisch um und stellt es mithilfe eines Kalenderblatts dar. Dieses erhalten Sie im Übrigen kostenlos unter .
Das Beispiel geht nicht auf die Berechnung des aktuellen Datums ein, sondern lediglich auf die Darstellung eines definierten Tages. Dazu ist lediglich eine Zeile HTML-Code und ein wenig CSS notwendig.
<p class="datum monat12">1</p>Die Formatierung des Paragraphs verweist zum einen auf die Klasse datum und nutzt darüber hinaus das Attribut monat12.
.monat12 {
background: url(calendar/12.gif)
no-repeat 0 0; }monat12 ruft das Icon 12.gif auf, welches im Unterverzeichnis calendar abgelegt ist und positioniert es mit der linken oberen Ecke auf den Koordinaten 0,0.
Die Formatierung der Schrift und deren Positionierung wird für alle Termine analog über p.datum festgelegt:
p.datum {
width: 42px; height: 10px;
padding: 18px 0 14px 0;
text-align: center; }Die Breite des Icons beträgt 42 Pixel, der Text wird mithilfe der Höhe, des Abstands und der Ausrichtung passend im dafür vorgesehenen Bereich platziert.
Abhängig vom Verwendungszweck reicht das Datum als Klassifizierung nicht aus, da beispielsweise an einem Tag zwei Beiträge entstehen können, die Sie optisch unterscheiden möchten. Dazu wird als zusätzliches Element eine Wolke verwendet, die am rechten oberen Rand des Kalenderblatts platziert wird und in diesem Beispiel den Wert 99 als Zähler enthält.
Dazu wird als Erstes um das Kalenderblatt ein Rahmen gefügt, sodass bezogen auf den Rahmen eine relative Positionierung der Wolke möglich ist. Mit einem zweiten Rahmen wird dann die absolute Positionierung durchgeführt:
<div class="rahmen"><p class="datum monat12"><span>Dec</span>1<span>st</span></p><div class="wolke">99</div></div>Passend dazu der CSS-Code für rahmen und wolke:
.rahmen {
position: relative; }
.wolke {
position: absolute;
text-align: center;
top: -4px; left: 22px;
width: 30px; height: 24px;
padding: 3px 0;
background: url(calendar/bubble2.
png) no-repeat 0 0; }Der Aufruf der Grafik erfolgt über die CSS-Formatierung von wolke - dort sind auch die weiteren Formatierungen für deren Text und die Positionierung untergebracht.
Reine CSS Navigation
Komplett ohne Grafiken kommt das nächste Beispiel aus, mit dem eine vollständige Navigation mit einem Home-Bereich und vier zusätzlichen Menüpunkten realisiert wird.
Der Ausgangspunkt ist wie gewohnt eine Aufzählung mit fünf Listenelementen, wobei das erste den Hintergrund repräsentiert und die anderen vier die Menüpunkte:
<ul><li><a href="#1" id="home">HOME</a></li><li><a href="#2">Button 1</a></li><li><a href="#3">Button 2</a></li><li><a href="#4">Button 3</a></li><li><a href="#5">Button 4</a></li></ul>Der Home-Bereich, welcher auch die vier Menüpunkte beinhaltet, wird über die CSS-Formatierung home definiert:
a#home {
position:absolute; top:0; left:0;
width:510px; height:175px;
margin:0; line-height:125px;
background:green; }Breite und Höhe werden über die gleichnamigen Variablen festgelegt, die Positionierung erfolgt absolut und startet direkt in der linken oberen Ecke Ihres Browsers, die Hintergrundfarbe ist Grün.
Die Schaltflächen werden über die Formatierung der Listenelemente festgelegt.
ul li a {
position:relative; top:130px;
display:inline;
float:left; width:115px;
margin-right:10px; padding:10px 0;
color:#fff; text-transform:
uppercase; text-decoration:none; font-size:11px; text-align:center; letter-spacing:1px;
background:brown; }Die Buttons sind jeweils 115 Pixel breit und besitzen die Farbe Braun. Die Positionierung der Buttons nehmen Sie entweder über die relative Positionierung vor und setzen den Anfangspunkt auf 130 Pixel, oder Sie nehmen den CSS-Hack zu Hilfe:
* html ul li a { ma\rgin:3px;
t\op:130px; }Das hover-Ereignis wird in ein eigenes CSS gepackt und verändert lediglich die Hintergrundfarbe des entsprechenden Bereichs:
ul li a:hover, ul li a#home:hover {
background:blue; }
