HTML and CSS Reference
In-Depth Information
Elemente in Mobile Safari unter iOS 5 fest positionieren
Sie positionieren ein Element fest an einer Stelle mit der CSS-Eigenschaft position
mit dem Wert fixed . Diese Definition stellt sicher, dass das Element immer an dersel-
ben Stelle stehen bleibt, auch wenn der Benutzer scrollt.
2
Sie ahnen bereits die praktischen Einsatzzwecke? Erstellen sie Toolbars, Fußleisten,
Hinweise und Navigationselemente, die nie aus dem Sichtfeld des Benutzers geraten
- ein essenzieller Bestandteil einer jeden App.
Sie möchten, dass die Kopfzeile in Ihrer Sharky-WebApp, trotz Scrollens, fest stehen
bleibt. Zunächst müssen Sie dazu die Kopfzeile fixieren:
header {
background-color:#1384ed;
text-align:center;
overflow:hidden;
position:fixed;
width:100%;
top:0px;
}
Während Sie über position:fixed das Festsetzen der Kopfzeile definieren, müssen Sie
zusätzlich noch dessen Breite und Position festlegen. Mit einer Breite von 100% und
einem oberen Abstand top von 0 ist die Kopfzeile optimal gestaltet.
Problem ist nun, dass zum einen der Inhaltstext zum Scrollen zu kurz ist und dass er
zum anderen hinter der Kopfzeile liegt. Ergänzen Sie also die Textlänge noch durch
etwas Blindtext oder eine kreative Ausgestaltung der Liebesgeschichte von Sharky's
Eltern. Damit der Text erst unterhalb der Kopfzeile anfängt, verpassen Sie dem body -
Bereich noch einen oberen Rand margin-top von 90 Pixel:
body {
background-image:url(../bilder/denim.jpg);
color:#fff;
font-family: "Helvetica";
margin:0px;
padding:0px;
margin-top:90px;
}
Und schon haben Sie eine feststehende Kopfzeile (Abbildung 2.19). Drehen Sie Ihr
iPhone oder iPad, so passt sich die Gestaltung automatisch an, und die Funktionalität
bleibt ebenfalls erhalten.
Search WWH ::




Custom Search