HTML and CSS Reference
In-Depth Information
Abbildung 4.39
Die Darstellung auf dem iPhone und unter Android sehen beinhahe iden-
tisch aus.
Um nun das Banner zu animieren, müssen Sie dieses zunächst aus dem Bildrand
schieben (Abbildung 4.40). Dies erreichen Sie mit einem negativen oberen Abstand
margin-top
:
.banner {
background-color:#0000ff;
color:#fff;
height:50px;
padding:10px;
margin-top:-70px;
}
Listing 4.13
Die Gestaltung des Banners via CSS
Warum 70 Pixel, wenn die Höhe des Elements nur 50 Pixel beträgt? Vergessen Sie
nicht den inneren Abstand (
padding
). Diesen müssen Sie immer noch zur Höhe dazu
addieren. Oberer innerer Abstand + unterer innerer Abstand + Höhe des Elements =
die gesuchte Pixelanzahl.
Abbildung 4.40
Das Banner ist nun außerhalb des Sichtfeldes.
Search WWH ::
Custom Search