Boxar

1. Boxar, inledning

Du definierar ett område eller en box på exempelvis 200 pixlar i bredd och 150 pixlar i höjd. I detta område kan du sedan lägga de flesta html-objekt och du kan lägga in bakgrundsfärg, bakgrundsbilder och göra andra formatteringar av texten. En box är med andra ord ett område med text, bilder eller annan information på ett begränsat område.

2. En första box

Vi gör en första box som är 200 pixlar bred och 150 pixlar hög. Den har alltså ett bestämt område som texten vi skriver inom exempelvis html-koden p kommer att hålla sig inom.

Du definierar ett område eller en box på exempelvis 200 pixlar i bredd och 150 pixlar i höjd. I detta område kan du sedan lägga de flesta html-objekt och...

<style type="text/css">
<!--
.box { background-color: #cccccc; height: 150px; width: 200px; padding: 4px; border: 2px solid #004080; }
-->
</style>

I html-koden skriver du sedan:
<p class="box">Du definierar...</p>

Med padding menas hur långt ifrån/hur nära texten får komma kanten av boxen.

3. En box med rullningslist

Varför inte lägga till en rullningslist till boxen också?

Du definierar ett område eller en box på exempelvis 200 pixlar i bredd och 150 pixlar i höjd. I detta område kan du sedan lägga de flesta html-objekt och du kan lägga in bakgrundsfärg, bakgrundsbilder och göra andra formatteringar av texten. En box är med andra ord ett område med text, bilder eller annan information på ett begränsat område.

<style type="text/css">
<!--
.box2 { height: 70px; width: 200px; padding: 4 px; background-color: #cccccc; border: 1px solid #000000; overflow: auto; }
-->
</style>

Och i html-koden ser det ut så här:
<p class="box2">Du definierar...</p>

Jag minskade höjden till 70 pixlar, så att all text inte fick plats inom boxen. Sedan angav jag också overflow: auto och så skapades en rullningslist.