Alternative zu iframes

Manchmal ist es nötig, auf seinen Seiten einen separat scrollenden Bereich zu erstellen, beispielsweise für Erklärungstexte. Oftmals werden dafür iframes eingesetzt. Doch iframes haben auch Nachteile, zum Beispiel was die Suchmaschinenfreundlichkeit angeht. Daher kann man einen ähnlichen Effekt auch mit CSS erzielen, ohne dabei auf iframes zurückgreifen zu müssen.

 

CSS-Alternative zu iframes

CSS-Beispiel:

.iframe {
     position: relative;
     height: 500px;
     width: 500px;
     overflow: auto;
     }

 

Nun musst du nur noch den Text, der separat gescrollt werden soll, mit der soeben erstellten CSS-Klasse versehen. Dies funktioniert beispielsweise wie folgt.

 

HTML-Beispiel:

<div class="iframe">
   <p>Dies ist ein Beispieltext</p>
 </div>

 

Erklärung:

Die im Beispiel genannte <div class="iframe"> musst du natürlich in dein Stylesheet integrieren. Mit dem obigen Beispiel erzeugst du einen Bereich von 500 x 500 Pixel. Alle Inhalte Inhalte, die sich in diesem Bereich befinden, lassen sich separat vom Rest der Website scrollen. Durch das Attribut overflow: auto; stellst du sicher, dass die Scrollbalken erst erscheinen, sobald der Inhalt länger als definiert ist.

 

Du kannst dir auch ein Anzeigebeispiel ansehen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.