Inledning

Ett block är ett rektangulärt område på webbsidan som definieras så här:

Ett block kan tilldelas en mängd egenskaper som t.ex. marginal, bakgrundsfärg, bakgrundsbild, kantlinjer, padding. Det vanligaste är att egenskaperna anges i en egen klass som man sedan anropar från aktuell tagg i html-koden på sidan.

Boxar

Det går utmärkt att använda taggen <div> för att skapa ett block. Blocket brukar då kallas för Box och kan användas till att skapa områden och kolumner för att strukturera t.ex. text eller presentera sidans layout.

I en sådan box kan man sedan placera vilket innehåll som helst: text, bilder, listor, menyer och icke att förglömma - andra boxar och block. En box som används för layout och innehåller andra boxar och block brukar kallas: Container.

Storlek

Observera att storleken på block och boxar blir:

Höjden och Bredden + ev. Padding och ev. Kantlinje.

En kvadratiskt box som är 100 pixlar med padding 10 pixlar och kantlinje runtom på 2 pixlar kommer alltså att mäta 124 pixlar både på höjden och bredden...

Block och Boxar

Block och Boxar kan också placeras i förhållande till varandra - även bakom och framför. Mer om placering med CSS på sidan: CSS-Placering.

 Till Toppen 

Formatera ett Block

Med CSS kan man ge ett område på HTML-sidan speciella egenskaper. Man kan då använda redan existerande HTML-taggar som selectorer och ge dem olika egenskaper som deklareras i Stlmallen.

Det här kan vara användbart till exempel när man vill påverka hur ett texstycke presenteras.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Texten ovan är skriven mellan p-taggar och genom att en klass skrivs in i stilmallen och sedan anropas från HTML-dokumentet kan man ge textstycket speciella egenskaper.

Så här skriver man in klassen i stilmallen:

.textblock {
width: 100%;
margin-left: 30px;
padding: 10px 0 10px 0;
border: 1px solid #000000;
}

Anropa sedan klassen från HTML-koden:

<p class="textblock">Lorem ipsum dolor...</p>
 Till Toppen 

Boxar

En enkel box

Det enklaste är att göra en box som innehåller lite text. Boxen nedan är 270 pixlar bred och 250 pixlar hög. Den har bakgrundsfärg och en kant.

Texten i boxen nedan är skriven mellan p-taggar och kommer att hålla sig inom det angivna området genom att klassen med boxen anropas från HTML-sidan.

Men om du skriver in för mycket text kommer texten att "flöda över" kanten nedåt.

Om man vill bestämma höjden på boxen kan det därför vara bra att alltid ange: overflow: auto i boxens stilmall för säkerhets skull...

Läs mer om det längre ner!

OBS!
I Internet Explorer kommer boxar felaktigt att anpassas på höjden efter innehållet - och man kommer inte att upptäcka att texten i själva verket hamnar utanför! Därför är det viktigt att kolla sin sida i fler än en webbläsare! Mozilla Firefox är ett bra alternativ!

Så här ser boxen ut:

Texten är skriven mellan p-taggar och kommer att hålla sig inom den här boxen.

Men om du skriver in för mycket text - så att den inte får plats inom det angivna området - kommer texten att "flöda över" kanten nedåt.

Därför kan det vara bra att alltid ange: "overflow: auto" i stilmallen för säkerhets skull...

Men i Internet Explorer kommer boxar felaktigt att anpassa höjden efter innehållet!

Så här skriver man in klassen i stilmallen:

.box1 {
width: 270px;
height: 250px;
background-color: #E6E6FA;
padding: 5px;
border: 4px solid #014D73;
}

Anropa sedan klassen från HTML-koden:

<div class="box1">
<p>Texten är skriven...</p>
</div>

Box med fler egenskaper

Boxen nedan innehåller en bild, formaterad text och har också fått en bakgrundsbild.



Bilden till vänster föreställer bakdelen på en gris. Vissa äter såna till Jul. Då kallas det för skinka. Grisens svans heter knorr. Den går också att äta...


Så här ser det ut i stilmallen:

.box2
{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 10px;
background-image: url(bakgrund.gif);
height: 100px;
width: 290px;
padding: 3px;
border: 8px ridge #FFB6C1;
}

Sökvägen till bakgrundsbilden ovan förutsätter att bilden ligger i samma mapp som sidan. Gör den inte det måste du ange HELA sökvägen.

Till exempel: background-image: url(mapp/bakgrund.gif)



Klassen anropas sedan från HTML-koden:

<div class="box2">
:: Boxens innehåll ::
</div>

 Till Toppen 

Felsökning - Boxar

När du börjar använda boxar kommer du antagligen att så småningom lägga märke till att det i vanlig ordning kan se lite olika ut i olika webläsare...

Internet Explorer visar i vissa fall kantlinjer och padding INOM bredden och höjden för block och boxar.

Det är inte korrekt! Kantlinjer och padding ska läggas till UTANFÖR det värde man angivit i "height" och "width".

Alltså kan det uppstå problem med att boxen får olika bredd och höjd i olika webläsare.

För att undvika det kan man gå till väga på olika sätt. Det Exempel 1 nedan är det enklaste och det som är korrekt. Exempel 2 är lite mer omständigt - men kan vara att föredra om man vill att äldre webbläsare ska visa boxarna på samma sätt.

Exempel 1

Använd en korrekt DOCTYPE! Till exempel den här:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Det löser det hela!
Nu kommer det att funka på samma sätt i alla moderna webläsare!


MEN! Om du vill anpassa din sida till äldre webläsare eller av någon anledning vill undvika en korrekt doctype kan du använda metoden i Exempel 2.


Exempel 2

Den här metoden går ut på att man infogar "nästlade" boxar. Naturligtvis fungerar den även om man har en korrekt doctype på sidan!

Så här kan det se ut i stilmallen:

.box { width: 270px; }
.box div { padding: 5px; border: 4px solid #990000; }

Och så här på sidan:

<div class="box"><div> Boxens innehåll </div></div>

Boxen blir så bred som du angett i "width". Både padding och border visas INOM bredden på boxen oavsett webläsare och doctype! Höjden anpassas efter innehållet.

Så här kan det se ut i stilmallen om du vill ange både höjd och bredd:

.box { width: 270px; height: 250px; overflow: auto; }
.box div { padding: 5px;}

Koden på HTML-sidan är densamma som ovan. Paddingen visas INOM bredden och höjden på boxen oavsett webläsare och doctype!

Om du vill ange ungefärlig höjd på en box med kant kan stilmallen se ut så här:

.box { width: 270px; }

.box div {
padding: 5px;
height: 250px;
border: 4px solid #990000;
overflow: auto; }

Koden på HTML-sidan är densamma som ovan. Paddingen visas INOM bredden och höjden på boxen oavsett webläsare och doctype! Höjden kommer att variera i olika webläsare eftersom den ibland visas med padding och border utanför höjden.

Om du vill ange exakt höjd på en box med kant kan stilmallen se ut så här:

.ytterbox { width: 270px; }
.borderbox { border: 4px solid #990000; }
.box { height: 250px; overflow: auto; }
.box div { padding: 5px; }

Och så här på sidan:

<div class="ytterbox">
<div class="borderbox">
<div class="box"><div> Boxens innehåll </div></div>
</div>
</div>

Både padding och border visas INOM bredden på boxen oavsett webläsare och doctype! Höjden blir height + border.

Att man måste ha fler boxar här än i de tidigare exemplen beror på att ev. bläddringslist annars skulle hamna utanför kantlinjen... Inte så snyggt!

Vill du byta färg på bläddringslisten infogas den koden i samma klass som egenskapen "overflow". Mer om hur det fungerar längre ner!

Läs mer om olika Doctyper här:   HTML / Doctype & Validering

 Till Toppen 

Scrollbox - Box med Bläddringslist, Rullningslist, Overflow

Genom att i stilmallen skriva in egenskapen overflow kan du styra vad som ska hända om innehållet inte får plats inom den angivna höjden och bredden på boxen. Genom att ange värdet till auto skapas en bläddringslist "vid behov".

Läs mer om egenskapen "overflow" på sidan: CSS / BODY - Grundstyling

Så här kan en s.k. Scrollbox se ut:

Bläddringslisten får automatiskt det utseende som är standard i webläsaren.

Så här ser det ut i stilmallen:

.box3
{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-weight: bold;
font-size: 12px;
height: 116px;
width: 300px;
padding: 3px;
border: 5px double #33CCCC;
overflow: auto
}

Och så här ser HTML-koden ut:

<div class="box3">
:: Boxens innehåll ::
</div>

Byt färg på bläddringslisten

Om man vill kan man förändra utseendet på bläddringslisten så att den passar bättre ihop med layouten på boxen.

Så här kanske?

"Livet är hårt!"



"Grymt!"

Ser du ingen skillnad? Har inte listen samma färg som kantlinjen? Då stöder din webläsare inte den här funktionen.

OBS!
Färgade bläddringslister syns bara för dem som surfar med de senare versionerna av Internet Explorer och är inte en teknik som är korrekt om man kodar efter strict standard.

Vill man använda tekniken i trots det - skrivs koden för bläddringslisten in i klassen tillsammans med de andra egenskaperna på samma sätt som när man byter bläddringslist på hela sidan.

Så här t.ex:

.box {
width: 300px; height: 116px; overflow: auto;
scrollbar-base-color: #E6E6FA;
}

Mer om om detta på sidan: CSS - Finesser

Det var allt om att byta färg på bläddringslister för denna gång...
Vill du veta mer så får du kolla in finesserna!
Hej då! Surfa lugnt!
 Till Toppen