Bredd, höjd och justering av boxar

Obs!
Alla exempel öppnas i ett nytt fönster!

1. Inledning

I specifikationens tionde och elfte kapitel beskrivs med ytterst stor noggrannhet hur de olika boxarnas storlek beräknas, beroende på hur de placerats och ärver varandra.

Jag kommer inte att gå igenom dessa kapitel särskilt noga, eftersom mycket av det som sägs inte är särskilt användbart. Normalt ser man ju nämligen resultatet på skärmen och kan göra ändringar utifrån det.

Däremot tänker jag säga lite om hur man storleksbestämmer och justerar olika boxar.

2. Bredden på boxen

Bredden på en box bestäms med egenskapen width, som kan ha några olika värden:

TABLE { width: auto }
TABLE#logo { width: 125px }
TABLE.sidfot { width: 75% }

Man kan bestämma bredden på i stort alla element, utom vissa inline-element, som B, SPAN, U, vars bredd bestäms av dess innehåll, alltså hur många tecken man skriver in i dem.

Man kan inte heller bestämma bredden på tabellrader eller grupper av sådana rader. Detta gäller åtminstone i teorin. I praktiken kan man fuska med transparenta bilder och liknande. Men det kan ändå vara svårt att bestämma bredden på formulär, knappar, stycken och liknande. Det framgår när man sitter framför datorn och försöker få det så som man vill.

Vill man ändå göra alla inställningar i stilmallen, måste man också självklart tänka på hur breda marginaler, padding, etc, som man använder för boxen. Läs kapitel 10 i specifikationen noggrant om du vill kunna räkna ut detta matematiskt med en formel, eller testa själv och pröva att se hur det faktiskt ser ut i webbläsaren!

Det finns ytterligare en sak att säga om bredd och det är att stilmallen gör det möjligt att bestämma max- och minvärden, t.ex:

BODY { width: 100%; max-width: 600; min-width: 400 }

Det fungerar dock inte på tabeller och jag har i ärlighetens namn aldrig prövat på att använda det.

Titta på hur det ser ut i praktiken! >>

3. Höjdinställningar

Samma sak som för bredden gäller för höjden: ställ in alla värden direkt i HTML-koden i stället. Ja, om man nu måste ställa in höjden över huvudtaget. Höjdvärdena brukar nämligen leva sina egna liv och kan vara svårt att få helt rätt i de olika webbläsarna. Här är ändå ett exempel:

BODY { height: 100%; max-height: 600px; min-height: 400px }

4. Radavståndet i boxen

Förutom att man kan bestämma bredden och höjden på en box, vill man ibland även styra höjden på varje rad. I specifikationens kapitel 10.8, beskrivs detta m.h.a termen leading, som på svenska översätts med "radavstånd".

Radavståndet beräknas på teckenstorleken och beskrivs närmare på en kommande sida. Man använder egenskapen line-height för att styra radavståndet. Här är några exempel:

P { font-size: 12pt; line-height: normal }
DIV { font-size: 12pt; line-height: 16pt }

Här blir resultatet ett större radavstånd i DIV, något man kanske vill ha för att skapa en viss effekt. Kommandot kan självklart kombineras med inställningar för teckensnitt, teckenstorlek, bakgrundsfärg och liknande.

Titta på hur det ser ut i praktiken! >>

H4 { line-height: 90% }

Denna inställning ger ett något mindre radavstånd, vilket ofta passar bra för mellanrubriker.

Titta på hur det ser ut i praktiken! >>

SPAN {
display: inline;
font-size: 125%;
line-height: 85%;
}

Denna inställning skapar en anfang eller kan användas för rubriker.

Titta på hur det ser ut i praktiken! >>

5. Justering av innehållet i en inbäddad box

På förra sidan visade jag hur man kan placera boxar. Nu skall jag visa hur boxar kan justeras i förhållande till varandra. I HTML gör man det någorlunda med attributen align och valign.

Det jag nu skall visa är hur man justerar boxar i en inline-box i förhållande till "föräldern" (parent). Det kan t.ex vara att placera en upphöjd eller nersänkt text i förhållande till texten på en rad. Här är ett första exempel:

SUB { vertical-align: sub }

Egenskapen vertical-align har ett antal olika värden. För att begripa sig på dem bör man först ha klart för sig hur boxar fungerar i sådana här fall.

Här har jag kallat boxarna X och Y. Det är alltså X-boxen, t.ex SUP, som skall justeras i förhållande till Y-boxen, t.ex SPAN, eller till de olika raderna i block-boxen. Det vi vill göra är att styra var X och andra inline-element hamnar i förhållande till den normala texten.

Värdena är dessa:

top
X hamnar längs den övre kanten på Y

bottom
X hamnar längs den nedre kanten, dvs längs baslinjen

middle
X blir vertikalt centrerad i förhållande till Y

baseline
X baslinje hamnar på samma höjd som Ys baslinje

sub
X hamnar där webbläsaren anser det lämpligt för nedsänkt text, s.k "subscript"

super
X hamnar där webbläsaren anser det lämpligt för upphöjd text, s.k "superscript"

text-top
X-boxen (snarare än texten i X) justeras längs textens i Y övre kant.

text-bottom
X-boxen (snarare än texten i X) justeras längs textens i Y baslinje.

Dessutom kan man placera X i förhållande till Y, där värdet noll är detsamma som textens i Y baslinje.

Men den här typen av inställningar behöver man ju normalt inte göra, eftersom webbläsarna hanterar justeringen på ett godtagbart sätt.

6. Overflow och clipping

Termen "overflow" går att översätta med "översvämning". På motsvarande sätt går "clipping" att översätta med "beskärning" eller "begränsning". Båda kan användas för att styra hur innehållet i en box skall visas, om boxen är för liten.

Det kan nämligen vara så att man gjort en box med en fast storlek. Om den text, bilder eller liknande, man sedan lägger in i boxen inte får plats, kan webbläsaren försöka åtgärda detta på ett oönskat sätt, med följd att layouten förstörs. I stilmallen kan man därför ställa in hur innehållet skall visas i sådana situationer.

Overflow

Denna egenskap styr vad webbläsaren skall göra med sådant innehåll som inte får plats i en box (=block). Värdena är:

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äsaen att avgöra vad som är bäst, t.ex att dölja eller skapa scrollmöjligheter.

I praktiken fungerar det ungefär så här. I stilmallen skriver man:

DIV { width: 100px; height: 100px }
BLOCKQUOTE { width: 125px; height: 150px }

I dokumentet anger man följande:

<DIV align="left">
<BLOCKQUOTE>Detta f&aring;r ej plats!</ BLOCKQUOTE>
</DIV>

Den gula ytan kommer alltså att behandlas olika beroende på vilket värde man ställt in.

Kolla på exemplen i praktiken. Här har jag skrivit in overflow i BLOCKQUOTE enligt följande:

• Ingen styrning alls >>
• Auto >>
• Visible >>
• Hidden >>
• Scroll >>

Det hela fungerar egentligen inte alls i vare sig Netscape eller Explorer, men man kan ändå få ett hum om att här finns skillnader, svårigheter och många timmars frustration bakom att få en stilmall att fungera så som det är tänkt!

Clipping

Jag är faktiskt lite osäker på hur man använder clipping. Jag tror att funktionen gör det möjligt att styra formen och storleken på det område som skall vara synligt i en box.

Clipping kan bara användas då man inte utnyttjar visible i overflow, eftersom beskärning inte får ske. Som default eller auto är området som skall visas lika stort som sitt HTML-element. I exemplet ovan skulle vi alltså kunna skriva så här, med samma resultat:

BLOCKQUOTE { width: 125px; height: 125px; clip: auto; }

Däremot ger följande inställning ett annat resultat, som bilden här bredvid visar:

BLOCKQUOTE { width: 125px; height: 125px; clip: rect(0px, 125px, 0px, opx); }

De fyra värdena anger top, right, bottom och left. Jag har inte testat detta tillräckligt för att säga hur och när det fungerar. Det är dessutom svårt att se den omedelbara användbarheten här. Ni kan ju titta själva på exemplen nedan:

• BLOCKQUOTE med clip: auto >>
• BLOCKQUOTE med clip: rect >>