Att göra en iframe

Vad är en iframe – inbäddad ram?

En iframe är en “inbäddad” frame (ram) på en sida. De flesta använder sig av denna funktion för att styra utseendet på sin sida. 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 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 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 eftersom alla inte har intresse av att separera strukturen från presentationen.

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”>

Här kan du ställa in värdena på rull-listen Auto – yes – no.

Du avslutar din iframekod med denna: </iframe>

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.

Liknande poster:

4 Comments Add yours

  1. Kent says:

    hmm.. det ska stå
    ” Tänkte bara säga att <iframe> inte är valid i xhtml 1.0 strict. Då är det <object> som gäller. “

    1. Lena says:

      Hej!
      Sant, och någon gång i framtiden kommer jag att göra en guide om iframe specifikt xhtml 1.0 strict. Fram till dess så finns det andra som vill veta hur man gör en traditionell iframe.

      Tack för din kommentar =)

  2. Kent says:

    Tänkte bara säga att inte är valid i xhtml strict. Då är det som gäller

    1. Lena says:

      Hej!
      Jag tror knappast att någon som använder sig att doctype strict också använder gamla förlegade iframes. Jag tror inte att jag gör anspråk på att guiden ska vara i strict mode heller. Jag antar att du har lagt in kod i din kommentar? Kommentaren är något luddig så jag vet inte riktigt vad du menar – tyvärr =)

Leave a Reply

Your email address will not be published. Required fields are marked *