Logga in
prova att bläddra i ramen nedan:
En IFRAME (Inline Floating Frames) är en ram som är oberoende av webbläsarens fönster avseende storlek och placering. Ett vanligt frameset består ju av två eller flera ramar som storleksmässigt anges i pixlar, procent eller andel förhållande till fönsterstorleken. Läs mer om Frames/Ramar här ». En IFRAME placeras i ett dokument men visar liksom Frames/Ramar innehållet i ett annat källdokument. Den sida som ska visas i IFRAME är alltså en annan HTML-sida som du förberett och sparat tidigare.
IFRAME kan placeras överlappande och kan ha även ha en transparent bakgrund. OBS! Även om IFRAME är standard från och med HTML 4 (läs mer på www.w3c.org) så är stödet begränsat i andra webbläsare än Internet Explorer. Överlappande IFRAME använder attributet z-index vilket stöds av IE 4 när det gäller Lager (layers). Z-index för IFRAME stöds däremot bara av IE 5.5 och senare versioner. Om webbläsaren inte stöder IFRAME visas inget innehåll alls!
Det finns ingen menypalett för att infoga och ändra en IFRAME men genom att infoga koden kan du få en dialogruta där du kan göra olika val.
Valen du kan göra är: Name: Namn och identifierare på ramen. Används även som mål (target) vid länkning. Width och Height: Bredd och höjd på ramen i pixlar. Du kan även ange enheten i procent av webbläsarens fönster genom att tex ange enheten % Margin Width och Margin Height: Avståndet från ramkant till innehåll i ramen. Alignment: Ramens placering i förhållande till det tillgänga utrymmet (som inte behöver vara detsamma som fönsterytan). Scrolling: auto=vid behov yes=alltid no=aldrig Show Borders: Visar ramens kantlinje |
Placeringen av en IFRAME i förhållande till webbläsarfönstret gör du enklast och mest exakt genom att använda Tabeller eller Lager ( läs mer i övningarna "Tabeller" » och "Lager - Layers" » )
Att lägga innehållet i en tabellcell ger bra möjligheter att placera annat text- och bildinnehåll bredvid innehållet i en IFRAME men i samma tabell. Skapa en tabell på vanligt sätt och placera markören i den cell du infoga IFRAME. I övrigt enligt punkt 1 ovan.
Exemplet nedan visar en tabell med 1 rad och 3 kolumner där IFRAME finns i cell nr 2:
Klicka här för att se exemplet ovan i ett eget fönster »
Vill du ha din IFRAME centrerad vertikalt och horisontellt så att den alltid ligger mitt i webbläsarens fönster kan du lägga IFRAME i en tabell med 1 rad och 1 kolumn där tabellen är 100% i både bredd och höjd och cellens innehåll är centrerat:
I exemplet nedan ligger IFRAME i en tabell som består av endast 1 cell. Bakgrundsbilden på sidan är oberoende av storlek och placering av IFRAME till skillnad från om du försöker få samma layout i ett vanligt frameset (ramar):
Klicka här för att se exemplet ovan i ett eget fönster »
Genom att ge IFRAME en positionering med hjälp av X- och Y-koordinater får ramen liknande egenskaper som ett Lager.
Vill du placera en IFRAME i ett befintligt Lager placerar du markören i Lagret och infogar koden för IFRAME enligt punkt 1 ovan. Läs mer om Lager i övningen "Lager - Layers" ».
Exemplet nedan visar hur du ger din IFRAME en exakt position på sidan med hjälp av attributet style="position..." där du anger om du vill ha en absolut eller relativ placering av IFRAME.
I kodvyn infogar du attributet style och
anger önskad position av IFRAME. I exemplet nedan anges att ramen
ska placeras i en absolut position av 100 pixlar från
vänsterkant och 100 pixlar från överkant av
webbläsarens fönster:
Resultatet blir så här när du förgranskar
med F12:
Klicka här för
att se exemplet ovan i ett eget fönster »
Du kan även ange att positionen ska vara relativ i
förhållande till annat innehåll på sidan. Risken
är då mindre att IFRAME hamnar framför andra bilder och
text på sidan.
IFRAME placerad med 100 pixlars avstånd relativt från övrig text:
Klicka här för
att se exemplet ovan i ett eget fönster »
IFRAME placerad med 100 pixlars avstånd absolut från fönsterkanten:
Klicka här för att se exemplet ovan i ett eget fönster »
Att länka till en IFRAME fungerar likadant som att länka till en ram i ett Frameset. Målet för länken är detsamma som ramens namn vilket i detta fall är namnet på IFRAME. Prova länkarna nedan som öppnar sidor i 3 olika IFRAME:
Länken gör du på vanligt sätt genom att markera området som ska länkas och välja måldokumentet i paletten "Properties" (Egenskaper). Viktigt är att du väljer "Target" (mål) för länken. Du kan inte bläddra fram namnet på IFRAME utan måste skriva det själv i rutan":
Koden för en IFRAME enligt ovan kan se ut så här:
<iframe src="sidan1.php" |
Koden för länken som öppnar sidan i ramen kan se ut så här:
| <a href="sidan2.php" target="iframe1">Länk...</a> |
IFRAME kan ha egenskapen transparent och visa innehållet som finns under ramen. För att det ska fungera måste du ange transparens på två ställen:
OBS! Om du bara anger ett av de två attributen för genomskinlighet fungerar det inte! Se exemplet nedan:
Här fungerar transparensen och bakgrundbilden syns genom IFRAME:
Klicka här för att se exemplet ovan i ett eget fönster »
Med hjälp av CSS kan du formatera de flesta HTML-objekt och så även IFRAME. Läs mer om CSS i övningen "CSS - Stilmallar" »
I alla exemplen nedan är kantlinjen borttagen med attributet frameborder="0". Byt ut färgkoder, kantlinjetyp och tjocklek i exemplen nedan.
Grundkoden för exemplen nedan är då:
| <iframe src="sidan.php" name="iframe" width="150" height="150" scrolling="auto" frameborder="0" style="ange stil enligt exemplen nedan här"></iframe> |
Prova att bläddra i exemplen nedan!
| style="border: 2px solid #6699FF;" | style="border-top: 2px solid #CC6630; border-bottom: 2px solid #CC6630;" | style="border: 2px dotted #CC3366;" |
(Anges i koden för sidan som visas i IFRAME) <HEAD> |
style="border: 1px solid #666666;" (bläddringslister på samma sätt som visas till vänster) |
style="border: 5px double #ACBBEC;" |
skriv ut »