IFrames mit CSS stylen Style

click fraud protection

Wenn Sie ein Element in Ihr einbetten HTML, haben Sie zwei Möglichkeiten, CSS-Stile hinzuzufügen:

  • Sie können das stylen
    IFRAME
    selbst.
  • Sie können die Seite innerhalb des
    IFRAME
    (unter bestimmten Bedingungen).

Verwenden von CSS zum Stylen des IFRAME-Elements

Zwei Männer codieren an Computern
vgajic / Getty Images

Das erste, was Sie beim Gestalten Ihrer Iframes beachten sollten, ist die.

IFRAME
  • selbst. Obwohl die meisten Browser Iframes ohne viele zusätzliche Stile enthalten, ist es dennoch eine gute Idee, einige Stile hinzuzufügen, um sie konsistent zu halten. Hier sind einige CSS-Stile, die wir immer verwenden iframes:
    Rand: 0;
  • Polsterung: 0;
  • Rand: keine;
  • Breite: Wert;
  • Höhe: Wert;

Mit dem.

Breite

und.

Höhe

auf die Größe einstellen, die in mein Dokument passt. Hier sind Beispiele für einen Rahmen ohne Stile und einen mit nur den Basics. Wie Sie sehen können, entfernen diese Stile meistens nur den Rahmen um den iframe, stellen jedoch auch sicher, dass alle Browser diesen iframe mit den gleichen Rändern, Abständen und Abmessungen anzeigen.HTML5 empfiehlt die Verwendung der.

instagram viewer
Überlauf

-Eigenschaft, um die Bildlaufleisten innerhalb von a. zu entfernen Scroll-Box, aber das ist nicht zuverlässig. Wenn Sie also die Bildlaufleisten entfernen oder ändern möchten, sollten Sie die verwenden.

scrollen

Attribut auch auf Ihrem iframe. Um die zu verwenden.

scrollen

Attribut, fügen Sie es wie jedes andere Attribut hinzu und wählen Sie dann einen von drei Werten:

Ja

,

Nein

, oder.

Auto

.

Ja

weist den Browser an, immer Bildlaufleisten einzufügen, auch wenn sie nicht benötigt werden.

Nein

sagt, alle Bildlaufleisten zu entfernen, ob nötig oder nicht.

Auto

ist die Standardeinstellung und schließt die Bildlaufleisten ein, wenn sie benötigt werden, und entfernt sie, wenn sie nicht benötigt werden. So deaktivieren Sie das Scrollen mit der.

scrollen
Attribut: scrolling="no">
Dies ist ein Iframe.

Um das Scrollen in HTML5 auszuschalten, sollten Sie die verwenden.

Überlauf

Eigentum. Aber wie Sie in diesen Beispielen sehen können, funktioniert es noch nicht in allen Browsern zuverlässig. So schalten Sie das Scrollen mit der ein.

Überlauf
property: style="overflow: scroll;">
Dies ist ein Iframe.

Es gibt auf keinen Fall um das Scrollen mit der Taste komplett auszuschalten.

Überlauf

Eigentum. Viele Designer möchten, dass ihre Iframes mit dem Hintergrund der Seite, auf der sie sich befinden, verschmelzen, damit die Leser nicht wissen, dass die Iframes überhaupt vorhanden sind. Sie können aber auch Stile hinzufügen, um sie hervorzuheben. Das Anpassen der Ränder, damit der iframe leichter angezeigt wird, ist einfach. Verwenden Sie einfach die.

Rand

style-Eigenschaft (oder ist damit verwandt.

rand-top

,

Grenze-rechts

,

rand-links

, und.

Grenze-unten
Eigenschaften), um die Rahmen zu gestalten: iframe {
Rahmen oben: #c00 1px gepunktet;
Rahmen rechts: #c00 2px gepunktet;
Rahmen-links: #c00 2px gepunktet;
Rahmen-unten: #c00 4px gepunktet;
}

Aber Sie sollten nicht mit Scrollen und Rahmen für Ihre Stile aufhören. Sie können viele andere CSS-Stile auf Ihren iframe anwenden. In diesem Beispiel werden CSS3-Stile verwendet, um dem iframe einen Schatten, abgerundete Ecken und eine Drehung um 20 Grad zu geben.

iframe {
Rand oben: 20px;
Rand-unten: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
Randradius: 12px;
-moz-box-shadow: 4px 4px 14px #000;
-webkit-box-shadow: 4px 4px 14px #000;
Kastenschatten: 4px 4px 14px #000;
-moz-transform: drehen (20deg);
-webkit-transform: drehen (20deg);
-o-transformieren: drehen (20deg);
-ms-transform: drehen (20deg);
filter: progid: DXImageTransform. Microsoft. BasicImage (Drehung=.2);
}

Iframe-Inhalte gestalten

Das Gestalten des Inhalts eines Iframes entspricht dem Gestalten jeder anderen Webseite. Aber du muss Zugriff haben, um die Seite zu bearbeiten. Wenn Sie die Seite nicht bearbeiten können (sie befindet sich beispielsweise auf einer anderen Website).

Wenn Sie die Seite bearbeiten können, können Sie ein externes Stylesheet oder externe Stile direkt im Dokument hinzufügen, genau wie bei jeder anderen Webseite auf Ihrer Site.

instagram story viewer