Vad är overflow?

1. Inledning

Den som försöker styra sina sidor med stilmallar gör kanske som jag, testar sig fram och försöker kolla hur andra har gjort. Förr eller senare träffar man då på kommandot overflow.

Här berättar jag lite om vad det är, hur och när det används.

2. Vad CSS-specifikationen säger

I den CSS-specifikation som gäller då detta skrivs, CSS 2.1, står det om overflow att det är det som inträffar då innehållet i ett visst utrymme inte får plats:

"Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box."

Ett av de problem man stöter på då man arbetar med webbdesign är att innehållet ibland inte får plats i ett visst utrymme. Oftast handlar det om teckenstorleken som gör att texten inte får plats i ett fönster.

Med stilmallskod kan man då berätta för webbläsaren hur den skall hantera situationen: antingen ta bort innehållet som "svämmar över" eller låta det flyta på bestämda sätt.

På min sida Bredd, höjd och justering av boxar skrev jag om detta, men insåg kanske inte riktigt den praktiska nyttan. Men när jag nu lärt mig mer så har det framgått att man framförallt använder detta kommando för att styra rullningslisterna då man använder frames.

Innan jag visar hur det fungerar så vill jag repetera de värden som är möjliga:

visible
Säger att innehållet inte skall beskäras utan tillåtas att flyta utanför en tabells (etc) kanter.

hidden
Innebär att innehållet beskärs så att det som flyter utanför t.ex en tabellcell inte visas.

scroll
Betyder att webbläsaren skall skapa en rullningslist så att besökaren kan bläddra (scrolla) fram den text (etc) som inte syns.

auto
Överlåter åt webbläsaren att avgöra vad som är bäst, t.ex att dölja eller skapa scrollmöjligheter.

3. Hur använder man overflow?

Man använder alltså overflow framförallt då man har en site med frames. Man kan då stänga av rullningslisterna för att undvika att de dyker upp och förstör den fina layouten man har gjort.

På min sajt använder jag idag (maj 2005) en lösning där vänstermenyn ligger i en frame (eller ram som en del säger), i mitten finns en frame och till höger en tredje.

Sidorna borde få plats för alla som kan visa 1024x768 pixlars bildskärmsupplösning, men i många webbläsare, t.ex varianter av Internet Explorer, dyker de ändå upp.

För att då inte förstöra layouten har jag valt följande lösningar. För menyn har jag valt att inte stänga av rullningslisterna. I stället har jag valt at begränsa sidans bredd, vilket har ungefär samma effekt:

body {
font-family: Verdana, Trebuchet, Geneva, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
font-size: 90%;
margin-top: 2px;
margin-left: 2px;
margin-bottom: 0px;
margin-right: 0px;
border-top: 0px;
border-left: 0px;
width: 80%;
border-bottom: 0px;
border-right: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
overflow: auto;
}

Fördelen med denna lösning är att rullningslisterna dyker upp om de skulle behövas. Men alla som har en normalgod kapacitet på sina bildskärmar slipper se rullningslisterna.

Annonssidan tycker jag däremot inte skall ha några rullningslister, eftersom det både ser fult ut och förvirrar en del besökare. Rullningslisten för sidorna i mitten ligger ju nämligen näst längst till höger, vilket inte alla upptäcker. Därför ser stilmallen för annonssidan ut så här:

body {
font-family: Verdana, Trebuchet, Geneva, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
text: #333333;
font-size: 90%;
margin-top: 2px;
margin-left: 2px;
margin-bottom: 0px;
margin-right: 0px;
border-top: 0px;
border-left: 0px;
border-bottom: 0px;
border-right: 0px;
width: 100%;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
overflow: hidden;
}

Rullningslisterna döljs med hjälp av overflow: hidden. Det fungerar i alla fall i de webbläsare som klarar av att tolka stilmallskod.

Nedan ser du hur det ser ut i praktiken i min webbläsare som heter Safari 2.0:

Här dyker rullningslisten upp tack vare kommandot overflow: auto. Förstoras fönstret så försvinner också rullningslisten. Att besökaren kan hitta allt innehåll är naturligtvis viktigt så rullningslisten måste trots allt finnas kvar.

Eftersom annonserna visas slumpmässigt på sidan och uppdateras med jämna mellanrum så är det inte lika viktigt att ha en rullningslist. Man behöver alltså inte se alla annonser på sidan.

Genom att rullningslisten förvinner underlättar jag också för besökare som vill hitta innehållet på sidan. Här ser man enkelt var man kan rulla neråt.

Obs!
När man använder overflow ihop med begränsningen av bredden med width, så finns det vissa webbläsarvarianter som skapar en extra rullningslist!

Bilden till höger visar hur det ser ut.

Sidan fungerar fortfarande helt normalt, men utseendet har alltså blivit lite skamfilat.

För att undvika detta kan man då pröva att ta bort width-inställningen helt.

Tyvärr innebär det då i sin tur att sidan kanske inte ser hundraprocentig ut i andra webbläsare...