Positionsbestimmung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 229

display: -webkit-box;
width: 100px;
}
nav li a {
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-pack: center;
border-radius: 3px;
margin: 3px 2px 2px 2px;
font-size: 9.5px;
font-weight: bold;
text-align: center;
color: #aaa;
text-decoration: none;
-webkit-box-align: end;
background-repeat: no-repeat;
background-position: center 3px;
background-size: 35px 25px;
}
nav li a.aktiv {
background-color: rgba(255,255,255,.15);
color: #fff;
}
a[href='#karte'] {
background-image: url(../bilder/karte.png);
}
a[href='#uebersicht'] {
background-image: url(../bilder/uebersicht.png);
}
a[href='#optionen'] {
background-image: url(../bilder/optionen.png);
}

5

Listing 5.1 Das Stylesheet der Toolbar

Jetzt sieht Ihr Navigationselement schon eher nach einer Symbolleiste aus (Abbil-
dung 5.18).

Die Symbole sind transparente PNG-Bilder. In diesem Fall wurden wir in der kosten-
losen Symbolbibliothek »Icon Sweets« fündig. Sie können alle Symbole als Photo-
shop-Datei unter http://iconsweets2.com/ herunterladen und kostenlos in Ihren
Projekten verwenden.