Tips&Tricks

til hjemmesiden, computeren og internettet

Tips & Tricks



Rullepaneler omkring teksten på hjemmesiden

Sat på siden 23-09-2003

Kirsten skrev til mig:
"Jeg vil så gerne i min hjemmeside have en boks med scroll-pile til tekst, men kan ikke fremstille en sådan.
Kunne du ikke i et ugebrev fortælle hvordan?"

Sjov nok havde jeg fem-ti minutter forinden overvejet, om det var en idé at skrive noget om det i ugebrevet. Hermed var sagen afgjort.

I stedet for at have en laaang tekst, der giver en lige så laaang hjemmeside, kan du sætte teksten ind i et felt, som gæsten kan bladre i ved hjælp af rulle paneler.

Du kan se et eksempel på http://www.tips-og-tricks.com/eksempler/scroll.html Dette laves meget let ved hjælp af stylesheets. Du kan enten have stylesheetet i en særskilt fil, hvis du vil bruge effekten på flere hjemmesider, eller sætte det ind imellem koderne på hjemmesiden.

Et Stylesheet kan laves ved hjælp af Notesblok eller fx programmet TopStyle Lite, der er gratis. Du finder version 3 på http://www.bradsoft.com/download/dloadhandler.asp?file=ts3lite.exe

Enten i et nyt eller et eksisterende stylesheet skal du indsætte følgende kode:

.scroll{
width: 300px;
height: 200px;
overflow: auto;
}

Jeg har kaldt "classen" for "scroll", men du kan kalde den hvad som helst, som fortæller dig noget om, hvad den laver.

Width er bredden på tekstfeltet. Prøv dig frem og se, hvilken bredde du ønsker dig. På samme måde med højden, som findes i feltet "height".

Overflow fortæller, hvad der skal ske med teksten, hvis der er for meget af den til, at det kan være i feltet. Du kan bl.a. vælge imellem at få rullepaneler på altid (scroll) eller kun når der er behov for det (auto).

Hvis du vil have, at tekstboksen skal have en anden baggrundsfarve end resten af dokumentet, kan du tilføje det til classen "scroll" sådan her:

.scroll{
height: 200px;
width: 300px;
overflow: auto;
background-color: Gray;
}

I stedet for "Gray" kan du naturligvis skrive en anden farve eller angive dens HTML-værdi, fx #FF00FF

Når du nu vil anbringe rullepanelerne rundt om teksten i selve HTML-dokumentet, skal du i stedet for bare at bruge

-tags tilføje classen sådan her:

<p class="scroll">Her kommer en meget lang tekst, som bliver pakket ind i rullepaneler i stedet for at fylde flere meter hjemmeside. Skriv hele din tekst her.</p>

Du kan bruge samme teknik til store billeder, som folk kun skal se en lille del af. Du kan indsætte classen i <p>-tags, eller fx <div>-tags sådan:

<div class="scroll"><img src="billede.jpg" height="1000" width="1000" alt="Slottet i Amboise" border="0"></div>

Udskift "billede.jpg" med navnet på dit billede, fx "kort-over-odense.gif" og brug billedets rigtige højde og bredde. De fleste programmer til at lave hjemmesider med vil selv finde disse værdier. Husk at skrive en forklaring på, hvad billedet forestiller i alt-taggen.

Nu mangler du bare at få kædet dokumentet sammen med stylesheeten, og det gør du fx ved at indsætte følgende kode i <head> på dokumentet:

<link rel="stylesheet" type="text/css" href="http://stien/til/din/stylesheet.css">

Hvis du gerne vil have, at folk skal kunne printe din hjemmeside ud, kan du lave endnu et stylesheet, som du kalder print.css.

I det skal der blot være dette:

.scroll{
width: 100%;
overflow: visible;
}

Indsæt det i dokumentet sådan her:

<link href="print.css" rel="stylesheet" type="text/css" media="print">

Prøv at vælge Filer -> Vis udskrift, når du står på siden med eksemplet, så kan du se, hvordan det virker.

http://www.tips-og-tricks.com/eksempler/scroll.html

Kunne du lide tippet? Abonner gratis på mine nyhedsmails og få friske tips hver uge: Tilmelding til Tips og tricks
Lige nu: Få e-bogen "701 Tips og Tricks" gratis (normalpris $11,83) ved tilmelding.


|