first-letter CSS Menü – Teil 1/2
So, das wird der erste Eintrag in meinem Blog und ich starte gleich mit einem kleinen CSS Projekt, dem first-letter CSS Menü.
Bei den meisten Blogs die ich kenne ist das Menü mit viel CSS gestaltet und so wollte ich auch in meinem Blog nicht darauf verzichten. Während des designens des Styles und der suche nach einem passenden Script kam ich af die Idee den jeweils ersten Buchstaben eines Menüpunktes mit einer Hintergrundfarbe zu belegen. In CSS gibt es dazu ein spezielles Pseudo-Element :first-letter das sogar der IE kennt. Das Pseudo-Element hat den Vorteil das man den ersten Buchstaben nicht extra in einen Tag einschließen muss. Weiters soll das Menü in Mozilla FireFox, Opera und dem Internet Explorer richtig dargestellt werden.
Am Ende hab ich das Menü dann doch nicht für das Blog verwendet aber dafür hab ich jetzt was zum schreiben 
Entwurf
Ein Menüpunkt sollte dabei in etwa so aussehen:
Erster Versuch
Ich wollte erstmal das Grundprinzip testen und erstellte eine simple Seite, damit konnte ich auch gleich sehen ob es schon zu Beginn Probleme mit den Browsern geben wird.
HTML-Code
CSS-Code#navi {
margin:0px;
padding:0px;
list-style-type:none;
width:100%;
}
#navi li {
margin:0px;
padding:0px;
float:left;
width:20%;
}
#navi li a{
margin:0px;
padding:0px;
display:block;
font-family:'courier new';
background-color:white;
width:100%;
text-decoration:none;
}
#navi li a:first-letter {
margin:0px;
padding:0px;
background-color:black;
display:block;
color:white;
}
Opera und FireFox stellten die Testseite korrekt dar, nur der IE zickte wieder rum:
Auch nach mehreren Änderungen in der Struktur und im CSS Code war es mir nicht möglich den gleichen Effekt in allen drei Browsern zu erzielen. So musste ich leider doch den ersten Buchstaben des Menüs in einen eigenen Tag einschließen.