Gör en iframe enbart med css – skrollbar div

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

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

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.

Liknande poster:

Leave a Reply

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