IFrames

Brug af iframes på hjemmesider

Mange hjemmesider er lavet som en lukket grafisk helhed med både en header, samt højre- venstreside og en fast bund.
Det er også rigtigt flot med et sådant lukket design, - problemet er bare at det lægger en begrænsning på indholdet, for hvis dette overstiger skærmhøjden så bliver hjemmesidens flotte grafiske ramme hakket midt over, idet der kommer lodret scroll på websiden.

En rigtig god løsning på dette er at lægge sidens indhold ind i et såkaldt iframe, så kan man nemlig flytte scrollfunktionen ind i selve indholdet, således at der kun er i dette der scrolles, hvorimod sidens grafiske rammer står stille.
Det er også langt mere roligt og behageligt at kigge på. Det virker generelt ret forstyrrende at sidens grafik farer op og ned i skærmbilledet samtidig med sideindholdet, og ganske unødvendigt er det også.

Der findes brugere der ikke bryder sig så meget om iframes, - så af hensyn til disse er der sidst i denne artikel et par eksempler på hvordan man kan lave scroll i en boks uden brug af iframes:

Jeg har lavet et eksempel med to helt ens websider, hvor der blot er den forskel, at på den ene er sideindholdet hentet ind på siden med et iframe. Du kan se de to sider på disse link:

Se websiden uden iframe på dette link: [KLIK HER]

Se websiden med iframe på dette link: [KLIK HER]

Bemærk: Det er meget vigtigt at gøre sig klart at en webside med et iframe ikke er det samme som en webside lavet i frames.
Det er to helt vidt forskellige ting som intet har med hinanden at gøre.

Sådan lægger du dit sideindhold ind i en iframe

Hvis du ønsker at flytte dit sideindhold ind i et iframe, så skal du stadig bevare den oprindelige webside som indholdet var på.
Den skal nemlig stadig udgøre den skabelon med grafik, header, menu og hvad der ellers måtte være på siden.
Det er sideindholdet, - og kun indholdet - du skal flytte over på en anden webside. Du kan se her hvorledes jeg har gjort det: [KLIK HER]

Websiden med sideindholdet har jeg kaldt "sideindhold.php". Jeg kan nu få indholdet fra denne side ind i mit iframe, ved at indsætte denne kode på den side hvor jeg ønsker at indholdet skal kunne ses:

<iframe src="http://www.fnsupport.dk/iframe/sideindhold.php"
width="97%" height="400" scrolling="auto" frameborder="0">
[Din browser understøtter ikke frames.
Få dig en ny <a href="http://www.mozilla.org">her!</a>]</iframe>

Som du kan se, så er der flere variabler i koden, som gør at du kan tilpasse dit iframe præcist til din egen webside.
Du skal naturligvis først og fremmest rette linket fra min URL til din egen indholdsside.
Du kan angive både bredden og højden på dit iframe, og du kan valgfrit gøre det enten i procent eller i pixel.
Om der skal være scrolling på siden kan du angive med variablerne: yes, no, auto. At der her er valgt auto, er naturligt da formålet jo var at få et scrollbart iframe.

I koden indgår endvidere en advarsel hvis din browser ikke kan vise iframes, - og det er da en ganske praktisk foranstaltning at have med.

Som en sidste hjælp får du lige linkene til mine tre testsider een gang til. Skulle der være noget du er i tvivl om, så vil der være en hel del hjælp at hente ved at højreklikke på disse sider, - så vil du kunne se i kildekoden hvorledes jeg har lavet det:

Se websiden uden iframe på dette link: [KLIK HER]

Se websiden med iframe på dette link: [KLIK HER]

Se websiden med sideindholdet på dette link: [KLIK HER]

Textarea - Lodret scroll i en tekstboks

En textarea-boks er ret simpel at lave, - den er til gengæld heller ikke meget bevendt, - så det er ikke en feature jeg vil ofre meget tid på at skrive om.

Ulempen ved en tekstboks er at den så absolut kun kan bruges til simpel tekst, hvor man hverken kan vælge fontstørrelse eller farve eller noget som helst andet, - så har man lyst til at gøre en lille smule ud af sit design, så er man nødt til at lave et CSS Stylesheet til sin tekstboks, og så er det jo ikke helt så enkelt mere.

Jeg har lavet nogle forskellige eksempler på textarea-bokse. Hvis du kan bruge nogen af dem kan du jo bare "fiske" dem ud af kildekoden. Du kan se boksene på dette link: [KLIK HER]

Tekstboks med lodret scrollbar

Thomas Janum fra ITup har lavet en ret genial løsning til mig som du kan se herunder: [LINK TIL IT-UP - KLIK HER]

Denne fremragende løsning er lavet af Thomas Janum, som er webmaster på IT-Forummet ITup:
http://www.janum.net/itsvar/index.php?mainID=300

I modsætning til textareaboksen, så kan du i denne boks formatere og style din tekst på præcis samme måde som du gør i et almindeligt HTML-dokument.

Scroll ned i boksen og se hvad Thomas selv skriver om metoden:

"I denne boks er der scroll, selvom det ikke er lavet som en IFrame.

Jeg har brugt den style, der hedder 'overflow' på et div-tag, men det kan faktisk også gøres på celler i tabeller og paragraffer.

Tag selv et kig i HTML-koden. Det er ret simpelt."