Kalenderblatt mit CSS gestalten

Schritt 1   HTML Markup erstellen

Erst kümmern wir uns um das HTML-Markup. In diesem Beispiel packe ich die Datumsanzeige in einem Absatz. So erscheint die Ausgabe auch ohne CSS in einer eigenen Zeile. Bspw. so: 2011, Donnerstag 08. September. Das Komma und der Dezimalpunkt werden später mit CSS ausgeblendet.


<p class="kalenderblatt">
 <span class="jj"> 2011<span class="zeichen">,</span></span>
 <span class="dd"> Donnerstag</span>
 <span class="tt"> 08<span class="zeichen">.</span></span>
 <span class="mm">September</span>
<p> 

Schritt 2   Kalenderblatt gestalten

Zunächst wird der Container für das Kalenderblatt gestaltet. Die Angabe von position:relative wird benötigt, um im Container absolut positionieren zu können. Die Schriftgröße ist hier mit 50 % angegeben und entspricht einer Schriftgröße von ca. 8 Pixel. Die Breite des Containers beträgt 10em bzw. 80 Pixel. Damit noch alles gut erkennbar ist, werden die Abstände zwischen den Buchstaben um 2 Pixel vergrößert. Der Rest ist selbsterklärend.


.kalenderblatt {
 position:relative;
 margin:10px;
 padding:0;
 width:10em;
 float:left;
 text-align:center;
 border:1px solid #999;
 font: 50.01% tahoma , arial,helvetica, sans-serif;
 font-weight:bold;
 letter-spacing:2px;
} 

Schritt 3   Span Tag zum Blockelement befördern

Damit sich die Span-Elemente über die gesamte Breite des Containers erstrecken, müssen diese zum Blockelement befördert werden.

	   
.kalenderblatt span {
 display:block;
}
}

Schritt 4   Datumsausgabe formatieren

Mit den nachfolgenden Regeln werden alle Datumsangaben, in den Span-Elementen, vertikal zentriert.


.kalenderblatt span.jj , .kalenderblatt span.dd , .kalenderblatt span.mm { /* Jahr  Tag  Monat*/
 line-height:20px;
}

.kalenderblatt span.jj {
 background:#f00;
 color:#fff;
}
 
.kalenderblatt span.tt { /* Tag */
 line-height:30px;
 font-size:16px;
}

Zum Schluss; werden noch das Komma und der Dezimalpunkt aus dem sichtbaren Bereich verschoben.


.kalenderblatt span.zeichen  {  
  position:absolute;
  left:-999px;
}

Wie ihr bemerkt haben werdet, ist es also sehr einfach ein Kalenderblatt mit CSS zu gestalten. Hier nun das Ergebnis.

2011. Donnerstag 08. September

Hinweis

Mit der Regel position:absolute lässt sich die Reihenfolge der Datumsausgabe beliebig sortieren, ohne das HTML Markup zu ändern.

erstellt am 06.04.2011

nach oben