Det finns ingen anledning att använda denna modell. Om man ska göra ändringar i formatmallen måste man ju göra det på varenda sida. Poängen med formatmallar är inte bara att kunna använda den kraftfulla formgivningen i CSS, utan också att underlätta redigeringen av formgivningen på hela webbplatsen. Det är bättre att använda externa formatmallar.

Extern formatmall

En extern formatmall är ett dokument skilt från html-dokumentet. Det är egentligen ett vanligt text-dokument, som har suffixet .css. Det länkas in i flera html-dokument, så man behöver bara göra ändringar på ett enda ställe, som sedan slår igenom över en hel webbplats.

Formatmallen länkas in inom head-märkena efter </title>:
<link rel="stylesheet" type="text/css" href="standardstil.css">

Man kan skriva in länken, eller låta Dreamweaver länka in den via CSS Styles > Attach Style Sheets.

Kaskaden

Ordet Cascading i Cascading Style Sheets syftar på att flera olika formatmallar kan användas på en och samma sida. Alla slår igenom i de avseenden de kompletterar varandra.

Om de krockar, så att två mallar har olika egenskaper för samma selektor, eller olika värden för samma egenskap, är det den senare i listan av formatmallar som tar över.

Om man dessutom har en intern formatmall dominerar den över inlänkade mallar vid krock.

Den första kaskaden är dock att den egna formatmallen kompletterar eller ersätter webbläsarens inbyggda formatmall. Den måste man ta hänsyn till när man skapar sin typografi. Ett exempel är att det inte räcker med att sätta "margin-bottom" till "0" för att ta bort blankraden mellan stycken, eftersom webbläsarens formatmall har ett mått för detta utrymme. Det måttet måste köras över med negativa värden för "margin-bottom".

Den ursprungliga tanken var att formgivarens format skulle kunna ersättas med, eller blandas med, mottagarens formatmallar, så att mottagaren styr över formgivningen. En sådan ersättning kan man ställa in i webbläsaren. Den tanken strider dock mot den grafiska formgivningens grundidé, att formgivningen anpassas till innehållet, vilket kräver grafisk kompetens för att ge innehållet rättvisa.

Utskriftsformat

CSS 2 har möjlighet att ge särskild formgivning för utskrift, handdatorer, ljud med mera.

I utskriftsmallen kan man ange samma format som man använder i organisationens grafiska profil, baserad på formatmallar i Word eller Quark/InDesign. De kan dock inte överföras automatiskt till en formatmall för webben.

I utskriften kan man formge allt som man kan formge för skärmvisning, typsnitt, stilsort, teckenstorlek, radavstånd, positioner, marginaler med mera. Man kan alltså ändra satsytans storlek och placera den annorlunda. Dessutom kan man göra objekt osynliga, om man kanske vill dölja navigeringslister. Med samma metod kan man använda olika sidhuvuden för skärmvisning och utskrift.

Särskild utskriftsmall

Vanligen brukar man rekommendera att skapa och länka in en särskild utskriftsmall om man genomgående har en annan formgivning för utskrift. Utskriftsmallen används automatiskt vid utskrift.

Denna formatmall måste innehålla alla selektorer som finns i dokumentet, inte bara de som är intressanta för utskriften. I annat fall få de ingen formgivning alls av formatmallen.

Inlänkningen av utskriftsmallen sker genom att man anger vilken mall som används för vilket medium t.ex.:
<link rel="stylesheet" type="text/css" href="style_print.css" media="print">
<link rel="stylesheet" type="text/css" href="style.css" media="screen">"

Båda media-typerna måste anges. Om man har angivit bara den ena av media-typerna, kommer det andra mediet att visas/skrivas ut utan formatmall.

Nackdelar men en särskild utskriftsmall är att den måste anges i dokumentet och att man måste komma ihåg att uppdatera den om nya regler införs i dokumentet och i mallen för skärmvisning. Utskriftsmallen måste innehålla alla egenskaper för regeln, eftersom det nu endast är denna mall som används.

En alternativ lösning är att ange media="all" för bildskärmsmallen. Därmed kommer den att användas även för utskrift i de delar utskriftsmallen saknar vissa regler. Lösningen är tveeggad: om du i utskriftsmallen utelämnat egenskaper som automatiskt är nollställda, t.ex. kantlinjer, men sådana deklarationer finns i bildskärmsmallen, kommer de med i utskriften, eftersom bildskärmsmallen med media="all" kompletterar utskriftsmallen.

En fördel är att olika utskriftsmallar kan kopplas till samma bildskärmsmall och att en utskriftsmall enkelt kan kopplas bort. En särskild utskriftsmall kan ge bättre stabilitet i större sammanhang genom att den konsekvent formges för alla egenskaper i utskriften.

Under arbetet med utskriftsmallen kan den granskas i webbläsarens funktion för förhandsgranskning, men också direkt i webbläsaren om den tillfälligt anges för mediet "screen".

Använda "@media print" i formatmallen

Alternativa formgivningar för utskrift kan anges som särfall i den vanliga formatmallen.

(Selektorn "@page" är en elegant metod som man använder i den vanliga formatmallen, men som dessvärre inte stöds av Explorer, däremot av Opera. Den avser endast sidformatet vid utskrift och ger möjlighet att direkt flytta ut delar utanför den utskrivna sidan, välja sidformat och sidorientering.)

I formatmallen anges utskriftsformat med selektorn "@media print". Antingen kan alla utskriftsregler samlas under denna selektor, eller den kan anges i anslutning till enskilda regler för skärmvisning. Därvid behöver egentligen bara avvikelserna från skärmvisningen anges. "@media print {p {font-size: 10pt; line-height: 13.5pt}}".

Fördelen med varianter i standardmallen är att man inte behöver ha en särskild utskriftsmall, att man direkt kan se vilka regler som har utskriftsalternativ om de grupperas samman och att man bara behöver ange skillnaderna i utskrift.

Om selektorn "@media print" inte anges kommer förstås formatmallens befintliga regler att användas.

Utskiftens utseende kan under arbetets gång kollas i webbläsarens funktion för förhandsgranskning av utskrift.

Vanligen brukar denna metod rekommenderas när utskriften avviker från skärmvisningen i enskilda fall.

Förstaradsindrag vid utskrift

Indrag på styckets första rad kan vara värdefull i en utskriftsmall i förening med att blankrad elimineras mellan stycken.

Förstaradsindrag på en fyrkants bredd görs med deklarationen {text-indent: 1em;}. Andra mått kan givetvis användas. Om <p> får denna egenskap blir alla stycken indragna. Första stycket kan man utforma som en variant utan indrag i form av en klass, som man måste applicera på alla förstastycken.

Automatiskt indrag på alla stycken märkta med <p> utom första stycket nås med selektorn "p + p {text-indent: 1em;}. OBS! fungerar bara med Opera.

OBS detta påverkar alla stycken med <p>, även t.ex. <p class="menytext">. För att lösa problemet får man antingen nolltställa klassen ".menytext" i fråga om radindrag, eller använda ett annat märke för klassen menytext, t.ex. <h3 class=" menytext"> eller ett neutralt märke som <DIV class=" menytext">. I båda fallen måste man se över radavstånd och marginaler.

Terminologi

En REGEL består av tre delar:

Selektorer, som är det märke som ges en utformning och som sätts in i dokumentet. Selektorer kan vara html-taggar t.ex. h1 och p, det kan vara utmärkning t.ex. strong, och det kan vara klasser, som du namnger själv, t.ex. .ingress. Klasser ska föregås av en punkt i formatmallen, men har ingen punkt före i märkningen av dokumentet. Flera selektorer som ska ha samma utformning kan grupperas tillsammans med komma emellan, t.ex. h1, h2, h3
Egenskaper är det element som ska formges, typsnitt, teckengrad, färg, marginal etc. , t.ex. font-family, font-size, color
Värden är utformningen av designelement, t.ex. Verdana, 13 pt, röd.

terminologi

Egenskap och värde kallas deklaration, och omsluts av klammerparenteser. Egenskap och värde skiljs med kolon, en grupp egenskap+värde avslutas med semikolon.

En regel har alltså en bestämd syntax: selektor {egenskap: värde; egenskap: värde; }, t.ex. h1 {font-family: Verdana; font-size: 13pt; color: red;}

Selektorer

Selektor är alltså den etikett som anges i formatmallen och som också måste återfinnas i html-dokumentet, för att dess deklaration ska aktiveras.

Typselektorer (html-taggar)

Detta avser de vanliga html-taggarna som H1–H6, p, table etc. Dokumentet märks upp med dessa taggar så långt det går. De formges i formatmallen, och slår direkt igenom, eftersom de redan finns i dokumentet. Om dokumentet visas utan din formatmall, blir det webbläsarens formatmall som används på dessa taggar, varvid dokumentets struktur ändå återges.

Attributselektorer, (klasser)

I övrigt skapar man egna selektorer med classes. De kan ha valfria namn, men bör givetvis göras korta och begripliga, t.ex. ingress, bildtext, faktaruta etc. Om dokumentet visas utan din formatmall visas dessa selektorer som vanlig text.

I dokumentet applicerar man en klass genom att kombinera den med en tagg, vanligen p: <p class="ingress">.

Principen är att klassens egenskaper dominerar över egenskaperna för p. Om alla egenskaper för p inte finns med i klassen, kommer p att slå igenom där – man säger att klassen ärver förälderns (det omgivnade blockets) egenskaper.

I Dreamweaver applicerar man enkelt en klass genom att markera det stycke som ska ha format och väljer formatet i CSS Style.

Släktselektorer med relationer

Kontextuella selektorer eller släkt-selektorer (descendent selectors) bygger på principen om släktrelationer mellan element, där varje element antingen är barn eller förälder. Med "barn" avses att ett element befinner sig inom ett annat elements start- och slutmärken, som alltså är förälder.

De ger möjlighet att skapa avancerade format som är precisionsstyrda för vissa uppgifter och situationer. Här sammanför man flera element och anger att en regel träder i kraft endast när de har en viss inbördes relation i dokumentet. Det låter krångligt men är lätt i praktiken.

Ättlingar

Regeln "H3 strong {color: red;}" innebär att text som omges av "<strong> … </strong>" är röd när "strong" finns nånstans inom märkena "<H3> … </H3>". Detta gäller även om "strong" i sin tur finns inom ett annat element, t.ex. "em": "<H3> xxx <em> xxx <strong> xx </strong> xxx </em> xxx </H3>". I övrigt utformas "strong" av formatmallens allmänna regel eller av webbläsarens formatmall. I detta fall kan man säga att "strong" på något sätt är ättling till "H3".

I Överkurs 6 praktiserar vi en sådan funktion för alternativt utseende hos menyknappar. Här skulle vi dock ha kunnat strunta i klassen ."menytext" och direkt angivit ".navigator a", eftersom länkarna omsluts av denna klass.

Barn

Ett direkt förhållande förälder - barn anges med ">" och gäller när barn-elementet direkt ingår i det omgivande elementet. I exemplet ovan skulle det vara att "strong" ska vara rött endast när det direkt ingår i (är barn till) "em". Regeln blir då "em > strong {color: red;}".

Om vi dessutom bestämmer att denna regel endast gäller när "strong" som barn till "em" ingår i "H3" (ättlingar till "H3"), blir den sammansatta regeln "H3 em > strong {color: red;}". Med denna metod kan man precisionsstyra t.ex. utmärkningar och länkars utseende.

Syskon

En tredje relation är en syskonrelation, där element med samma förälder förekommer i en viss ordning.

Regeln "H3 + H3 {color: red;}"säger att text omgiven av "<H3> … </H3>" ska vara röd om den föregåtts av ett stycke som också har märket "H3". Förälder kan innebära att alla "p" befinner sig direkt inom märkena "<body> … </body>" eller kanske inom samma "<DIV> … </DIV>".

Denna metod kan man använda för att skapa automatiskt förstaradsindrag på alla stycken utom det första. En sådan regel är "p + p {text-indent: 1em;}". Den är i kraft tills följden av "<p> … </p>" bryts av en annan selektor.

Ett annat exempel är om man vill att rubriknivån "H3" ska ha ett speciellt utseende och position när det följer direkt på "H2" som en underrubrik. Det anges i regeln "H2 + H3 {font-size: 13px; margin-top: -7px;}"

Pseudoklasser och pseudoelement med finesser

Förutom html-märken och klasser, har CSS ett speciellt slag av selektorer, som inte motsvaras av något märke i dokumentet, utan aktiveras vid speciella omständigheter som avläses av webbläsaren. Ett sådan situation är en använd länk, styckets första rad ett annat.

Pseudoklasser

Pseudoklasser är de olika egenskaperna för länkars utseende: ":link", ":visited" ":hover" och ":active". I pseudoklass-selektorn kombineras de med länkmärket "a", t.ex. "a:visited {color: maroon}".

Pseudoklasserna kan kombineras med en vanlig klass för att skapa speciella varianter av länkarnas utseende. I "Överkurs 5" kombinerar vi klassen ".menytext" med pseudoklasserna, t.ex. "a.menytext:link".

Pseudoelement

Pseudoelement tycks tillföra dokumentet ett element som egentligen inte finns där. Det ser ut som om de vore särskilda element i koden, men de skapas av webbläsaren.

Regeln "p:first-line {color: red}" gör första raden röd i alla textstycken, oavsett hur långa raderna är i olika fall.

Pseudoelement kan också kombineras med en klass för att skapa preciserade selektorer, t.ex. ".initial:first-line", där pseudoelementet "first-line" aktiveras i stycken som har klassen ".initial".

Om man i deklarationen anger att tecknen ska göras till versaler, att teckenstorleken ska förminskas och texten spärras, kan man få första raden att se ut som kapitäler, t.ex. ".initial:first-line { text-transform : uppercase ; font-size : 75%; letter-spacing : 0.1em;}".

Enligt samma logik kan man skapa anfanger med pseudoelementet ":first-letter". Dessa exempel ingår i "Exempel1" och dess formatmall "standardstil1.css".

Andra exempel på pseudoelement är "first-child" som styr regeln att gälla endast det element som är först i en rad av "barn".

Pseudoelementen ":before" och ":after" kan användas för att tillföra viss text som inte finns inskriven i dokumentet, t.ex. "p.obs:before {content: "OBS! "}" sätter in ordet "OBS! " först i varje stycke med selektorn <p class="ff">. (Funktionen stöds av Opera och används i "Exempel1" och dess formatmall "standardstil1.css".)

Gruppering

Selektorer som har likartad utformning kan grupperas samman, varefter skillnaderna anges med särskilda deklarationer var och en för sig. Därmed kan man effektivare redigera formatmallen.

H1, H2, H3 {font-family: Verdana; font-weight: bold;}
H1 {font-size: 36px;}
H2 {font-size: 24px; color: red;}
H3 {font-size: 16px;}

Kombinationer

Selektorer kan kombineras, så att de bildar en ny preciserad selektor. Medan "H3" och ".bildtext" är två regler med var sina egenskaper, kan kombinationen "h3.bildtext" ges andra egenskaper, som träder i kraft när klassen ".bildtext" används tillsammans med rubriknivån "H3" i märket <h3 class="bildtext">.

DIV och SPAN

DIV är förkortning av Division, och avser att gruppera samman flera stycken, och ge dem alla en viss formgivning, det vill säga applicera en och samma klass på alla.

Taggarna <div class="xxx"> stycken</div> måste skrivas in i dokumentets kod, Dreamweaver applicerar annars klassnamnet på alla markerade stycken.

SPAN är det motsatta, och avser att formge enstaka ord med ett särskilt format.

Taggarna <span class="yyy"> ett eller flera ord </span> kan skrivas in, men kan enkelt anges i Dreamweaver, genom att man markerar orden och väljer klass i CSS Style-fönstret.

Färger

Färger kan anges på fyra sätt:

1) med de vanliga rgb-värdena, t.ex. {color: rgb(0, 52, 113);}

2) med procentuella rgb-värden, t.ex.{color: rgb(100%, 0%, 0%);}

3) med namn för vissa färger, t.ex. {color: maroon;}

4) html-kodens hexadecimala värden, t.ex. {color: #166caf;}

Typografiska mått

Mått kan anges på många sätt, som gör det möjligt att i detalj styra formgivningen, med samma exakthet som i tryck.

Absoluta mått

mm = millimeter

cm = centimeter

in = inch

pt = point (72pt = 1inch)

pc = pica (1pc = 12pt)

Relativa mått

em = fyrkanten (emspace), anges som delar av teckenstorleken, t.ex. 0.5em

ex= x-höjden, anges som em

% = som procent i förhållande till sidans standard eller den omgivande textens utformning,

Pixel

px = pixel, bildskärmspunkt, den minsta enheten i webbtypografi

Pixelmått ger detaljkontroll

De klassiska absoluta måtten har nackdelen att de visas olika på Mac och PC, beroende på att Mac anser att bildskärmen har en upplösning på 72 dpi och Windows anser att den har 96 dpi för text. Ett givet mått får alltså 133 % större utrymme på PC och 75 % mindre utrymme på Mac. Därmed används olika teckenstorlekar för samma pt-storlek.

Pixel-måttet rekommenderas generellt. Det negligerar bildskärmsupplösning och anger direkt antalet pixlar, varvid samma storlek används på Mac och PC. Pixel ger dessutom möjlighet till noggrannare kontroll av formgivningen, och kan ta fram teckenstorlekar som ligger mellan punktstorlekar.

Relativa måttet em är lämpligast för typografi

Relativa mått bör användas om man ska ändra något textelement i förhållande till den omgivande texten, t.ex. förstaradsindrag eller ändring av teckenstorlek, eftersom det anpassas till teckenstorleken på texten. Relativa mått anpassas också till inställningar av teckenstorlek i webbläsaren.

Webbläsaren kan förstora visningen av texten i ett dokument. Det är särskilt viktigt för funktionshindrade, men med tanke på den minimala teckenstorleken på många webbplatser är den av nytta för många.

Den förutsätter att texten är angiven med relativa mått. (Opera har dock en zoom-funktion som förstorar själva bildskärmens visning som inte kräver relativa mått.)

Mått som pixel (px), punkt (pt) och millimeter (mm) är absoluta och kan inte storleksförändras. Måtten "em" och "%" är relativa mått som är användbara. Procentmåttet är lite knepigt ibland, eftersom procenten beräknas utifrån det sammanhang som texten ingår i. Mest användbart är måttet "em" som rekommenderas av W3C som typsnittsmått.

Måttenheten "em" står för "bredden på bokstaven M", och avser typsnittets teckenstorlek. (På svenska blir det "fyrkant", en kvadrat med teckenstorleken som sida.) Detta mått anger hur stort något ska vara i förhållande till den aktuella teckenstorleken. Radavstånd angivet som "1.4em" innebär "1.4 x teckenstorleken". Ett litet varningsord: måttet "%" ger inte alltid samma resultat som "em", så bäst är att hålla sig till "em".

Men hur beräknas teckenstorleken om även den är angiven i "em"?. Givetvis enligt ärftlighetsprincipen, alltså utifrån det överordnade märkets teckenstorlek, som normalt sett är BODY. Bäst är att ange ett absolut värde för teckenstorlek i BODY-märket, som referens för beräkningen av "em". Om man anger den storleken i pixelmått kan man dessutom hantera skillnaden i teckenstorlek på PC och Mac.

Om man inte anger något referensvärde beräknas relativ teckenstorlek utifrån webbläsarens standard för teckenstorlek. Det brukar vara 12 pt, så i allmänhet är teckenstorleken 1em = 12 pt och 0.5em = 6 pt. (Om man har ändrat webbläsarens inställning så att ett annat värde gäller för standardstorlek för typsnitt, så blir det utifrån detta värde som em beräknas.)

Översatt i måttet pixel blir det 1em = 12pt = 16px, 0.5em = 6pt = 8px. Man kan beräkna värdet för teckenstorlek i em genom att dividera pixelmåttet med 16, alltså 8px/16 = 0.5em, om referensevärdet är 16 px eller 12 pt.

Detta stämmer i stort när det gäller teckenstorlek. Måtten kan anges med flera decimaler, men endast steg om fem hundradelar 0.05 fungerar i webbläsaren. Därvid kan man i vilket fall få fram alla teckenstorlekar som finns i "px" och mer kan man inte begära.

Observera att andra typografiska värden beräknas utifrån den aktuella teckenstorleken. För radavstånd, indrag och andra enheter måste man alltså ange relativa värden i förhållande till den teckenstorlek som anges av värdet för "em" i förhållande till referensvärdet.

Det innebär att absoluta pixelmått måste översättas till "em" från fall till fall. ("0.5em" motsvarar 6pt och 8px om teckenstorleken är 12 pt, men blir 4.5pt och 6px om teckenstorleken är 9pt.)

Summa summarum är pixelmåttet lättare att arbeta med under utvecklingen av en formatmall. Vid publiceringen bör man översätta dess värden till "em".

För andra mått än de som rör typsnitt fungerar inte "em", eftersom det måste utgå från uppgifter om just teckenstorlekar.

Använd vanliga punktmått i utskriftsmallen.

Vid utskrift kan det hända att skrivaren använder pixelmåtten, varvid texten blir mycket liten. I en formatmall för utskrift bör vanliga absoluta pt-mått användas för typografin.

Det förenklar dessutom utformningen eftersom man kan använda mått som man är van vid från andra tryckta produkter.

Typografin

Typsnitt anges med font-family, font-size, font-weight, font-style, color.

Radavstånd styrs med egenskapen line-height, som påverkar avståndet över och under texten. Hälften av line-height placeras över och hälften under texten, så när två rader möts blir det angiven radhöjd. Fungerar inte för rubriksättning.

Avstånd mellan stycken och rubriker kan styras med box-egenskaperna margin-top och margin-bottom. Även negativa värden kan användas.

Block-egenskaper

Block avser textstycke och bild, vars mått bestäms av innehållet, till skillnad från box-egenskaper, som marginal. Text är normalt ett block-element, som bestäms av typsnittets storlek och radavstånd. (Detta hör till de mer svårgripbara aspekterna av CSS. I exempeldokumentet kan du se skillnaden mellan utrymmet runt textlänken i den löpande texten, som är blockelement, och utrymmet runt länkarna i menyrutan, som är box-egenskaper.) För oss räcker det att veta att under denna kategori i Dreamweaver finns vissa typografiska egenskaper.

Textens position anges med text-align: right , left, center eller justify.

Förstaradsindrag anges med text-indent. Om man skapar en klass som bara har egenskapen text-indent, kan den lätt appliceras på enstaka stycken.

Spärrning av ord anges i letter-spacing

Utmärkning

I HTML3 användes formattaggarna italic och bold. De är avskaffade i HTML4, och ersätts med de formmässigt neutrala utmärkningarna em (emphasis) och strong.

Dessa måste man alltså märka ut i html-dokumentet. Sedan kan man själv i formatmallen ange hur utmärkningarna ska gestaltas. Genom kombinationer av selektorer kan olika slags utmärkningar användas i olika sammanhang.

Selektorn ärver styckets egenskaper och värden, om man inte uttryckligen anger andra egenskaper eller värden.

Om man inte använder formatmall gör webbläsarens formatmall em till italic och strong till bold.

Boxmodellen

Formatmallar i CSS använder en box-modell för sidans struktur, på samma sätt som QuarkXpress och många andra layout-program. Dessvärre stöds funktionen inte fullt ut av webbläsarna, men vi ska ändå pröva den. Reträtten är att använda tabell för satsytan.

boxmodellen

Principen är att alla element befinner sig i en egen box. Dess storlek kan bestämmas av texten eller anges med bredd och höjd. Runt element-boxen finns en box som anger padding, alltså luften mellan texten och omgivningen. Padding läggs alltså till element-boxen, men har samma bakgrund som den. Därefter kommer boxen för ramar och kantlinjer. Ytterst finns boxen för marginaler, som anger avstånd till omgivande objekt. Marginalerna är genomskinliga.

Med denna modell kan praktiskt taget allt ges padding, ramar och marginaler, såsom body, H1–H6, p, klasser, bilder etc., (Även enstaka ord eller rader kan via SPAN formges med en klass som har box-egenskaper.)

Box-egenskaper

Width och height anger elementets mått

Padding – top, right, bottom, left – anger luften mellan innehållet och omgivningen. Olika värden kan anges för olika sidor av boxen. Padding har samma bakgrundsfärg som element-boxen.

Margin – top, right, bottom, left – anger marginalerna. Olika värden är möjliga för olika sidor. Marginalerna har samma bakgrundsfärg som omgivningen.

Float – left, right – anger om elementet ska placeras till höger eller vänster om föregående textstycke, så att de "flyter" bredvid varanda. Marginalerna anger hur mycket avstånd som finns mellan sidans ytterkant och den flytande texten, som alltså kan vara olika.

Clear används tillsammans med float, och är dess motsats: anger de sidor där flytande element inte får finnas. Används för att hindra att ett icke önskat stycke flyter bredvid en box eller bild, varvid stycket får clear, så att det flyttas ned under det flytande elementet. Clear kan omvänt appliceras på boxen, så att inget flyter vid dess motsatta sida.

Border – top, right, bottom, left – hör till boxegenskaperna, men har fått en egen kategori i Dreamweaver.

Border har width, style och color. Ange värden för alla egenskaperna, för att kantlinjen ska visas i alla webbläsare. Olika värden kan anges för olika sidor.

Style har i Dreamweaver endast ett alternativ, men olika utformning kan anges för olika sidor.

Alla sidor behöver inte ha border angiven, man kan alltså skapa kantlinjer bara för de vertikala eller horisontella sidorna, eller bara en sida.

Positionering

Boxen kan vara en liten ruta som ligger i texten, eller omfatta hela innehållet som en satsyta. Boxen kan vara fastspikad så att den ibland täcker den flödande texten, eller den kan vara knuten till flödet. Boxen kan ligga som en stationär meny vid sidan om innehållet, eller följa med när man rullar sidan.

Det finns fyra typer för egenskapen position:

1) Static

Grundvärdet, som innebär normal position.

2) Relative

Boxen positioneras i förhållande till sin normala plats i dokumentet. Boxen följer med i flödet och sidans rullning. Boxen kan komma att täcka andra element.

3) Absolute

Boxen positioneras i förhållande till dokumentets rot, alltså inte body utan själva html-dokumentet. Boxen frigörs från flödet och kan komma att täcka andra element. Boxen följer med vid sidans rullning.

4) Fixed

Boxen positioneras till webbläsarfönstret, det frigörs från dokumentflödet och kan komma att täcka andra element. Boxen ligger fast och följer inte med vid rullning av sidan. Därmed kan en meny ligga kvar högst upp på sidan, och sidhuvuden kan visas på alla sidor vid utskrift. Hör till CSS2 och stöds inte av så många webbläsare än.

Position anges för varje typ med värden för egenskaperna top, left, bottom och right. Dessa värden har alltså olika referenser beroende på vilken typ av position som avses.

z-index

Egenskapen anger lagerordning eller packordning för objekt som positioneras, eftersom de kan komma att täcka varandra. Avser ordning i djupled. Grundvärdet är 0. Positiva värden placeras över objekt med negativa z-index. Om många objekt ska ges z-index krävs förstås att man tänker igenom hierarkin.

< - - - Sidan uppdaterad 030403 - - - >