KILL IE6

Overflow

Mit overflow kann bestimmt werden, wie übergroße innere Elemente organisiert werden.

Bilder © etoy.com

HTML

Für dieses 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 -->

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;
  }

Die Definition white-space:nowrap verhindert ein ungewolltes Umbrechen der Bildzeile.

#oneline {  white-space: nowrap;}

#oneline img{ 
  margin: 5px; 
  padding: 5px 25px;
  background-color: #000;
  }
#oneline p{ 
  margin: 10px 5px; 
  padding: 0;
  }

Folgende Werte sind für overflow möglich:
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.