Gör en iframe enbart med css – skrollbar div

Uppdaterat 2 april 2017 / Iframes – inbäddade ramar används numer mycket sällan eftersom det finns nyare tekniker. Iframes bör dessutom inte användas med tanke på användbarhet och tillgänglighet. Guiden här under kommer dock att få ligga kvar eftersom den används i programmeringsstudier och lärande av vad frames/iframes är.


Vi ska nu titta lite närmare på två alternativa iframes. Det översta exemplet är enbart gjort med en div box. Eftersom vi använder en div behöver du inte länka in någon sida utan du skriver texten som du brukar göra i dina boxar.

Då vi använder ett lager (div) kan man inte i detta alternativet länka in en sida i iframen, dock kan du länka ifrån boxen. Den fungerar på samma sätt som tabeller med scroll-list. Skillnaden är att denna box är gjord med div layer. Tänk på att css-märkningen styr presentationen, det vill säga utseendet på boxen. Marginalerna som finns angivna är således gjorda för att skapa avstånd till texten/elementen ovanför respektive under boxens placering.

css-koden till iframe alternativ 1

#iframe
{overflow:auto;
width:500px;height:200px;
border:4px double #eee;
padding:4px;margin:10px 0 10px 0;}

html-koden

Lite text

Gör en iframe med hjälp av css-class – alternativ 2

I alternativ 2 använder vi oss av en minimal och traditionell html för iframe, men som formateras av ett class-attribut utan css direkt i html-koden. Cssmärkningen till denna class är förövrigt densamma som för alternativ 1, med två undantag. Först har jag tagit bort koden overflow:auto; eftersom denna gör att iframen blir dold i IE. Sedan har jag tagit bort bredd och höjd. Det måste du därför ange direkt i html-koden, oavsett class-attributet, för att IE ska kunna förstå vad det handlar om.

Givetvis kan man trixa lite mer, jag har dock valt att visa den enklaste varianten.

Iframen i alternativ 2 heter iframe2, det vill säga name=”iframe2″ och det är också din target i länkningen. Classattributet angav jag till iframe2 för enkelheten skull. Det kan du självfallet döpa om, liksom din iframe, och det dokument som ska ligga inbäddat som första dokument.

Author: Lena

Lena är en riktig web geek med sikte mot web standards. Hon har både fått utmärkelsen Årets WebQueen som att ha blivit omskriven för sina insatser på nätet. Hennes stora intresse är gränssnitt. Lena är gränssnitt- front end designer och har studerat design, gränssnitt, tillgänglighet, användbarhet och web standards på Blekinge Tekniska Högskola.

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *