Placeringsegenskaper

Flytande element: float

Den här egenskapen använder man för att ange att ett element ska ligga i vänster- eller högerkant och att den vanliga texten ska flyta runt elementet. Egenskapen används oftast till bilder och effekten blir precis det samma som att använda ALIGN=LEFT eller ALIGN=RIGHT i IMG. Egenskapen kan ha värdena left, right och none. Egenskapen kan också användas på vanlig text, till exempel till anfang.

Exempel på float:

Om man vill att bilden ska hamna i vänsterkanten skriver man:
<IMG SRC="gifs/html/tarning.gif" ALT="tärningar" STYLE="{ float: left; margin-right: 40px }">
Vill man inte att texten ska hamna alldeles intill bilden kan man gärna ge bilden marginaler, i detta fall: margin-right: 40px.

Om man däremot vill att bilden ska hamna i högerkanten skriver man istället:
<IMG SRC="gifs/html/tarning.gif" ALT="tärningar" STYLE="{ float: right }">

Om man anger värdet none, hamnar bilden mitt i textflödet man skriver helt enkelt:
<IMG SRC="gifs/html/tarning.gif" ALT="tärningar" STYLE="{ float: none }">

clear

Den här egenskapen bestämmer om ett element tillåter flytande element på dess sidor. Mer specieferat, denna egenskaps värde bestämmer vilka sidor var flytande element inte är tillåtna. Egenskapen kan ha värdena none, left, right och both. Om clear sätts till left, kommer ett element att flyttas nedaför ett flytande element på den vänstra sidan. Om clear sätts till none, tillåts flytande element på alla sidor.

Ett exempel:

H2 { clear: left }

Positionering

Med hjälp av positionering får man möjlighet att placera HTML-element på x och y kordinater. Man kan även överlappa element i z-led. Detta betyder att designers kan placera bilder och texter exakt där de vill. Med hjälp av script kan man sedan flytta runt dessa som man vill och på så vis skapa animeringseffekter.

position

I vanlig HTML placeras elementen på sidan i den ordning i vilken de förekommer i HTML-koden. Denna modell ger inte designern särskilt stor kontroll över var elementen hamnar på sidan. Men genom att med hjälp av lite CCS kod ge elementet en exakt position eller en position relativt ett annat element kan designern få den kontroll denne önskar.

Precis som vilket annat HTML eller CSS attribut som helst är CSS attributen för positionering tillgängliga för att kontrolleras med script. På så sätt kan man flytta elementen hur man vill genom dokumentet utan att en server behöver kontaktas.

Det finns två sätt att placera ett dokument på x och y kordinater. Vilken typ man använder beror på sidan layout. Absolut positionering betyder att elementet är exakt placerat relativt föräldern utan att bry som om annat innehåll på sidan. Relativ positionering placerar ett element relativt ett annat element på sidan och beror hur dokumentet ritas upp i webläsaren, placeringen ritas om om storleken på webläsarens fönsterstorlek ändras.

Absolut positionering

Ett absolut positionerat element är alltid placerat relativt föräldern, eller om det inte finns någon relativt <BODY>. Värden för hur långt från vänsterkanten och från överkanten på föräldern som elementet ska placeras bestämmer placeringen. Se exempel nedan:

#pos1 { position: absolute; top: 20px; left: 50px;}

<IMG ID=pos1 SRC="bild.gif">

Detta exempel placerar en bild på 20 pixlars avstånd från dokumentets överkant och 50 pixlar från dokumentets vänsterkant. Denna bild påverkar inte dokumentets uppritning och andra element kan då ta plats under eller över bilden. Placeringen i z-led kontrolleras av z-index kommandot. Detta kommando beskrivs senare.

Relativ positionering

Ett relativt positionerat element tas inte ut ur dokumentets normala uppritande och positionen tas relativt det föregående elementet. Exempelvis om man placerar ett textelement med hjälp av relativ positionering inuti en paragraf så kommer texten att placeras den text som kommer före. Se exempel nedan:

I den här texten är ett ord upphöjt

Koden:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
#upp { position: relative; top: -7; left: 0;}
</STYLE>
</HEAD>
<BODY>
<BR>
I den här <SPAN ID=upp>texten</SPAN> är ett ord upphöjt.
</BODY>
</HTML>

z-index

Med hjälp av z-index kan man bestämma i vilken ordning element skall staplas på varandra när de överlappar varandra. Detta är till stor nytta när man vill skapa layout med hjälp av absolut och relativ positionering.

Ett element med ett positivt z-index värde placerar sig ovanpå medans ett element med negativt värde placerar sig under. Ganska enkelt eller hur.

Nu tar vi ett exempel:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
#textlager { position: absolute; top: 60px; left: 60px; z-index: 2; 
            font-family: Arial; color: white;}
#bildlager { position: absolute; top: 40px; left: 40px; z-index: 1;}
</STYLE>
</HEAD>
<BODY>
<DIV ID=textlager>Text</DIV>
<IMG ID=bildlager HEIGHT=40px WIDTH=70px SRC="bild1.gif">
</BODY>
</HTML>

I detta exempel kommer texten "text" att placeras ovanpå bilden "bild1".

vertical-align

Med den här egenskapen kan man vertikalt placera olika element i förhållande till ett föregående element, t.ex. en bild i förhållande till ett textavsnitt eller en rubrik den befinner sig i. Egenskapen kan ha värdena baseline, sub, super, top, text-top, middle, bottom, text-bottom, och ett <percentage>.

baseline

Baseline är utgångsvärdet och placerar bas-linjen av elementet med baslinjen till föregående element. Skriv:

<H4>baseline <IMG SRC="gifs/html/enve.gif" ALT="brev"

STYLE="{ vertical-align: baseline }"></H4>

middle

Middle placerar den vertikala mittpunkten av elementet med baslinjen plus halva x-höjden till föregående element.

sub

super

text-top

Text-top placerar toppen av elementet med toppen av föregående elements typsnitt.

text-bottom

Text-bottom placerar botten av elementet med botten av föregående elements typsnitt.

top

Top placerar toppen av elementet med det högsta elementet på linjen.

bottom

Bottom placerar botten av elementet med det lägsta elementet på linjen.

background-color

Med den här egenskapen kan man bestämma bakgrundsfärgen för ett element, antingen genom ett färgvärde eller nyckelordet transparent, för att få dom underliggande färgerna att lysa igenom.

Exempel:

<H3 STYLE="{ padding: 0.2em; background-color: teal; font-family: arial;
color: white }">Bakgrundsfärg</H3>

Så här ser det ut i webläsaren:

Bakgrundsfärg

background-image

Med denna egenskap kan man bestämma vilken bakgrundsbild ett element ska ha. När man bestämmer en bakgrundsbild för ett element, bör man också speciefera en bakgrundsfärg som kommer att användas när bilden inte är tillgänglig. När bilden är tillgänglig återges den ovanpå bakgrundsfärgen. (Bakgrundsfärgen är synlig i transparenta delar av bilden).

Exempel:

<P STYLE="{ padding: 0.5em; background-image: url(bground\html\bg041.gif);
border: inset thick; margin-left: 50px; margin-right: 50px; font-family: arial;
font-weight: 900; color: #000000; text-align:left }">

Det här är ett exempel på hur man kan välja att visa textstycken med en
annan bakgrundsbild än vad resten av dokumentet har.</P>

Så här ser det ut i webläsaren:

Det här är ett exempel på hur man kan välja att visa textstycken med en annan bakgrundsbild än vad resten av dokumentet har.

background-repeat

Med den här egenskapen bestämmer man om bakgrundsbilden ska repeteras och hur den ska repeteras. Egenskapen kan ha följande värden:

repeat
Bilden repeteras både horisontellt och vertikalt. Detta är det förvalda värdet hos webbläsarna och behöver inte anges.

repeat-x
Bilden repeteras bara horisontellt Exempel repeat-x

repeat-y
Bilden repeteras bara vertikalt Exempel repeat-y

no-repeat
Bilden repeteras inte, endast en kopia av bilden ritas upp. Exempel no-repeat

background-attachment

Den här egenskapen kan ha värdena scroll och fixed. Om man anger värdet fixed kommer bakgrunden att vara still medans texten kommer att rulla på medans man förflyttar sig i ett dokument. Anger man värdet scroll kommer bakgrunden att rulla med texten när man förflyttar sig i ett dokument. Man kan till exempel ha en bakgrundsbild i ett textavsnitt med värdet fixed, men den bakgrunden kommer bara att synas när det textavsnittet är synligt på skärmen.

background-position

Om en bakgrundsbild har angetts, kan man med den här egenskapen bestämma var på skärmen dess position ska vara. Egenskapen kan ha ett procentvärde, ett längvärde eller nyckelorden top, center och bottom, eller nyckelorden left, center och right. Värdena har följande innebörd:

procentvärde
Med ett värdepar av 0% 0% kommer bilden att hamna i översta vänstra hörnet. Med ett värdepar av 100% 100% kommer bilden att hamna i nedersta högra hörnet.

längdvärde
Med ett värdepar av 3cm 3cm kommer bilden att hamna 3cm nedanför och 3cm till höger om översta vänstra hörnet.

top left och left top
Samma som 0% 0%.

top, top center och center top
Samma som 50% 0%.

right top och top right
Samma som 100% 0%.

left, left center och center left
Samma som 0% 50%.

center och center center
Samma som 50% 50%.

right, right center och center right
Samma som 100% 50%.

bottom left och left bottom
Samma som 0% 100%.

bottom, bottom center och center bottom
Samma som 50% 100%.

bottom right och right bottom
Samma som 100% 100%.

Om endast ett procent- eller längdvärde är angett, kommer endast den horisontella positionen att bestämmas, den vertikala positonen kommer att bli 50%. Om två värde har angetts, kommer den horisontella positionen först. Kombinationer av längd- och procentvärden är tillåtna, (ex 4cm 50%). Negativa värden är tillåtna. Nyckelord kan inte kombineras med procent- eller längdvärden.

background

Den här egenskapen är ett kortkommando för att bestämma de indviduella bakgrundsegenskaperna (background-color, background-image, background-repeat, background-attachment och background-position) på samma ställe i ett stylesheet. Exempel:

BODY { background: #FFFF99 url(bground/html/white.gif); repeat-y; fixed; center; }

Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.