kaxigt.com

Vad är en iframe?

En iframe är en ”inbäddad” ram (frame) på en sida. De flesta använder sig av denna funktion dels för att styra utseendet på sin sida, dels för att ”bädda” in en markup eller andra filformat, exempelvis en mediaspelare. Man kan formatera en iframe med css-koder för att få den att ”passa” in med layouten i övrigt. Den kan till och med göras ”osynlig”!

Iframe som funktion var från början en anpassad funktion gjord för internet Explorer. Numer klarar dock de flesta webbläsare från och med version 4.0 och uppåt att stödja dessa.

Hur gör man då en iframe?

Du har antagligen redan nu klart för dig hur din sida ska se ut. Och någonstans på denna vill du ha en iframe. Då måste vi först ha en grundkod. Vi lägger in denna kod som ger oss en enkel iframe:

<iframe src="start.htm" name="iframe"></iframe>

iframe src=”start.htm” – talar om för oss att sökvägen/källan (src=source) till det första dokument som ska synas i vår iframe heter start.htm. Därefter har vi name="iframe" – name är detsamma som det namn/ID vi döper vår iframe till. I detta fall iframe.

Så här långt vet vi då att vår iframe heter iframe och src betyder sökvägen till källan, det vill säga till vårt första dokument som ska synas när sidan laddas upp. I vårt fall start.htm Nästa steg är att formatera vår iframe. Det betyder att vi anpassar den till hur vi vill att den ska se ut på sidan.

Med ”fulhtml” – css koder direkt i htmlkoden utan stilmall

Jag vill än en gång poängtera att jag inte är en vän av att stoppa in css i html-koderna. Dock gör jag det i detta fall för att visa hur man förr gjorde när man inte separerade strukturen från presentationen. Det är endast i studiesyfte.

Vi ska här börja med att skriva detta: width=”450" height=”100%"

Dessa värden ställer in bredd – respektive höjden på din iframe. Använder du pixlar har du ett fast värde, väljer du procent så anpassar sig din iframe efter sidan. OBS! Mozilla Firefox läser in värdet 100 procent utifrån innehållet i iframen – inte efter hur hög du har angett den. Det innebär att har du lite text i dokumentet som visas i iframen blir den inte högre än vad innehållet medger.

Utseendemässigt är det en stor skillnad beroende på hur du har lagt upp din sida. Om du till exempel har en bild vid sidan av din iframe och du anger ett procentvärde eller fast värde kan det i de webbläsare du inte anpassat skärmupplösningen för ställa till med problem. De flesta anger dock i vilka skärmupplösningar sidan är optimerad för.

Du kan läsa mer om detta i allmänt om webbdesign.

align=”center” Detta attribut anger dokumentets placering inuti din iframe. Det vill säga, var i din iframe du vill att dokumentet ska placeras. Left – center – eller right.

Placeringen av själva iframen styr du i den vanliga html-koden just före iframe-koden. Exempelvis så här: < div align=”left” > < iframe src=”start.htm” name=”iframe”

Nu vill vi kanske anpassa innehållet i vår iframe lite mer. Det kan man göra genom att ange följande: marginwidth=”10" marginheight=”10". Marginwidth och marginheight berättar om att i detta fall har vi valt ett 10 pixlars avstånd från respektive kant i vår iframe. Vårt innehåll i framen kommer alltså inte att ligga kant i kant med ramen. Du kan jämföra detta med cellpadding i html-kod. Det är en liknande funktion och betyder hur mycket ”luft” som ska finnas mellan kant och innehåll.

frameborder=”0" En frameborder visar kantlinjen på vår iframe.

Nu kommer vi till något extra. Detta är en css-kod som du kan använda för att ändra utseendet på din ramkant. style=”border: 1px solid #000;” bordercolor=”#000 Här har vi valt en kant på 1 pixels bredd i färgen svart. Den ska dessutom vara solid, det vill säga rak och helgjuten. scrolling=”auto”>. Du kan ställa in värdena på rull-listen Auto – yes – no.

Du avslutar din iframekod med denna: </iframe>

Hela koden:

<div align=”left”  width=”450" height=”100%"  marginwidth=”10" marginheight=”10" style=”border: 1px solid #000;” bordercolor=”#000" scrolling=”auto”><iframe src=”start.htm” name=”iframe”></iframe></div>

Med stilmall

Så här gör du en mer semantisk rätt skriven markup med css för din iframe.

Iframe utan ful-html:

<div class="iframe1"><iframe src=”start.htm” name=”iframe”></iframe></div>

Stilmallen:

.iframe1 {
width:450px;
height:100%;
padding:10px;
border: 1px solid #000;
overflow: auto;
}

Du har fler tips i länken css och xhtml/css om hur du kan skapa olika class-attribut för att styla din iframe med en stilmall istället.