Inhoud
Begrijpen hoe IFrames werken bij het ontwerpen van websites
beoordeeld door
Het eerste dat u moet overwegen bij het stylen van uw iframes is de
IFRAME
- zelf. Hoewel de meeste browsers iframes bevatten zonder veel extra stijlen, is het toch een goed idee om enkele stijlen toe te voegen om ze consistent te houden. Hier zijn enkele CSS-stijlen die we altijd opnemen in iframes:
marge: 0;
opvulling: 0;
border: geen;
breedte: waarde;
hoogte: waarde;
Met de
breedte
en
hoogte
ingesteld op het formaat dat in mijn document past. Hier zijn voorbeelden van een frame zonder stijlen en een met alleen de basisstijl. Zoals u kunt zien, verwijderen deze stijlen meestal alleen de rand rond het iframe, maar ze zorgen er ook voor dat alle browsers dat iframe weergeven met dezelfde marges, opvulling en afmetingen. HTML5 beveelt aan dat u de
overloop
eigenschap om de schuifbalken in een schuifvak te verwijderen, maar dat is niet betrouwbaar. Dus als u de schuifbalken wilt verwijderen of wijzigen, moet u de gebruiken
scrollen
attribuut ook op uw iframe. Om de
scrollen
attribuut, voeg het toe zoals elk ander attribuut en kies vervolgens een van de drie waarden:
Ja
,
Nee
, of
auto
.
Ja
vertelt de browser om altijd schuifbalken op te nemen, zelfs als ze niet nodig zijn.
Nee
zegt om alle schuifbalken te verwijderen, al dan niet nodig.
auto
is de standaard en bevat de schuifbalken wanneer ze nodig zijn en verwijdert ze wanneer ze niet nodig zijn. Hier leest u hoe u scrollen met de kunt uitschakelen
scrollen
attribuut: scrolling = "no">
Dit is een iframe.
Om scrollen in HTML5 uit te schakelen, moet u de gebruiken
overloop
eigendom. Maar zoals u in deze voorbeelden kunt zien, werkt het nog niet betrouwbaar in alle browsers. Hier ziet u hoe u het scrollen altijd zou inschakelen met de
overloop
property: style = "overflow: scroll;">
Dit is een iframe.
Er is echt niet om het scrollen volledig uit te schakelen met de
overloop
eigendom. Veel ontwerpers willen dat hun iframes opgaan in de achtergrond van de pagina waarop ze zich bevinden, zodat lezers niet weten dat de iframes er zelfs zijn. Maar u kunt ook stijlen toevoegen om ze op te laten vallen. De randen aanpassen zodat het iframe gemakkelijker wordt weergegeven, is eenvoudig. Gebruik gewoon de
grens
style property (of het is gerelateerd
border-top
,
grens-rechts
,
grens-links
, en
border-bottom
eigenschappen) om de randen op te maken: iframe {
border-top: # c00 1px gestippeld;
border-right: # c00 2px gestippeld;
border-left: # c00 2px gestippeld;
border-bottom: # c00 4px gestippeld;
}
Maar je moet niet stoppen met scrollen en randen voor je stijlen. U kunt veel andere CSS-stijlen toepassen op uw iframe. In dit voorbeeld worden CSS3-stijlen gebruikt om het iframe een schaduw, afgeronde hoeken te geven en het 20 graden te draaien.
iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-transform: rotate (20deg);
-webkit-transform: rotate (20deg);
-o-transform: roteren (20 graden);
-ms-transform: rotate (20deg);
filter: progid: DXImageTransform.Microsoft.BasicImage (rotatie = .2);
}
De Iframe-inhoud opmaken
Het opmaken van de inhoud van een iframe is net als het stylen van elke andere webpagina. Maar jij moet toegang hebben om de pagina te bewerken. Als u de pagina niet kunt bewerken (deze bevindt zich bijvoorbeeld op een andere site).
Als u de pagina kunt bewerken, kunt u een externe stijlpagina of stijlen rechtstreeks in het document toevoegen, net zoals u elke andere webpagina op uw site zou stylen.
