Overflow
Mit overflow
kann bestimmt werden, wie übergroße innere Elemente organisiert werden.
Bildlegende
HTML
In diesem Beispiel werden zwei html div
Elemente benötigt. div id=scroll
bekommt vom CSS Breite und Höhe. div id=oneline
bekommt den Inhalt.
<div id="scroll"> <div id="oneline"> hat den Inhalt <img src="/files/images/scroll-layer/01.jpg" alt="" border="0" /> <img src="/files/images/scroll-layer/02.jpg" alt="" border="0" /> <img src="/files/images/scroll-layer/03.jpg" alt="" border="0" /> <img src="/files/images/scroll-layer/04.jpg" alt="" border="0" /> <img src="/files/images/scroll-layer/05.jpg" alt="" border="0" /> <p>Bilder © <a href="http://www.etoy.com">etoy.com</a></p> </div> <!-- end oneline --> </div> <!-- end scroll -->
Für dieses Layout wurde die Breite (width: 500px;
) entfernt, damit sich der Scrollayer dynamisch den Inhalt anpasst beim verkleinern des Browserfensters.
CSS
#scroll
bekommt eine fixe Breite und Höhe. Der Scrollbalken erscheint erst wenn der Inhalt von #oneline
grösser ist als die definierte Breite oder Höhe. Ist der Inhalt nur breiter, erscheint ein horizontaler Scrollbalken. Ist der Inhalt breiter und höher, erscheint vertikal und horizontal ein Scrollbalken.
#scroll { height:180px; width: 500px; margin:10px 50px; border: solid 1px #000000; background-color:#564b47; color:#fff; overflow: auto; -webkit-overflow-scrolling: touch; }
Die Definition white-space:nowrap
verhindert ein ungewolltes Umbrechen der Bildzeile.
#oneline { white-space: nowrap;} #oneline img{ margin: 5px; border: 3px solid #333; background-color: #000; } #oneline p{ margin: 0 5px; padding: 0; }
Werte für overflow
visible
: Inhalt ist komplett sichtbar und ragt aus dem Element.hidden
: Inhalt wird abgeschnitten, wenn er grösser als das Elements ist.scroll
: Inhalt wird abgeschnitten, wenn er grösser als das Elements ist. Das Element bekommt einen Scrollbalken, ähnlich wie bei einem iFrame.auto
: Inhalt wird abgeschnitten, wenn er grösser als das Elements ist und bekommt den Scrollbalken der benötigt wrird.
iOS5
Damit der overflow
auf dem iPad und dem iPhone funktionieren braucht es eine zusatzzeile Code. Funktioniert erst ab iOS5. -webkit-overflow-scrolling: touch;