kaxigt.com

Jag skriver om webben för webben

Hem » CSS-guider » Gör en iframe enbart med css: skrollbar div

Gör en iframe enbart med css: skrollbar div

Postad: 21 december 2007 | CSS-guider | No Comments
Lästid: 2 minuter
OBS! Iframes – det vill säga inbäddade ramar används numer mycket sällan eftersom det finns nyare tekniker för att få samma utförande. 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 och iframes är.

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil innan.

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:800px;height:400px;
border:4px double #eee;
padding:4px;margin:10px 0 10px 0;}

html-koden

<div id="iframe">Lite text</div>

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.

<iframe class="iframe2" src="https://kaxigt.com/" name="iframe2" width="800" height="400"></iframe>

Resultat

Iframen i alternativ 2 heter iframe2, det vill säga name=”iframe2″ och det är också din target i länkningen.

Källan (source) som ska kallas in i min iframe är här https://kaxigt.com/. Du kan ange en vanlig HTML-sida eller vilken sida du vill ha.

Classattributet angav jag till iframe2 för enkelheten skull, redigerar det gör jag i stilmallen. Classattributet kan du självfallet döpa om, liksom namnet (target) på din iframe, och det dokument som ska ligga inbäddat som första dokument (source).