Alternative zu iframes erstellen

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. Doch es gibt eine Alternative zu iframes, denn man kann einen ähnlichen Effekt auch mit CSS erzielen. Somit muss man dabei gar nicht mehr auf iframes zurückgreifen.

Wie das aussieht, zeige ich dir in diesem Artikel.

 

CSS-Alternative zu iframes

Die CSS Alternative zu iframes ist schnell gemacht. Man benötigt dafür lediglich das nachstehende CSS Snippet.

 

Beispiel (CSS):

.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 bspw. wie folgt.

 

Beispiel (HTML):

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

 

Erklärung:

Die im Beispiel genannte DIV Klasse 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 dann erscheinen, wenn 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.