Wie man IFrames mit CSS formatiert

Verstehen, wie IFrames im Website-Design funktionieren

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

  • Sie können den IFRAME selbst stylen.
  • Sie können die Seite im IFRAME formatieren (unter bestimmten Bedingungen).

Verwenden von CSS zum Stylen des IFRAME-Elements

Das erste, was Sie beim Stylen Ihrer iframes beachten sollten, ist das

IFRAME
  • selbst. Während 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 in iframes einfügen: margin: 0;
  • Polsterung: 0;
  • Grenze: keine;
  • Breite: Wert;
  • Höhe: Wert;

Mit dem

Breite

und

Höhe

Stellen Sie die Größe ein, die in mein Dokument passt. Hier sind Beispiele für einen Rahmen ohne Stile und einen mit nur den Grundlagen. Wie Sie sehen, entfernen diese Stile meist nur den Rahmen um den Iframe, stellen jedoch auch sicher, dass alle Browser diesen Iframe mit denselben Rändern, Abständen und Abmessungen anzeigen. HTML5 empfiehlt die Verwendung von

Überlauf

Eigenschaft, um die Bildlaufleisten zu entfernen, 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 das zu benutzen

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 einzuschließen, auch wenn diese nicht benötigt werden.

Nein

sagt, alle Bildlaufleisten zu entfernen, ob benötigt oder nicht.

Auto

ist die Standardeinstellung und enthält die Bildlaufleisten, wenn sie benötigt werden, und entfernt sie, wenn sie nicht benötigt werden. Hier erfahren Sie, wie Sie das Scrollen mit deaktivieren

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

Um das Scrollen in HTML5 auszuschalten, sollten Sie das verwenden

Überlauf

Eigentum. Wie Sie in diesen Beispielen sehen können, funktioniert es jedoch noch nicht in allen Browsern zuverlässig. Hier erfahren Sie, wie Sie das Scrollen mit der Taste aktivieren

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

Es gibt keine Möglichkeit, das Scrollen mit der Taste vollständig auszuschalten

Überlauf

Eigentum. Viele Designer möchten, dass sich ihre Iframes in den Hintergrund der Seite einfügen, auf der sie sich befinden, 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

Stileigenschaft (oder eine verwandte Eigenschaft)

Border-Top

,

Grenze rechts

,

Grenze links

, und

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

Sie sollten jedoch 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 zu geben, Ecken abzurunden und ihn um 20 Grad zu drehen.

iframe {
Rand oben: 20px;
Rand-Boden: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
Randradius: 12px;
-Moz-Box-Schatten: 4px 4px 14px # 000;
-webkit-box-shadow: 4 x 4 x 14 x # 000;
Kastenschatten: 4px 4px 14px # 000;
-moz-transform: drehen (20 Grad);
-webkit-transform: drehen (20 Grad);
-o-transformieren: drehen (20 Grad);
-ms-transform: drehen (20 Grad);
filter: progid: DXImageTransform.Microsoft.BasicImage (rotation = .2);
}

Gestalten des IFrame-Inhalts

Das Gestalten des Inhalts eines Iframes entspricht dem Gestalten einer beliebigen anderen Webseite. Sie müssen jedoch Zugriff haben, um die Seite bearbeiten zu können. Wenn Sie die Seite nicht bearbeiten können (z. B. auf einer anderen Site).

Wenn Sie die Seite bearbeiten können, können Sie ein externes Stylesheet oder externe Stylesheets direkt in das Dokument einfügen, so wie Sie jede andere Webseite auf Ihrer Site formatieren würden.