 |
Boxar |
Obs!
Alla exempel öppnas i ett nytt fönster!
1. Inledning
Den här sidan berättar om hur man styr alla de boxar som förekommer i ett HTML-dokument. Genom att lära sig förstå vad en box är och hur boxar påverkar varandra, kan man få större insikt i hur HTML och andra markeringsspråk fungerar.
Jag har framförallt hämtat informationen från CSS2-specifikationens åttonde kapitel. Nästa sida kommer också att fördjupa det jag skriver i denna introduktion till boxar.
2. Vad är en box?
En box kan t.ex vara ett en tabell eller tabellcell. För att göra det här resonemanget så enkelt som möjligt, utgår jag fortsättningsvis ifrån en tabellcell.
Bilden här bredvid visar hur boxmodellen för tabellcellen ser ut. I den fortsätta texten kommer jag ofta att använda de engelska ord du ser i bilden. Anledningen till det är att jag på det viset undviker missförstånd. Dessutom är de svenska översättningarna alltid mindre precisa, vilket jag ogillar.
En box består av en content area (innehåll), padding (stoppning), border (ramar) och utanför den margins eller marginaler (som är ett lika bra svenskt ord).
Avståndet mellan texten, bilden, eller det innehåll (content) man lagt in i tabellcellen, och ramen runt tabellcellen, kallas för padding. Utanför paddingen hittar man först en border eller tabellram, samt utanför den en marginal.
Egentligen skall marginalerna endast finnas utanför hela tabellen, men aldrig inne i den. Det kan man bl.a läsa om i HTML 4.0-specifikationen, i kapitel 11.3.3.
Dessvärre tolkar emellertid vissa av webbläsarna boxmodellen lite olika och lägger in en marginal för tabellcellerna. Då räcker det inte med att bara skriva:
<TABLE cellspacing="0" cellpadding="0" border="0">
För att ta bort mellanrummet mellan t.ex bilder som skall ligga tätt ihop. Bilderna får då nämligen ett litet avstånd mellan sig. Man måste därför lägga till några attribut, som egentligen inte borde behövts och resultatet blir t.ex detta:
<TABLE cellspacing="0" cellpadding="0" border="0" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
Något av detta skrev jag om på min sida om tabeller >>
I stylesheets kan man på ett enklare sätt ställa in värdena för de olika delarna av en box, för var och en av kanterna på boxen. Man kan dessutom ställa in färger, mönster och lite till. Det skall vi titta på så småningom.
Om ett värde sätts till noll, t.ex för en border, kommer den inte att ta någon plats. Men det betyder inte att den inte längre finns. För webbläsaren existerar den fortfarande, även om den inte visas på skärmen. Därför bör man ha schemat ovanför ganska klart för sig innan man på allvar börjar arbeta med boxar.
3. När används boxar?
Ett enkelt svar på frågan i rubriken är att boxar alltid används! Så gott som alla element i HTML skapar boxar, t.ex när man bestämmer värden för tabeller och tabellceller, för listor, för hela dokument, för enskilda dokument, länkar, osv.
Här är ett exempel på hur en sådan bestämning kan se ut:
H1.special {
background: #FFFF99;
padding: 10px;
margin: 40px;
color: #00FF00;
border-style: solid;
border-width: 3px;
border-color: #FF0000;
}
Rubriken hämtas in i dokumentet som vanligt:
<H1 class="special"> Här kommer rubriken </H1>
Titta på exemplet i praktiken >>
4. Margin
Vi skall nu titta lite närmare på vilka möjligheter som finns i CSS2. Margin är en egenskap som används för att bestämma marginalernas bredd. Man kan skriva kommandot pålige olika sätt:
margin-top
Styr den övre marginalen.
margin-right
Styr den högra marginalen.
margin-bottom
Styr den undre marginalen.
margin-left
Styr den vänstra marginalen.
margin
Styr alla fyra marginalerna på samma gång, med samma värde.
Man får som vanligt använda i stort sett vilka värden man vill. Enheterna är också de vanliga:
px - pixlar
pt - punkter (=typografiskt mått)
em - fyrkant (=typografiskt mått)
mm - millimeter
cm - centimeter
in - tum
pc - pica (=typografiskt mått)
Man kan också använda procent för relativa värden:
H1 { margin: 10px }
H1.special { margin: 120% } /* alltså 12 pixlar */
Vad händer om två boxar hamnar bredvid varandra? Slås då marginalerna ihop eller behåller de sina respektive storlekar? I CSS2-specifikationens kapitel 8.3.1 beskrivs fenomenet med orden marginaler som kollapsar (collapsing margins).
Där kan man läsa att marginalerna bara kollapsar om boxarna ligger bredvid varandra (=vertikala marginaler), men aldrig kollapsar om de ligger ovanför varandra (=horisontella marginaler).
Kollapsen består i att marginalerna tar ut varandra. Har två boxar som ligger bredvid varandra var sin 10 pixlar bred marginal, blir den totala marginalen mellan dem också 10 pixlar. Ligger de däremot över och under varandra, blir marginalen 20 pixlar.
Det finns självklart alltid några undantag och det är t.ex om boxarna ligger positionerade, något jag återkommer till på senare sidor.
5. Padding
Inställningarna för paddingen, t.ex avståndet mellan texten inne i en tabellcell och tabellcellens kant eller ram, görs på exakt samma sätt och med samma värden som för marginalerna:
padding-top
padding-right
padding-bottom
padding-left
padding
6. Border
Ramarna går också att styra och man kan göra en rad olika inställningar. Dessa känner du igen från avsnitten ovan:
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
Värdena är dock något annorlunda än för marginalerna och paddingen: thin, medium, thick eller ett siffervärde, som man lämpligen anger i antalet pixlar.
Förutom bredden på ramen kan man även ange färgen och stilen:
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
Dessa fungerar likadant som för border-width. Värdena är de vanliga färgvärdena, dvs antingen en färgkod med hexadecimaler eller ett nyckelord: #FF0000 eller red.
border-top-style
border-right-style
border-bottom-style
border-left-style
border-style
Även dessa har samma syntax som de tidigare, men värdena skiljer sig något åt. Här följer en lista på de olika alternativen:
none - ingen
hidden - syns ej
dotted - ramen består av punkter
dashed - ramen består av en streckad linje
solid - enfärgad
double - dubbel, enfärgad linje
groove - nersänkt
inset - variant av nersänkt
ridge - upphöjd
outset - variant av upphöjd
Det finns möjligheter att kombinera de olika värdena:
border-style: solid dashed
skapar en enfärgad övre och undre linje och en streckad vänster- och högerram.
Nedan har jag skrivit ner ett exempel på en väldigt exakt styrning. Normalt har man dock inte så specifika krav utan väljer förmodligen en enklare layout:
H1.ram {
background: #FFFF99;
padding: 10px;
margin: 40px;
color: #00FF00;
border-top-width: thin;
border-right-width: 20px;
border-bottom-width: thick;
border-left-width: 10px;
border-top-color: #FFFF00;
border-right-color: #FF0000;
border-bottom-color: #00FF00;
border-left-color: #0000FF;
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style;
border-left-style: double;
border-style: groove;
}