Scroll med <div>

Først lidt om 'div' og 'style'...

<div> gør ikke noget i sig selv, men du kan definere style, og dermed bruge det til at lave et specielt design for det, der står inden for <div> </div>
Se evt. turtorial på html.dk: Lektion 8: Elementer til gruppering (span og div)

Du kan definere højden på div, enten i stylesheet eller således:
<div style="height:100px">
Hvis du ikke definerer højden kan du komme ud for, at tingene på din side, kommer til at stå oveni hinanden - set i visse browsere!
<div> benyttes altså i forbindelse med at definere en bestemt 'style' for en gruppe/afsnit.

Eksempel:
Vil du f.eks. lave fed tekst på et stykke tekst, kan du gøre det således:

<div style="height:100px; font-weight:bold">
<p>Her kommer så den fede tekst</p>
</div>

Til dette eksempel er det måske bedre at bruge 'span' i stedet for 'div',
eller også <p style="font-weight:bold">
(Du behøver ikke at definere højden på span.)

Eksemplet viser dog, hvordan du kan designe udseendet på indholdet i 'div'
ved at definere 'style'.

Her er et så andet eksempel
Det kan være at du gerne vil give et afsnit med tekst en baggrundsfarve.
Det kan f.eks. se således ud:

<div style="width: 450px; height:80px; background:#ffffcc">
<p>Her kommer så din tekst</p>
</div>

Der er flere måder at definere style på.
Den ene har jeg allerede vist. Den gik ud på at definere style direkte i 'div'.

En anden måde er at definere style for hele siden.
Dette kan du indsætte i <head> </head>

Her giver du 'div' et navn, som du så kan kalde på siden med 'class'

Her kalder jeg en bestemt div for 'scroll', men det er frit hvilket navn du bruger.

<style type="text/css">

div.scroll
{ width: 400px; height:80px; background:#ffffcc; overflow:auto; border:1px solid #cccccc; padding:8px;}

</style>

Dette er stylesheet metoden, og her vil jeg anbefale at du laver et seperat stylesheet til dette, hvis du vil benytte den samme 'tekst-boks' på flere sider.

Bemærk nu overflow:auto;

Det er dette, der laver scroll i din tekst-boks.
Bemærk også at der nu er sat border på tekst-boksen

Når du har defineret dette style, kan du nemt indsætte tekst-boksen med 'class' således:

<div class="scroll">
<p> Her står din tekst og du kan også indsætte billeder.<br /><br />
<img alt="" src="../fun-stuf/elefant.jpg" height="166" width="239" />
</p>
</div>

Det kommer til at se således ud:

Her står din tekst og du kan også indsætte billeder.

Helt enkelt
kan eksemplet lige her ovenover også laves med den første 'style' metode, som jeg beskrev.

Således:

<div style="width: 400px; height:80px; background:#ffffcc; overflow:auto; margin-left:40px; border:1px solid #cccccc; padding:8px;">

<p style="padding:8px">
Her står din tekst og du kan også indsætte billeder.<br /><br />
<img alt="" src="../fun-stuf/elefant.jpg" height="166" width="239" border="0" /><br />
</p>

</div>

Scrollbaren laves altså med 'div' og overflow

I eksemplet er det sat til 'auto' og det virker - hvis der er brug for det - både horisontalt og vertikalt.

Links:

CSS tutorial på HTML.dk

Definition af overflow:auto på Hjemmesideskolen.dk

Centrering vandret og lodret på Webdesign 101

Scroll area with overflow in CSS på www.domedia.org

overflow Attribute | overflow Property på msdn.microsoft.com

Egenskaben 'clear' på www.webtip.dk
Nyttig egenskab, når du skal placere bokse og andre ting med 'div'.

Se evt. også:
Min side om CSS (cascading stylesheet)
Her er blandt andet links til sider der beskriver, hvordan du lægger farver på scrollbar.