Vi skapar en webbsida

Handledning

Vi skapar en webbsida!

- med CSS

En enkel genomgång hur du kan skapa en enkel webbsidesdesign med hjälp av html och grundläggande css

Vi skapar en webbsida

2

Grundläggande genomgång av hur du skulle kunna bygga en enkel webbsidesdesign med hjälp av html och grund-läggande css. Främst för webbläsare som följer W3C:s rekommendationer, det vill säga följer webbstandarden.

Jonas Lidström, Isegrim


3

Vi skapar en webbsida!

- med CSS

Målsättning

i ska i den här handledningen lära oss att steg för steg skapa en enkel webbsida. Vi

kommer att utnyttja teknikens fördelar och begränsningar. Det du lär dig här utgör

grunden för mer avancerad webbsidesdesign, men vi kommer inte att titta på några

speciallösningar. Sidan som du skapar med den här handledningen kan du sen utveckla på

egen hand, eller med efterföljande handledningar och övningar.

Förberedelse

Skapa ett nytt html-dokument för den här genomgången, vi kan kalla det för min-

css-sida.html. Vi kommer även att definiera egenskaper med css. Du väljer själv om du

jobbar med en extern css-mall eller med intern-css uppe i head-sektionen av html-doku-

mentet. I exemplen kommer jag utgå från att du jobbar med en extern css-mall, skillnaden

mellan extern och intern är inte så stor, så du kan lätta följa med i resonemangen ändå. Vill

du jobba med en extern mall, döp den då till min-css-sida.css och spara den i samma mapp

som min-css-sida.html.

V


4

Det finns många wysiwyg-editorer som skapar webbsidor utan att du behöver se hur sidan

skrivs (där du inte behöver se hur html eller css skrivs). Jag rekommenderar ändå att du

bekantar dig med hur sidor skapas under ytan, det ger dig större kontroll över innehåll och

utseende, det ger dig även djupare förståelse för vad som händer.

Väljer du att jobba med en texteditor, kom ihåg att websidorna skall sparas med filändelsen

[.htm] eller [.html] och stilmallarna sparas som [.css]. Glömmer du det, kommer webbläs-

aren öppna filen som en textfil.

Handledningen är uppdelad i tre steg.

Steg 1 – HTML - Vi skapar en grundläggande sida

Vi lägger upp en grundsida i html och talar lite om struktur.

Steg 2 – CSS - Vi formaterar dess utseende med css

Vi kopplar en css-mall till grundsidan och formaterar sidans utseende.

Vi tittar på ett sätt att låta sidan alltid vara centrerad i webbläsar-

fönstret. Vi talar lite om hur css skrivs och kopplas till ett html-

dokument.

Steg 3 – MENY - Vi skapar en navigationsmeny

Vi formaterar en lista med länkar, skapar nytt utseende samt position-

erar länkar både vertikalt och horisontellt. Vi tittar lite närmare på

länkar och vi tar upp sidstrukturer igen.


5

Bakgrund

När du skapar webbsidor med html styr webb-läsarens inställningar hur sidan visas. Stil och storlek på bokstäver, visas utifrån de ins-tällningar besökaren valt eller de standard-inställningar den aktuella webbläsaren har. Med attribut som skrivs in i html-taggen, kan man förändra webbsidans utseende. Men vill man senare ändra sidans utseende, måste man gå in på alla ställen där man skrivit in attribut, särskilt besvärligt är detta om man vill uppdatera flera webbsidors utseende.

Vad vill vi uppnå

Tanken nu är att vi skall använda oss av en metod där vi skriver webbsidans utseende med css. Det hjälper oss att separera sidinnehåll och utseende. På så vi kan man lättare ändra på sidans utseende, utan att behöva leta reda på alla html-attribut. Det ger oss även nya möjlig-heter, att placera, förändra, färglägga webb-sidans olika delar. Skriver vi vår css i en separat fil, kan den även länkas till flera webbsidor.

CSS?

Vad kan man göra med CSS-kod? Styra utseendet på ett element, alla element av en viss typ eller

hela webbsidor. Man kan bestämma placeringen av element och kontrollera elementens i lager

egenskaper. Man kan dölja och visa element och ändra på elementens beteende.

Behöver man lära sig CSS utantill? Nej egentligen inte, men det är bra att lära sig grundprinciperna

och några ofta förekommande attribut, samt hur boxmodellen fungerar.

Vilka ofta förekommande attribut bör man lära sig? Kan givetvis variera, men de grupper jag

rekommenderar är de kopplade till boxmodellen (höjd, vidd, positionering, marginaler och kant), de

kopplade till text (bokstavsstilar, färg, formatering av text), de kopplad till bakgrunder.

Syftet med CSS Om vi delar på innehållet och utseende, kan vi lättare anpassa samma innehåll för

olika plattformar, ska det anpassas för att visas på en skärm, en handdator, en mobiltelefon, via din

spelkonsol eller skrivas ut på papper. För olika situationer behöver man anpassa sidans utseende på

lite olika sätt och om vi ska göra det inne i html-koden, måste vi skapa ett html dokument för varje

anpassning. Tänk då att vi har en hel webbplats, med flera interna sidor. Med hjälp av CSS-mallar kan

vi istället skapa flera utseenden/anpassningar som formar innehållet istället för att skapa flera sidor

med samma innehåll.


6

CSS är en förkortning som står för Cascading Style Sheets, vilket vi skulle kunna översätta till skurar

av stil eller stil som stänker. Förvisso en haltande översättning, men metaforen är inte så dum. För

css är tänkt att användas som just ett dokument, var ur utseendet (stilen) flödar från malldoku-

mentet in till webbsidorna och formar webbinnehållet.

Hur du strukturerar din websida? Du bör alltid märka upp ditt innehåll korrekt, är det en lista

använder du dig av list element (<ol>,<ul>,<dl>), rubriker märks upp med rubrik-taggar (<h1>, <h2>,

<h3> … ), textstycken märks upp med paragraftaggen (<p>) osv. Undvik att använda dig av ”fel sorts

html-tagg” även om slutresultatet blir detsamma. Ibland uppnår du inte önskat utseende, när du

märkt upp sidan på ”rätt sätt”, men det kan du lätt ändra med css.

Utöver uppmärkning av innehåll, kan du även gruppera ditt innehåll med grupperings-elementen

<div> och <span> och på så vis ytterligare dela upp, sortera och placera ditt innehåll. Men se till att

inte överanvända dig av dem, de behövs inte till allt, uppmärkningen i övrigt är ofta tillräcklig.

Se det som en möjlighet att skapa större strukturer, som håller samman innehållet på webbsidan.

Efter uppmärkning är nu allt innehåll antingen på block-nivå (block) eller text-nivå (inline)

Blocknivå-element, bildar egna enheter, ofta med en radbrytning före och efter elementet. Textnivå-

element, lägger sig på rad efter varandra, på samma nivå och utan radbrytningar. Även om du kan

ändra detta beteende, är den generella uppmaningen att man inte bör göra så. Många gånger kan

man lösa det på andra sätt, ibland kan detta däremot vara att föredra.

Om boxar, namngivning och sånt. Allt innehåll på en webbsida, varje element (uppmärkt innehåll

och all text) upptar en viss yta. Innehållet, de olika elementen, kan du nu se som rutor, eller boxar

med innehåll som du kan bestämma utseendet och placeringen av. Det man ofta benämner som

elementets box och det är detta som syftas till när man talar om boxmodellen. Boxar är alltså den yta

som ett element du infogat på din webbsida upptar. Exempel på element: rubriker <h1>, indelningar

<div>, paragrafer <p>, betoningar <em>, länkar <a> osv, även webbsidan i sig <body>.

Har man märkt upp innehållet på sin sida (med html-taggar, id-namn, klasser) kan man kontrollera

hur den ytan ser ut och placeras på webbsidan. Det här är något som oftast sker automatiskt i

bakgrunden, men med css tar du kommandot över hur det visas.

Boxar kan tilldelas fler egenskaper, som till exempel höjd och bredd, bakgrundsfärg eller bakgrunds-

bild, kantlinje, dess bredd, stil och färg, marginal runt boxen och mellanrum mellan boxens kant och

dess innehåll.

Boxmodellen är en av CSS grundstenar. Lär man sig hur den fungerar har man kommit en bra bit på

väg att förstå hur mycket av all CSS fungerar, och varför elementen beter sig som de gör på sidan.

Men framför allt hur du själv kan ändra dess beteende.

CSS förekommer även som ett html-attribut och heter style!


7

Vi skapar en webbsida. Steg för steg

HTML

Innan du sätter igång med denna handledning läser du texten om grundläggande html: [html grund] eller samma

information hos World Wide Web Consortium (W3C) http://www.w3.org/TR/html401/struct/global.html .

1. Inledningsvis startar vi med ett tomt html-dokument

I handledningen, kommer bara aktuella förändringar skrivas ut (i några fall, anges även om-

givande element i svagare färg). Du placerar förändringarna flera mellan <body>-taggarna,

den del av html-dokumentet som visas i webbläsaren eller i css-mallen.

Vi kommer att jobba med en extern css-mall, där alla css-deklarationer skrivs in, vi kommer

att växelvis ändra i de båda dokumenten. Det är bra om du ofta sparar och förhandsgranskar,

gärna i olika webbläsare för bästa resultat, under arbetets gång. Det är inte alltid som

webbsidan ser lika ut i olika webbläsare och på olika plattformar, allt beroende på webb-

läsaren och på användarens personliga inställningar.

Radbrytningar i html-kod är främst till för att få god översikt, det spelar ingen roll om man

skriver html-taggarna på rad efter varandra. Webbläsaren tolkar innehåll och uppmärkning

korrekt ändå, under förutsättning att man skrivit in den rätt.

Du kan även ha för vana att lägga in anteckningar i ditt html-dokument och din css-mall, där

du berättar vad de olika elementen är och var de börjar och slutar. Öppna en html-mall, eller

skapa en ny sida från grunden, jobba med html-dokumentet i valfri editor.

Glöm inte att ge sidan en lämplig titel <title>.

Din sida bör se ut något liknande detta:

1. <!DOCTYPE … >

2. <html … >

3. <head>

4. <title>Din sidtitel </title>

5. </head>

6. <body>

7. 

8. </body>

9. </html>

Som du ser, har jag inte skrivit ut all information i exemplet ovan, - läs den grundläggande texten [html grund] för att skriva in vad som saknas..

html

&xhtml

Det finns flera versioner av upp-märkningsspråket html och det pågår en ständig utveckling av det. Det finns dessut-om en striktare variant av html, som är en kombi-nation av html och xml – xhtml.

” Ett kännetecken för XHTML är att strukturens utse-ende styrs av pre-sentationen; man använder således alltid css till pre-sentationen och html till att bygga strukturen. För att därutöver få en websajt att kunna impleenteras crossbrowser vali-derar vi den ut-ifrån rätt doctype för att få den att följa en webb-standard.”

Ett html-doku-ment ska deklar-eras som ett text/html , medan ett xhtml doku-ment skall deklar-eras som antin-gen applica-tion/xml eller application/xhtml+xml.

Läs mer: HTML-grund

http://www.w3.org/TR/html401/struct/global.html


8

2. Innehåll

Vi behöver bestämma oss för vad som skall finnas med på vår sida och hur vi tänkt oss

fördela innehållet över sidytan. Jag kommer att utgå från en enkel sidlayout, som är lätt att

variera. Längst upp på sidan sätter vi en titel, man kan tänkas byta ut den mot en bild i ett

senare skede. Längst ner på sidan placeras kontaktinformation i ett eget fält, som en sidfot.

Där mellan gör vi plats för annat sidinnehåll, som till exempel texter, bilder, länkar och navi-

geringsmeny. Även med detta upplägg, kan vi variera sidans layout på flera sätt.

Utöver val av färg och storlek på de olika enheterna (sidhuvud, sidfot och sidinnehåll), kan

placering av navigationsmeny påverka intrycket av sidan rätt mycket. Så mycket att vi bör se

den som ytterligare en enhet och ta den i beräkning när vi lägger upp vårt arbete.

Nästa steg blir att avgöra hur vi ska märka upp sidan, vilka html-taggar ska vi använda oss av.

I detta steg, är det viktigare att veta delarnas funktion än hur de skall se ut och placeras.

Sidhuvudet, sidfoten och sidinnehållet (satsytan) är separata enheter >>block<<, likaså menyn.

Till de tre första kan vi använda oss av grupperings-taggen <div>, för att skapa avskilda

enheter. Menyn kommer att bestå av en mängd länkar, vilket passar att placeras i en lista.

Man kan även tänka sig att vi använder oss av rubrik-taggen <h1> som sidhuvud då den är

tänkt att användas som sidans titel och man kan tänkas använda en paragraf-tagg <p> till

sidfoten, då den enbart skall användas till enkel text (kontaktinformation). Ett annat alternativ

skulle kunna vara att placera texten (kontaktinformationen) inom <address>-taggen, vilket än

mer gör det till tydlig uppmärkning av innehållet. Resterande sidyta, placerar vi inom en

<div>-tagg. Vi samlar alla dessa olika delar inom en yttre sammanhållande <div>-tagg, för att

ordna och placera innehållet som en sammanhållen gemensam yta.


9

3. Yttre sammanhållande block

Infoga ett <div>-element på din sida ge div-taggen en unik identitet, förslagsvis något som

beskriver div-taggens funktion. I det här fallet kommer vi att använda den här div-taggen som

en yttre ram till allt annat sidinnehåll, jag ger den därför identiteten sidyta *id=”sidyta”+.

10. <div id=”sidyta”>

11. 

12. </div>

Det kan vara bra om du tillfälligt placerar lite text innanför <div>-taggar, medan du arbetar

med dem, då de annars riskeras att inte visas när du förhandsgranskar i en webbläsare. Den

oformaterade div-taggen baserar sin höjd på innehållet. Saknar den innehåll, kollapsar div-

taggen ner till en höjd av noll [0], vilket inte är synligt i en webbläsare.

4. Sidhuvud/Rubrik

Vi behöver avdela en yta för sidhuvudet, du kan välja att göra det med en <div>-tagg men jag

föreslår att du istället använder dig av ett annat block-element, rubriker. Infoga den största

rubriktaggen <h1> och ge den en unik identitet, som beskriver dess funktion. Jag väljer att ge

den beskrivande identiteten sidhuvud *id=”sidhuvud”+. Skriv även in en temporär titeltext.

11. <h1 id=”sidhuvud”> Min webbsida! </h1>

5. Sidinnehåll (satsyta)

Nu lägger vi in en yta för diverse innehåll, som texter, bilder m.m. Eftersom innehållet kan

variera använder vi oss av grupperingstaggen <div>, i ett senare skede kanske vi vill fylla den

här ytan olika stycken, kolonner, citat och då vill vi hålla den ytan så öppen som möjligt. Vi

ska även ge den här ytan en unik identitet. Jag kommer att låna det typografiska uttrycket

satsyta, för att beskriva den här enheten. Satsyta är inom typografiska sammanhang den del

av en sida som upptas av text och bild. Jag vill inte ge delen ett namn som är för likt någon

annan indelning (sidyta-sida-sidinnehåll) och jag bör undvika specialtecken som å, ä och ö.

12. <div id=”satsyta”> Tillfällig text </div>

13. 

6. Sidfot

Infoga nu även en yta för sidfoten, jag väljer att även här använda mig av en <div>-tagg, då

det inte är säkert att man enbart kommer infoga kontaktinformation här.

11. <div id=”sidfot”> Min sidfot! </div>

Du ger givetvis dina indelningar valfria namn, men se till att det är lätt att förstå vilken det är.


10

7. Koppla samman html-dokumentet och extern css-mall

Innan du fortsätter är det en sak till som vi bör lägga till på html-dokumentet, en länk till

css-mallen. Glömmer vi länka mellan dokumenten, kan inte webbläsaren veta vilka egen-

skaper som skall kopplas till element på sidan och lämnar dem därför oformaterade.

Sammanlänkningstaggen <link> placeras mellan <head> och </head> i html-dokumentet.

1. <head>

2. …

3. <link href="stylel.css" rel="stylesheet" type="text/css" media="screen" >

4. </head>

Man kan koppla flera olika stilmallar (css-mallar) till en och samma webbsida, som anpassas

för olika [media]. Kommer stilmallar i konflikt med varandra, gäller den som läses in sist.

Alternativ – intern css

Du kan även placera din css i html-dokumentet. Skrivsättet är detsamma som för den externa

mallen, med den skillnaden att det placeras uppe mellan <head>-taggarna. För att webb-

läsare skall tolka innehållet rätt och inte skriva ut det som text, använder du dig av <style>-

taggar.

För äldre webbläsare, som inte kan tolka css eller <style> inte ska läsa och skriva ut koden

som text, placeras även all css inom komentatorstaggar <! -- … -- >

1. <head>…

2. <style type="text/css" >

3. 

6. </style>

7. </head>

Sådär nu är du (nästan) färdig!

Nu behöver du bara ge den ett nytt utseende…


11

CSS Steg för steg

Öppna upp din css-mall i valfri editor. Det är bra om du under arbetets gång ofta sparar och att du ofta testar

din webbsida i olika webbläsare för bästa resultat; det är inte alltid som det ser lika ut mellan olika webbläsare.

Din sida ser just för tillfället inte så mycket ut för världen, inte ens om jag fyller på med mer text.

Om du lägger till en underrubrik (<h2>), ett kort textstycke (<p>), och ett citat (<blockquote>), inom

<div>-taggen [satsyta], skulle din sida kunna se ut någonting liknande detta:

<div id=”sidyta”>

<h1 id=”sidhuvud”>

<div id=”satsyta” >

<h2>

<p>

<blockquote>

<div id=”sidfot”>

Fortfarande inte så spännande, nu ska vi formatera innehållet, ge det nya egenskaper, nytt utseende. Så första steget blir att skriva in regelsatser som kopplar till de olika delar vi just skapat. En regelsats består av en selektor (ett taggnamn, en identifierare eller klass), följt av ett deklarationsblock. Deklarationsblocket skrivs in mellan klamrar [{] och [}]. Deklarationsblocket samlar alla egenskaper som vi tilldelar ett element, flera egenskaper kan

radas upp efter varandra om de separeras av semikolon [;]. CSS-regelsatsen får då en syntax som består av tre delar:

Selektor, egenskap och värde

selektor {egenskap: värde;}

Vill man ange samma egenskaper till flera selektorer, kan man separera dem med

kommatecken: Selektor, selektor, selektor {egenskap: värde;}


12

1. Förarbete med Stilmallen

Infoga tomma regelsatser för alla element som du vill påverka, vi kommer att tilldela dem

egenskaper allt eftersom. Html-taggar skrivs in med enkel text utan hakparenteser,

identifierare föregås av nummertecknet (#) och klasser föregås av punkt (.).

Vilka element och id-namn är det då vi har i vårt dokument. Hela webbsidan ligger inom

<body>, vi har även <h1>, <h2>, <p>, <blockquote> och <div>, div-taggarna och största

rubriktaggen<h1> har även unika namn (id).

Skriv bara in de element som du tänkt dig att ändra på och gruppera element som har

egenskaper med samma värden. I vårt fall är det viktigare att skriva in regelsats för de unika

namnen (id) än en regelsats för alla <div>-element. Däremot kan vi gruppera <h1> och <h2>,

som får samma bokstavsstil (font) och sedan ge <h1> unika egenskaper utifrån sitt namn (id).

1. body {}

2. h1, h2 {}

3. #sidyta {}

4. #sidhuvud {}

5. #satsyta {}

6. #sidfot {}

2. Bakgrund, textstil och färg på brödtext

Infoga nu egenskaper för <body>, vi kommer att ge den bakgrundsfärg. Här kan man även

definiera vilken stil och färg vi ska använda till text på webbsidan. Då element ärver (vissa

men inte alla) egenskaper av sina föräldrar (element som omsluter dem, vilket body-taggen

definitivt gör), så definierar vi nu utseendet på all text på hela webbsidan.

1. body {

2. background-color:#066;

3. color:#036;

4. font-family: "Times New Roman", Times, serif

5. }

Vill vi använda oss av andra färger eller stilar(font) i någon del av sidan, till exempelvis på

rubriker, måste vi ange avvikelsen hos de elementen. Det som deklarerats senare, ersätter

det föregående på de ställen (de element) det är angett.


13

Rubriker

Nu lägger vi till gemensamma egenskaper för alla rubriker, du kan skriva in rubriknivå tre

även om den inte förekommer i dokumentet, så är du beredd på eventuella framtida

förändringar. På så vis behöver du bara märka upp webbsidan korrekt för att få en tydlig

lättläst layout, med rubriker som avviker från brödtexten.

6. h1, h2, h3 {

7. color: #005; font-family: Arial, Helvetica, sans-serif;

8. }

3. Ge sidelementen bakgrundsfärg

Under tiden du jobbar med sidlayout kan du med fördel ge de olika ytorna (boxarna) en unik

bakgrundsfärg, så att du lättare ska kunna hålla reda på hur de placerar sig i förhållande till

varandra. Det behöver inte vara ”rätt färger” så här i början, det spelar inte så stor roll vilka

färger det är, så länge de inte är samma. Vi kommer sedan att ta bort bakgrundsfärgen eller

byta ut den mot en som lämpar sig bättre för det intryck vi vill uppnå.

9. #sidyta {

10. background-color: #33f;

11. }

12. #sidhuvud {

13. background-color: #ff3;

14. }

15. #satsyta {

16. background-color: #f55;

17. }

18. #sidfot {

19. background-color: #3f3;

20. }

Förhandsgranska sidan i en webbläsare, du kommer se de olika ytorna i den färg som du

tilldelat dem. Saknar du någon yta, dubbelkolla om ytan saknar innehåll. Är den tom, skriv

tillfälligt in något eller några ord.


14

4. Sidhuvudet

Vi börjar med att förändra sidhuvudet. Första steget blir att göra rubriken centrerad på sidan,

det gör vi med text-attributet [text-align]som vi ger värdet [center]. Förhandsgranskar vi

sidan kan vi nu se att texten är centrarad. Du kan passa på att byta textfärg [color] och

bakgrundsfärg [background-color]på sidhuvudet om du vill.

Vill du att texten inte skall ligga så nära överkanten av sidhuvudet, lägger du till lite marginal

mellan innehåll och sidhuvudets yttre kant [padding]; pröva dig fram hur mycket du behöver.

Det kan även vara läge att definiera en fast höjd [height] på sidhuvudet, kom ihåg att du

måste skriva ut enheter (pixlar skrivs px) i css.

7. #sidhuvud {

8. background-color: #...;

9. color: #...;

/* ändra bara färgen här om den ska avvika från det du angett för rubriktaggar tidigare */

10. text-align:center;

11. height: 75px;

12. padding-top: 10px;

13. }

Om man vill ersätta sidhuvudets bakgrund med en bild gör du det med bakgrundsattributet

[background-image] enligt följande:

7. background-image:url(...här skriver du in sökväg och bildens namn);

5. Sidfoten

Definiera på samma sätt, ny bakgrundsfärg och textfärg som passar till den på sidfoten. Skriv

även in sidfotens höjd och inre marginaler.

8. #sidfot {


10. color: #...;

11. height: 75px;

12. padding: 5px;

13. }

Samma gäller som ovan, att om du vill ersätta bakgrundsfärgen med en bild, så använder du

dig av bakgrundsattributet [background-image].


15

6. Satsytan, ytan för sidinnehåll

Den här ytan ska vi inte göra så mycket med, den kommer att vara behållare för alla delar

som du stoppar in på din sida; som texter, bilder m.m. Så vi vill inte ge den en fixerad höjd, så

att vi begränsas av hur mycket som ryms på höjden. Däremot vill vi inte heller att den ska

vara för liten, när vi saknar innehåll. Därför ska vi definiera minsta önskade höjd med

attributet [min-height] Min-height, gör så att om innehållet är större än ytan, expanderar

den, men är den mindre stannar den vid den storlek vi valt.

14. min-height: 200px;

Marginaler

För att snygga upp ytan och lyfta fram dess innehåll, lägger vi till marginal mellan ytans yttre

kanter och dess innehåll, så kallad inre marginal [padding]. Men vi vill kanske inte använda

oss av samma marginaler hela vägen runt om, kanske man kan ha större på vänster och

höger sida än uppe och nere. För detta kan vi använda oss av två metoder, den ena är att

definiera inre marginal för var och en av dem (padding-top, padding-right, padding-bottom

och padding-left) eller så skriver vi det i en förkortad form:

15. padding: 10px 50px 10px 50px;

Marginalen, anges då i ordningen top,right, bottom, left - alltså medsols. Har dessutom top -

bottom och right -left samma värden som ovan, kan man förkorta ner det ytterligare.

15. padding-top: 10px 50px;

Bakgrund

Välj även en passande bakgrundsfärg till ytan, tänk på vad du skall fylla sidan med, ofta

fungerar en ljus yta bättre. Detsamma gäller att en enfärgad yta ofta passar bättre än en

brokig (som till exempel en bild). Pröva dig fram till vad som passar just din designidé.

15. #satsyta {


17. color: #...;

18. min-height: 200px;

19. padding: 10px 50px;

20. }


16

7. Centrera hela sidan och definiera dess bredd

Nästa steg blir att centrera allt innehåll på vår sida, till det ändamålet ska vi använda oss av

den omslutande <div>-taggen [sidyta]. Vi kommer att använda oss av boxegenskapen för

yttre marginal [margin], den som anger marginal mellan box och omgivande element. I det

här fallet är det enbart <body> som omger div-taggen [sidyta], vilket kommer göra så att den

alltid är centrerad i webbläsarfönstret.

Men vi vill inte centrera både lodrätt och vågrätt, utan enbart vågrätt (åt sidorna), vi anger

därför enbart marginalvärden för höger och vänster marginal. Höger [margin-right] och

vänster [margin-left], vi ställer in värdet till [auto]. Värdet [auto] anger i det här fallet att

marginalen skall bli så stor som möjligt och eftersom vi anger [auto] på både höger och

vänster sida fördelas ytan mellan dem; och sidan centreras.

För att det här ska fungera, måste vi också ange bredd på sidytan [sidyta]. Det förhands-

inställda beteendet hos blockelement gör så att den upptar en hel radbredd, den breder ut

sig på så stor bredd som finns tillgänglig. Vilket då gör så att det inte finns något utrymme

kvar för marginalen (som när den är inställd på [auto] tar det utrymme som blir över).

21. #sidyta{

22. margin-left: auto;

23. margin-right: auto;

24. width: 680px

25. }

Sådär, nu är du färdig!

Nu behöver du bara en navigationsmeny…


17

<<aa>>

LÄNKAR En kort beskrivning

Om du känner dig säker på hur man skriver och använder länkar, kan du hoppa över det här kapitlet och

fortsätta direkt med nästa kapitel - meny. Du kan även läsa mer om länkar i den grundläggande texten:

[övning: länkar] och på World Wide Web Consortium (W3C) http://www.w3.org/TR/html401/struct/links.html

Inledning

Även om det är ett enkelt koncept, har länken varit en av de främsta drivkrafterna till

framgång för webben. En länk <a> är en förbindelse från en webbsida till en annan punkt

på internet. Man kan länka inom en och samma webbsida likväl som till en annan webbsida,

som ligger på eller utanför den egna webbplatsen/servern.

En länk har två ändar - kallade ankare - och en riktning. Länken startar vid ett "käll-ankare"

(den klickbara ytan) och pekar mot ett "destinations-ankare", t.ex. en webbplats, en bild,

ett videoklipp, ett ljud, ett program, ett HTML-dokument, ett element i ett HTML-dokument

osv.

När länk-taggens [href] attribut är satt, definierar elementet det en källa (ankare) för den

länken, som kan aktiveras av användaren (genom att klicka) för att hämta en webbresurs.

Den hämtade webbresursen kan hanteras av webbläsaren på flera sätt: Genom att öppna

ett nytt fönster, genom att öppna i samma fönster som webbsidan med länken (och då

ersätta innehållet med den nya sidan, eller innehållet), genom att starta ett program för att

hantera källan (destinationsankaret: ett ljud, en film, ett dokument et.c.).

Länk-attributet [target] kan berätta för webbläsaren om den skall öppna destinations-

ankaret i ett nytt fönster *target=”_blank”+ eller i samma fönster [ target =”_self”+, men kan

även länka till en namngiven yta (frame) *target=” … ”+ (där man då skriver in ytans defini-

erade [name]). Anger man inte [target], utgår webbläsaren oftast från att destinations-

ankaret ersätter källan (sidan med länken). Så man behöver inte skriva in attributet om det

är det här beteendet man vill uppnå.

När ett [name] eller [id] attribut finns angivet hos länk-taggen kan länken fungera som ett

ankare, som kan användas av andra länkar att länka till, även inom en webbsida. På samma

sätt, kan en länk-tagg länka till ett element på en webbsida, om den har en unik identitet.

Man kan med fördel använda sig av [title] attributet i länk-taggen för att ge mervärde och

information till användaren om länken. En [title] kan även läsas upp av talsyntes eller visas

av webbläsaren.

<a href=”… destination ” name=” … ” id=” … ” title=” Beskrivning av vad länken leder till” > Vad som syns </a> .

http://www.w3.org/TR/html401/struct/links.html


18

Hur länkar ser ut, och hur du vill att de ska se ut på din webbsida?

När en text formaterats till en länk, visas detta ofta genom att texten ges ett avvikande och

framträdande utseende. Webbläsaren brukar även visa länkens nuvarande tillstånd: att det

är en länk; att det är en besökt länk; att det är en aktiv länk. Muspekarens utseende ändras i

de flesta fall hos webbläsaren (från pil till hand), när den ligger ovanför en länk.

Med CSS kan du förändra de förhandsinställda länkfärgerna, men även ge länkar nya

egenskaper. Du kan ge länkar de flesta block-, text- och font-egenskaper, även om länkar är

inline-element, vilket är väldigt användbart.

CSS exempel

Exempel på egenskaper du kan ge: kantlinje (border – widht, -color, -style), marginaler (padding,

margin) bakgrund (background -color, -image, -position), positionering (position, top, float …)m.m.

1. a { font-family: Tahoma, Geneva, sans-serif;

2. font-size: xx-large;

3. font-weight: bolder;

4. color: #F90;

5. text-decoration: none;

6. background-color: #0FC;

7. text-align: center;

8. margin: 5px;

9. padding: 5px;

10. border: thin double #00F;

11. }

12. /* … och så vidare … */

Display kan växla ett element från att bete sig som ett inline till att bete sig som ett block-element och

vice versa. Man kan även välja display:none; för att dölja elementet helt och hållet .

13. a { display: block; … }

Vanligast förekommande förändring av länktexter är textfärgen. Visa att det är en länk

genom att göra länktexten blå och göra den understruken, visa att en länk redan är

använd genom att göra den lila och medan länken är aktiv/klickas på/används visa den

som röd. Webbläsaren kan även visa att länken är markerad/vald/i focus genom att ge

länken en ram av prickar, länkar kan få en ny färg när muspekaren ligger ovanför länken.

länkar

Tänk på att det fin-ns en anledning till att länkar är utmär-kta och avvikande, det är meningen att man ska hitta dem – förstå att de går att klicka på!


19

Text-decoration, color, background, font-size och text-align

text-decoration: har flera val (läs mer om det i css text och font-övningarna), men

vill du ta bort understrykningen hos länkar skriver du in[none], vill

du få den att blinka skriver du [blink] och vill du återställa

understrykningen skriver du [underline].

color: ger texten en ny färg, välj mellan webbfärgnamn eller skriv in det

med hexadecimaler [#RRGGBB] (läs mer om det i webbfärger).

background-color: ger bakgrunden till länktexten en ny färg.

background-image: ger dig möjlighet att använda en bild som bakgrund till länktexten,

tänk på att ytan begränsas av radlängd och radhöjd (läs mer om

hur du kan påverka detta i css text och fontövningarna).

font-size: ändrar storleken på bokstäverna (läs mer om hur du kan påverka

detta i css text och fontövningarna).

text-align: ändrar justeringen av texten, normalt är text vänsterjusterad

[left], men du kan även välja högerställd [right], centrerad [center]

och marginaljusterad (dvs rak kant både åt höger och vänster) [justify].

Pseudoklasser

Det finns några speciella selektorer som främst är kopplade till länkar och som inte kan

användas på egen hand, utan måste kopplas till en html-tagg, en id-selektor eller en klass-

selektor. De sätt direkt efter aktuell selektor avskild enbart av ett kolon ( : ). Dessa selektorer

kallas för pseudoklasser och kan inte användas separat

De vi ska titta på här är kopplade till länkarnas olika tillstånd:

:link är en normal obesökt länk, länkens normaltillstånd.

:visited är en besökt länk, visas när man kommer tillbaka till sidan.

:hover är ett tillstånd när muspekaren placeras (svävar) ovanför länken.

:active är ett tillstånd när länken är vald, klickas eller används.

:focus är ett tillstånd när webbläsarens fokus ligger på länken.

När du skriver in pseudo-klasserna i ditt css-dokument, måste de skrivas in i den ordning som

du ser ovan (för att fungera fullt ut) men du behöver inte definiera dem allihop. Det finns

väldigt mycket man kan göra för att lyfta fram sina länkar på en webbsida, men ibland vill

man även att länkarna skall smälta in i en löptext. Pseudo-klasserna [:active]och [:focus]

brukar glömmas bort, men det är lika viktigt som de andra, dels för att underlätta

tillgängligheten och dels för att betona det aktiva tillståndet.

LVHA(f)

Ordning på pseudo-klasserna är viktiga just för hur webb-läsare läser in dem.

Den senare regeln ersätter föregående om det uppstår en konflikt dem emel-lan.

font-size

Användaren kan ändra inställnin-gen för bokstäv-ernas storlek i sin egen webbläsare.

Dessutom kan det skilja mellan olika webbläsare hur stor skillnad det blir.

Ett enkelt fix för detta är att tilldela ett attribut till <html> med css och sätta textstor-leken till 100.01%

Html { font-size:100.01% }

För att sen sätta storleken på text i t.ex <body>.


20

Du kan ge varje tillstånd egna egenskaper, på samma sätt som du kan ge länktaggen

egenskaper. Du kan även skriva en deklaration för <a>-taggen som gäller för sidans alla

länkar. Det skall då vara allmänna värden, som till exempel textens stil (font) eller annat

som inte skall ändras och som gäller för alla tillstånd på sidans länkar. Det vanligaste är att

ändra länktextens färger, ta bort understrykningen och ge länken olika bakgrund beroende

på i vilket tillstånd den befinner sig i.

14. a { font-family: arial, sans-serif;}

15. a:link { background-color: #fff; color: #000;}

16. a:visited { background-color: #eee; color: #333;}

17. a:hover { background-color: #000; color: #fff;}

18. a:active, a:focus { background-color: #333; color: #eee;}

Du skriver enbart in de förändringar som skall göras (textfärg, bakgrundsfärg et.c.).

Du kanske noterar att i exemplet ovan både finns angett en regel för länkar i allmänhet [a]

och länkars normaltillstånd/oanvänd länk [a:link], vilket kan tyckas onödig dubbel-

skrivning. Men det står med där, för att skilja på vilka egenskaper alla länkar skall ha,

oavsett tillstånd och vad som hör till ett aktuellt tillstånd. Vi vill inte att webbläsaren skall

sluta använda vissa egenskaper bara för att länken används, är besökt, osv och vi vill slippa

skriva samma egenskaper (med samma värde) flera gånger. Därför skriver du bara in det

som skall förändras i de olika tillstånden.

Men du behöver även vara medveten om att när du deklarerar en regel för [a] omfattar

den även länkar som fungerar som ankare inom ett dokument (de som inte länkar till en

plats utan till en identitet eller ett namn). Vill man inte att regeln skall omfatta även kapitel

och styckes referenser inom dokumentet, utan enbart länktaggar som används till externa

länkar, kopplar man regeln till [a:link] enbart.

a och a:link

Pseudoklassen [:link] letar efter närvaron av - [href] - i det element som regeln för pseudoklassen är kopplad till. Saknas denna, tolkar webb-läsaren det inte som en länk (:link).


21

A

A B

MENY Steg för steg

Öppna upp både din css-mall och ditt html-dokument i valfri editor. Vi kommer att lägga till länkar och bygga

en meny av dem, menyn skapas delvis med hjälp av css. Du kan om du vill, jobba med menyn i ett separat

projekt/dokument och kopiera in den när du är färdig. Det är bra om du under arbetets gång ofta sparar och

att du ofta testar din webbsida i olika webbläsare, det är inte alltid som det ser lika ut mellan olika

webbläsare. Känner du dig osäker, läser du föregående beskrivning av och korta genomgång om länkning.

1. Länk, lista, navigeringsmeny

Infoga minst en länk i ditt html-dokument, har du inget att länka till kan du som länkmål

skriva in nummertecknet (#) eller en blanrad ( ).

19. <a href=”#” title=” en länk”> Länk </a>

Du kan även placera din länk i en lista, särskilt om du har flera. Fördelen med att lägga länkar

inom en lista är att de blir tydligt uppdelade även om sidformateringen (css) går förlorad eller

stängs av. Man kan man även argumentera för att en samling länkar är just en >> lista << med

länkar, så då blir det även semantiskt rätt när man märker upp sidan.

1. <ul>

2. <li> <a href=”un.html” title=” Una enlace muy interesante” > Un </a>

3. </li>

4. <li> <a href=”dos.html” title=” Una enlace muy interesante” > Dos </a>

5. </li>

6. <li> <a href=”tres.html” title=” Una enlace muy interesante” > Tres </a>

7. </li>

8. </ul>

Nästa steg blir att förändra utseendet hos de här länkarna och listan, så att de ser ut som en

del av sidans grafiska utformning, så det mer är en navigeringsmeny än text. Men redan nu

bör du bestämma dig för hur menyn ska placeras och hur stor yta den får uppta.

Vi ska titta på tre enkla menyer, som skapas på lite olika sätt, den första skapas med enbart

formaterade länkar, de andra två utgår från länkar i en lista. Du kan läsa den första separat

och slutresultatet kommer att bli en färdig meny, eller så kan du hoppa över den och läsa

direkt om de två andra. Utseendet, det visuella slutresultatet kan bli detsamma med bägge

arbetssätten, det som skiljer dem åt är hur de visas när css saknas eller är avstängt.

Känner du dig osäker, kan du med fördel välja den första menyvarianten, då den är enklare

och innehåller färre moment. Vill du i ett senare skede byta till en lista är det följer du bara

stegen för en meny skapad av listor.

href=”#”

En del webbläsare förstår inte använd-andet av tomma län-kar eller länkar som inte leder någon-stans. Som vid använ-dandet av – [#] - som länkmål. Stöter du på problem, hitta på en länk som ser rätt ut, eller länka till något tillfälligt.


22

A 1.1. Meny, av enbart länkar

Du har nu minst en länk, förslagsvis flera, så att du kan se hur de kommer att se ut på din

webbsida. Vi kommer nu att ge länkarna nytt utseende och göra så att de ändras när man

interagerar med dem (använder länken). Du väljer givetvis färg och stil efter vad som passar

just på din sida, jag kommer att göra mina länkar fetstilta, ändra bokstavsstilen(font), ta bort

understrykningen, ändra bokstävernas färg till mörkblå och ge dem en gul bakgrundsfärg.

Öppna upp din stilmall (css-dokument) och lägg till en regelsats för länktaggar <a>:

1. a {

2. font-weight: bold; /* fetstilt text */

3. font-family: Arial, Helvetica, sans-serif; /* ny font */

4. text-decoration: none; /* tar bort understrykning */

5. color: #009; /* mörkblå textfärg */

6. background-color: #ff0; /* gul bakgrundsfärg */

7. }

Spara både ditt html och css-dokument och förhandsgranska resultatet. Du kommer nu att se

hur alla länkar på webbsidan fått det nya utseendet. Du märker även hur länkarna ligger tätt

ihop, sida vid sida och att den gula bakgrunden ligger precis bakom länktexten.

Vi ska därför lägga till utrymme, yta för bakgrunden att breda ut

sig på. Det gör vi med inre margnal, [padding], pröva dig fram till

hur mycket som behövs, här lägger vi till tio pixlars extra höjd

och bredd (fem pixlar från innehållet och utåt).

1. {… padding: 5px; …}

Nu ser det lite bättre ut, vi skulle kunna nöja oss med detta om vi ville, men vi kan även lätt

lägga till fler egenskaper. Kanske vill vi ha en ram runt länken, det gör vi med egenskapen

kantlinje [border]: (border-color, border-style, border-width). Kanske vill du öka avståndet

mellan länkarna (utan att för den skull öka den färgade ytan), det gör du med yttre marginal

[margin]: (margin-top, margin-right, margin-bottom, margin-left).

2. { …

3. border: #009 thin solid;

4. margin-left: 10px;

5. }

Även om storleken på länkknapparna styrs av länktextens längd, har vi kommit en lång väg

mot att skapa oss en webbsidesmeny, nästa steg blir att lägga till interaktivitet.


23

:link, :visited, :hover, :active, :focus.

Lägg till pseudoklasser för länktaggen, kom ihåg ordningen och att enbart skriva in vad som

skall ändras (t.ex. bakrundsfärg och passande textfärg). Har flera pseudoklasser samma

värde, kan du med fördel bunta ihop dem, kom ihåg att separera dem med komma [ , ].

6. a:visited { color: #449; background-color: #880;}

7. a:hover{ color: #490; background-color: #940;}

8. a:active, a:focus{ color: #6f0; background-color: #f60;}

Här, de tre olika tillstånd som vi angett ovan. Först en besökt

länk (visited), sedan en med muspekaren över (hover) och

sist en länk som är i fokus/är aktiv (active/focus). Vi kan

även se länktiteln (title) när muspekaren ligger över länken.

Man kan med fördel samla alla länkarna som skall utgöra länkmenyn inom en <div>-tagg,

dels för att man då kan ge hela menyn en bakgrundsfärg, kantlinje och så vidare, men även

för att avskilja dem från annat innehåll på sidan.

Vill man använda sig av fler länkar, men inte att också dessa skall få samma formatering som

en menylänk, gör vi det lättast på följande vis.

Samla alla menylänkar inom en <div>-tagg och ge den en unik identitet [id], till exempel

meny *id=”meny”+. Koppla sedan id-selektorn till länkar som ligger innanför div-taggen

genom att skriva in id-namnet som en del av css-regeln för menytaggarna. Du åstadkommer

detta genom att framför varje länkregel även skriver id-namnet följt av ett mellanslag.

Regeln läses då av webbläsaren som: länk inom namngivet element; och inga andra länkar på

sidan ände innanför div-taggen påverkas av css-reglerna.

1. <div id=”meny>

2. <a href=”#” title=”Länk” > Länktext </a>

3. </div>

Du kan även passa på att ge div-taggen som omger länkarna egna egenskaper.

1. #meny { … } /* egenskaper till den omslutande div-taggen */

2. #meny a { … } /* länkar innanför ett element med id=meny */

3. #meny a:visited { …} /* besökt länk*/

4. #meny a:hover{ …} /* lank när muspekaren “hänger” ovanför */

5. #meny a:active, #meny a:focus { … } /* flera med samma värden */

css

html


24

B1 1.2. Vertikal meny av lista med länkar

Du har nu minst en länk [a], förslagsvis flera, placerade i en lista. Det spelar ingen roll om det

är en numrerad (ordered list [ol]) eller onumrerad punktlista (unordered list [ul]), för vi

kommer att ta bort listpunktmarkeringarna. Vi kommer även att ge länkar och lista nytt

utseende, samt göra så att de ändras när man interagerar med dem (använder länken).

Fördelen med att lägga länkar inom en lista är att de blir tydligt uppdelade även om

sidformateringen (css) går förlorad eller stängs av. Man kan man även argumentera för att en

samling länkar är just en >> lista << med länkar, så då blir det även semantiskt rätt när man

märker upp sidan.

Länk i lista

Länk utan lista

När css formateringen går förlorad syns länkar i en lista tydligare, än länkar lagd efter var-

andra, därför underlättar du sidnavigeringen även för dem som inte kan se formateringen.

9. <ul>

10. <li> <a href=”un.html” title=” Una enlace muy interesante” > Un </a> </li>

11. <li> <a href=”dos.html” title=” Una enlace muy interesante” > Dos </a> </li>

12. <li> <a href=”tres.html” title=” Una enlace muy interesante” > Tres </a> </li>

13. </ul>

Nästa steg blir att förändra utseendet hos de här länkarna och listan, så att de ser ut som en

del av sidans grafiska utformning, så det mer är en navigeringsmeny än text.

Vi kommer att utnyttja att listor är blocknivå-element och forma listans utseende och storlek,

på så vis behöver vi inte lägga till ytterligare behållare (sidavdelare, som t.ex en div-tagg).

Ge list-elementet en unik identitet, förslagsvis något som beskriver dess funktion. I det här

fallet kommer vi att använda den här list-taggen som en yttre ram till allt menyinnehåll, jag

ger listytan därför identiteten meny *id=”meny”+.

9. <ul id=”meny” > …

När vi sedan formaterar listan (som nu har namnet [meny]), listposterna [li] och länkar [a]

i listan, kopplar vi ihop dem på följande vis:

1. #meny { … } /* egenskaper till den omslutande list-taggen */

2. #meny li { … } /* egenskaper till list-posternas yta */

3. #meny li a { …} /* egenskaper till länkar inom en listpost */


25

Formatera listan

Det finns några få listspecifika egenskaper du kan ändra hos listor med CSS:

1. ul {

2. list-style-type: xxx; /* listposternas inledande numrering eller symbol */

3. list-style-position: xxx; /* placera symbolen/numret innanför eller utanför */

4. list-style-image: url( xxx ); /* byta ut listpostens inledande numrering/symbol mot en bild */

5. }

Du kan ändra på listposternas inledande numrering eller symbol, placera symbolen/numret

innanför eller utanför listan eller byta ut listpostens inledande numrering/symbol mot en

bild. Utöver detta är det intressant att veta att både listan i sig själv (ol och ul) och

listposterna (li) är block-element, så man kan påverka deras utseende på samma sätt som

boxar i övrigt (höjd, bredd, bakgrund, kantlinje, marginaler, …).

Vi att använda oss av en ospecifierad lista (ul) men ändra gärna tillfälligt till en numrerad lista (ol) för att pröva de olika numreringsalternativen.

Ospecifierad lista: Pröva skriv list-style-type:

disc (för en lista med fyllda punkter) circle (för en lista med cirklar) square (för en lista med fyrkanter) none (för en lista utan inledande symbol på listposten)

Specifierad lista: Pröva skriv list-style-type:

1. decimal eller decimal-leading-zero (för en vanlig numrerad lista)

2. upper-latin, upper-alpha

3. lower-latin eller lower-alpha (för en lista ordnad med bokstäver: a b c …)

4. lower-roman eller upper-roman (för en lista romerskt numrerad I II III IV…)

5. armenian, georgian eller lower-greek etc (för språk specifik numrering)

6. none (för en lista utan inledande symbol på listposten)

Ta bort inledande symbol genom att specificera värdet [none] till [list-style-type].

1. #meny {

2. list-style-type: none; /* listposternas inledande numrering eller symbol */

3. }

<ul>

<ol>


26

Färg och form

Vårt nästa steg blir att ge listytan (den yta listan utgör) bakgrund och form, vi börjar med

bakgrundsfärg [background-color]. Du kan givetvis även använda dig av bakgrundsbilder,

men här håller vi oss nu till att välja bakgrundsfärg.

1. #meny {

2. background-color: #f90; /* vi tilldelar listan boxegenskapen för bakgrund */

3. }

Block-element upptar hela sidbredden om man inte anger en begränsning, vi ska därför ange

en fast bredd till listan [width]. Vi ska även lägga till lite inre marginal [padding], så att inte

texten ligger så nära ytans ytterkanter.

1. …

2. width: 50px; /* vi tilldelar listan boxegenskapen för bredd */

3. padding: 5px; /* vi anger inre marginal */

4. …

Vi har nu tre ytor som vi kan påverka utseendet på, ytan

för hela listan, ytan för varje listpost/listrad och ytan för

varje länk. Varje yta kan tilldelas egen bakgrund, egna

kantlinjer, egna marginaler osv …

1. #meny {background-color: #000; } /* bakgrund till menyn (listan) */

2. #meny li {background-color: #000; } /* bakgrund till listpost/listrad */

3. #meny li a {background-color: #000;} /* bakgrund till länktexten/länkyta */

Det är med detta vi ska skapa vår navigationsmeny, men vägen dit kan variera, liksom

slutresultatet. Det finns så mycket som du kan förändra, så kombinationsmöjligheterna är

många, bara val av färg, kantlinje och bakgrund ger dig mer än nog. Tänk också på att du kan

ge ytans olika sidor (top, right, bottom och left) egna värden, både vad gäller marginaler och

kantlinjer. Vilket gör att du lätt kan skapa klassiska ”knappar”, som du ”kan trycka ner”, likväl

som grafiskt enkla ”understrykta länkar”, som ändrar färg på linjen vid interaktion med

länken och grafiskt utsmyckade länkar som ändrar färg och form.

Formatera länktexten


27

Vi ska nu göra de nödvändiga förändringar som behövs för att förvandla länkarna från vanliga

länkar till menyknappar. Det vi börjar med är att definiera hur länkarna ska se ut i allmänhet.

Vi vill inte att våra länkar skall ha det typiska utseende och beteende som man förknippar

med länkar. Som att länkar är blå och understrukna, så därför tar vi bort understrykningen

med deklarationen [text-decoration: none;] och definierar en ny länkfärg med deklarationen

[color: #000;] (givetvis väljer du en färg som passar, här valde vi svart).

1. #meny li a {

2. text-decoration:none; /* tar bort understrykning */

3. color: #000; /* definierar textens färg */

…

Vi kan även definiera vilken stil (typsnitt, font) vi vill ha på länktexten med deklarationen

[font-family: Helvetica, Arial, sans-serif;] även om det inte direkt hör till länkars förinställda

beteende.

4. …

5. font-family: Helvetica, Arial, sans-serif; /* anger stil på bokstäver */

Samt blockegenskaper som bakgrundsfärg, marginaler och kantlinjer.

6. … background-color: #fff; /* bakgrund till länktexten/länkyta */ …

/* m.fl. men dock inte höjd och bredd,

läs nedan [Formatera länkarnas elementegenskaper] */

7. }

Här placerar du även deklarationer för att centrera texten [text-align], om du betonar den på

något vis (t.ex fetstilt eller kursivt) [font-weight] och [font-style].

:link, :visited, :hover, :active, :focus.

Lägg till pseudoklasser för länktaggen, kom ihåg ordningen och att enbart skriva in vad som

skall ändras (t.ex. bakrundsfärg och passande textfärg). Har flera pseudoklasser samma

värde, kan du med fördel bunta ihop dem, kom ihåg att separera dem med komma [ , ].

4. #meny li a:visited { color: #449; background-color: #880;}

5. #meny li a:hover{ color: #490; background-color: #940;}

6. #meny li a:active, #meny li a:focus{ color: #6f0; background-color: #f60; }

Formatera listposterna/listraderna


28

B2

Du kan sluta läsa det här och hoppa till nästa stycke om du vill, jag ska förklara varför!

När du använder dig av länkar, så är länken klickbar, inget konstigt med det, men länken

avgör även vilken yta som är klickbar. I de flesta fall är det samma yta som texten utgör, finns

det inre marginal [padding], utökas den klickbara ytan. Detsamma gäller för kantlinjer

[border], men inte för yttre marginal [margin]. Utökar du ytan av länkposten, med till

exempel höjd och bredd, eller med inre marginal [padding], kommer det att finnas en stor

yta runt länken som inte är klickbar (yta som tillhör listan, inte länken).

Därför kan det vara på sin plats att ändra på länktaggens utseende och storlek istället för

listpostens och låta listpostens yta bestämmas av dess innehåll (dvs länken). Listposter/rader

är block-element, så de kommer att uppta hela listans bredd och får sin höjd av eventuellt

innehåll. Anger man inget värde för bakgrund, är den genomskinligt och visar listytan.

Men vill du formatera listposten/raden, kan du ge den alla boxegenskaper, som höjd, bredd,

bakgrund, kantlinje och marginaler.

1. #meny li {

2. background-color: #fff; /* bakgrund till länktexten/länkyta */

3. /* m.fl. */

4. }

Formatera länkarnas elementegenskaper

Som vi redan nämnt tidigare, kan du ge länkar de flesta box-egenskaper som block-element

kan ha, förutom att definiera höjd och bredd. Därför ska vi ändra länkarna från att vara

inline-element, till att vara och bete sig som ett block-element.

1. #meny li a {

2. display: block;

3. … }

Formatera nu länken som du önskar, med alla box-egenskaper, även höjd och bredd, men läs

även om element som gjorts flytande med [float] eller gjorts om till [inline-block] nedan.

Så där! Nu var vi nästan färdiga, nu ska det bara placeras på sidan.

1.3. Horisontell meny av lista med länkar


29

Bara ett kort ord om att göra en horisontell meny, har du gjort en meny av enbart länkar

lägger de sig på rad (eftersom länken är ett inline-element), men är länkarna placerade i en

lista lägger de sig på hög (under varandra, på ny rad) eftersom listposten/raden är ett block-

element. Detsamma gäller om du ändrat länkarna från att vara inline- till att vara block-

element med attributet [display] i css-dokumentet. Vi kommer därför att använda oss av

[display] även för att placera länkarna på rad bredvid varandra igen.

Men det första vi behöver göra är att se till så att bredden på list-elementet ([ol] eller [ul]) är

nog bred för att lägga dem på rad. Ändra [width] till lämplig bredd (bredden på länkarna+

marginaler+ eventuell bredd på listposterna/raderna och dess marginaler) eller ange värdet

[auto], anger du inget värde för bredd utgår webbläsare från att värdet [auto] ska användas.

Nästa steg är att placera länkarna så att de ligger på rad, och för att göra det behöver vi dels

veta hur vi lagt upp vårt tidigare arbete och dels ändra block-elementen så att de inte staplas

ovan och under varandra. Jag kommer att utgå från att du lagt länkarna i en lista och att du

sedan ändrat länkar till att bete sig som block-element. Utseendet på länkmenyn utgår nu

alltså från dina inställningar för länkytan (bredd, höjd, kantlinjer, färger, bakgrunder och

marginaler) och från eventuella inställningar för listytan ([ol] eller [ul] och [li]).

Inline

Nu tar vi bort blockegenskapen från listposterna ([li]) så att de inte längre staplas på varan-

dra. Du kommer att märka att länkarna inte lägger sig på rad, men det beror på att de

fortfarande är inställda att bete sig som block-element. Lägg till följande till ditt css-

dokument:

1. #meny li { display: inline; }

Tar du bort display-deklarationen från länktaggen, eller ändrar den från värdet [block] till

[inline], läggs länkarna på rad, men då tappar du också den boxformatering du tidigare lagt

till. Vad vi behöver är en lösning där vi har kvar block-egenskaperna, samtidigt som vi kan

lägga dem i rad som inline-element.

Inline-block och float

Vad vi behöver är block element som behåller sina blockegenskaper, men placeras på sidan

som inline-element. Det finns ett sådant element-tillstånd som kallas inline-block.

1. #meny li a { display: inline-block; }

Så där, nu när du förhandsgranskar bör de lagt sig vackert på rad. Om det inte gör så, beror

det på din webbläsare, pröva med en annan webbläsare som följer webbstandarden. Det är

den här egenskapen som vi skulle vilja använda, men så länge den inte stödjs av alla

webbläsare, får vi använda oss av en annan metod.

Det andra alternativ vi då har är att göra elementet flytande med egenskapen [float].

Nackdelen här är att även det inte alltid fungerar fullt ut i alla webbläsare. Övriga inline-

inline-block

Fungerar i de flesta webbläsare, om ele-mentet som man ändrar beteende hos tidigare varit ett in-line-element. Vilket gör att det passar att användas till länkar. Var bara beredd på att det inte alltid ser lika ut mellan olika webbläsare

float

Fungerar inte lika i alla webbläsare, men är ändå en väldigt an-vändbar metod. Ett element som görs flytande, om-vandlas till ett block-element (med allt det innebär), men lägger sig utanför inline och blockflödet. De kan


30

…

<ul id="meny">

<li><a href="#"> Home </a></li>

<li><a href="#"> Un </a></li>

<li><a href="#"> Dos </a></li>

<li><a href="#"> Tres </a></li>

<li><a href="#"> Away </a></li>

</ul>

…

#meny {border-bottom: 1px solid black; padding-left: 10px; font:

bold 12px Verdana; list-style-type: none; min-width: 400px;

height:28px;}

#meny li {display: inline;}

#meny li a {display: inline-block; text-decoration: none; text-

align:center; width: 50px; padding: 7px 8px; margin-left:

2px; color: white; background-color: #414141;}

#meny li a:link {} #meny li a:visited {} #meny li a:hover {} … osv

element flödar runt det flytande-elementet, vilket gör att det passar bra till bilder som ligger

inne i en text. Man kan göra alla element flytande. Man kan välja om det flyter mot vänster

sida eller höger sida och det flytande elementet utgår från det yttre element (föräldra-

element) den ligger inom. Men den tappar sin position i inline-flödet (och dokument-flödet),

övriga element placeras runt objektet (ungefär på samma sätt som figursättning/text-wrap

fungerar).

Men här innebär det att länken inte längre räknas som en del av listposten/radens innehåll

och om man inte angivit höjd [height] för det elementet kollapsar den ihop till en höjd av noll

[0]. På samma sätt påverkas även hela listelementet, om listpost/raderna inte har höjd,

kollapsar den ner till en höjd av noll [0]. Det är givetvis en egenhet du kan dra nytta av, nu

när du vet det. Ange även alltid bredd [width] för flytande element.

1. #meny li a { float: left; }

Nu när du förhandsgranskar, läggs länkarna på rad (om listpost/raderna är inställda på att

vara inline, så att även list-elementen läggs på rad). Använd [margin] och [padding], för att

ytterligare kontrollera mellanrum och luft runt länktexterna; samt eventuellt [padding] och

[margin] på listpost/raderna.

Exempel - Enkel flikmeny, med horisontell linje nedtill.

Den här menyn byggs upp an en lista med fem länkar, länkarna har gjorts om till block-element,

listposterna gjorts om till inline-element (display). Sedan har länkarna även gjorts flytande (float),

de flyter åt vänster. Listelementet, har tilldelats en kantlinje i nederkant (border-bottom) och en

given höjd (height, som motsvarar länkarnas höjd). Dessutom, har listelementet en inre marginal

(padding-left) på vänstra sidan, vilket knuffar länkarna inåt på linjen. Länkarna, har en yttre

vänstermarginal (margin-left) om två pixlar, vilket gör att länkarna får ett litet mellanrum. Till

menyn är även definierat de olika pseudoklasserna (link, visited, hover, active, focus) för de olika

tillstånd som länkarna kan ha. Variation…

Låt länkarna flyta åt höger, ha en kantlinje upptill, andra färger.

Ta bort float och ange länkarna som inline-block istället.

2. Positionering av

H

T

M

L

o

c

h

C

S

S

e

x

e

m

p

e

l


31

C

D

menyn

Nu är det dags att välja en plats för din meny, om du inte redan valt en. Jag kommer i mina

exempel placera menyn dels på sidan om [satsytan] och dels under [rubriken], två rätt

vanliga placeringar. Men det är också läge för att tala lite om dokumentflödet och positioner.

Dokumentflödet, är det sätt som webbläsare tolkar och placerar ut innehåll på en webbsida,

hur sidan visas i webbläsaren. Men även i vilken ordning en webbsida läses upp av talsyntes.

Dokumentflödet

Dokumentflödet, är egentligen två olika flöden, som tillsammans utgör ett gemensamt

dokumentflöde. Det är block-nivå-flödet [block] och text-nivå-flödet [inline]. Blocknivå-

element, bildar egna enheter, ofta med en radbrytning före och efter elementet. Textnivå-

element, lägger sig på rad efter varandra, på samma nivå och utan radbrytningar. Även om

du kan ändra detta beteende, är den generella uppmaningen att man inte bör göra så.

Element visas på sidan i den ordning de skrivs in i html-dokumentet och efterföljande

element placeras (utifrån sin sort, block eller inline) på första lediga plats i ordningen.

[ Dokumentflödet ]

Inget blocknivå-element kan placeras bredvid ett annat element (då de knuffas ner en rad)

om man inte ändrar elementets beteende (med t.ex. float, display eller position). Alla

textnivå element, lägger sig på rad efter varandra. Men även de utgör en gemensam yta, en

tillfällig box som består av hela raden, vars höjd utgår från radens högsta element.

Textnivå-boxar av olika höjd kan inte

existera samtidigt på samma rad och

man kan inte skapa textnivå-boxar.

Placeras något före ”sidyta”, knuffar det ner övrigt innehåll.

Placeras något efter ”sidyta”, hamnar den under/efter den ytan.


32

Position, inom dokumentflödet

Position (static)

På samma sätt som alla element har en yta, har alla element en position även om den inte är

definierad. Detta kan skrivas ut som [position: static;], men behöver inte skrivas eftersom

det är standardvärdet för alla element (inline, som block). Ett element som har positionen

static, kan anses som ”opositionerad” (även om de rent tekniskt faktiskt innehar en position).

Det finns tre övriga positioneringstillstånd som element kan ha/tilldelas: [relative], [absolute]

och [fixed]. Vi ska kortfattat gå igenom dem här nedanför, för att deklarera position, behöver

man i regel bara definiera egenskapen [position] och ett av ovanstående värden. Men för att

kontrollera hur elementet flyttar, lägger du även till något av eller flera av följande värden:

[top], [right], [bottom] och [left], positivt värde är från angiven kant/sida och inåt. Anges

inget värde för dem, anses de ha värdet [auto], anges ett numreriskt värde, är det

dominerande över (används istället för och/eller påverkar) det automatiska värdet. Vi börjar

med det som mest liknar static:

Position (relative)

Positionering med egenskapen [relative] placerar elementet relativt till den plats den har i

dokumentflödet, det vill säga den plats den skulle ha om den var opositionerad. Nu kan man

förflytta elementet från den platsen, men utrymmet i dokumentflödet förblir ”upptaget”. Det

vill säga att elementet lämnar en tom yta efter sig. Du måste ange värden för minst en av

top, right, bottom eller left, för att du ska se en positionsförändring; annars ligger elementet

kvar på sin position i dokumentflödet (som om den var av värdet static).

En annan sak som händer är att det flyttade elementet, lägger sig ovanför de andra

elementen på webbsidan. Du kan ändra detta genom att ange ett värde för [z-index] på

elementet, positiva värden är längre upp/fram, negativa längre ner/bak.

{

Position: relative;

Top: 10px;

Left: 25px;

}


33

Position, utanför dokumentflödet

Position (absolute)

När du positionera ett element med egenskapen [absolute] händer flera saker som skiljer sig

radikalt från hur element placerar sig enligt det normala dokumentflödet. Det som tydligast

är märkbart är hur elementet tappar sin plats i dokumentflödet, dessutom fylls utrymmet av

vad som är placerat efter i ordningen (då den platsen nu är ”ledig”).

Nästa tydliga förändring är hur elementet krymper ner till storleken av sitt innehåll (höjd och

bredd blir detsamma som innehållet). Därför måste du lägga till egenskaperna [height] och

[width] om du vill kontrollera storleken.

Men den viktigaste förändringen är att det absolut placerade elementet tilldelas en unik

lagerposition [z-index] som skiljer sig från alla övriga element. Det innebär att den lätt kan

läggas över andra element, men det innebär även att om man har flera absoluta element,

lägger de sig automatiskt på var sitt lager. De placeras i den ordning som de är inskrivna i

html-dokumentet, det element som skrivits in senare/längre ner, får ett högre lagervärde (z-

index). Du kan ändra detta genom att ange ett värde för [z-index] på elementet, positiva

värden är längre upp/fram, negativa längre ner/bak.

Absolut position

Eftersom ett AP-element (absolut positionerat element) inte är en del av dokumentflödet,

har den en absolut position som utgår från horisontella och vertikala koordinater.

Men från vad utgår dessa koordinater? AP-elementet får sin position från sitt förhållande till

sin närmaste föräldra-elements position, men om föräldern är opositionerad (static) utgår

den från första element i hierarkin som är positionerad (dvs allt annat än static). Finns inget

positionerat element, utgår den från <body> (egentligen <html>-taggen), vilket i proncip blir

det samma som webbläsarfönstret.

Relativt positionerat element används ofta som förälder till ett absolut positionerat för

att styra dess position, då ett relativt positionerat element kan bete sig som och placera

sig som de som placerats efter dokumentflödet.

Du styr AP-elementets position med [top], [right], [bottom] eller [left], positivt värde är från

angiven kant/sida och inåt. Anges inget värde för dem, anses de ha värdet [auto], anges ett

numreriskt värde, är det dominerande över (används istället för och/eller påverkar) det

automatiska värdet. Om det blir en konflikt mellan värden (t.ex left-right; top-bottom), måste

en av dessa prioriteras, standarden anger att det är vänstra [left] och övre [top] som vinner.

{

Position: absolute;

Top: 10px;

Left: 25px;

}

Absolut och

odefinierat

värde ...

Saknas värde för top, right, bottom och left, anses de ha värdet [auto], men vad innebär det i praktiken? Jo att det absolut positionerade ele-mentet är placerat i förhållande till den position den skulle ha, om den inte tag-its ut ur dokument-flödet. Det innebär även att det ligger ovanför annat inne-håll som flyttats upp för att fylla tomrum-met efter elementet. Anger du ett värde för top, right, bottom eller left, tappar det absolut positioner-ade elementet den här egenskapen.


34

Position (fixed)

Positionering med egenskapen [fixed] är en variant av absolut positionering, med den

skillnaden att fixerade element alltid utgår från webbläsarfönstret. Var försiktig så att inte

fixerade element placeras utan för den synliga ytan (till exempel med väldigt höga värden

eller negativa värden). Fixerade element påverkar aldrig webbläsaren att använda sig av

rullisten, även om man kan använda sig av rullister inom ett fixerat element.

Om man flyttar på webbsidans innehåll med hjälp av en rullist, kvarstår det fixerade

elementet; medan resten av innehållet förflyttas.

Vissa äldre webbläsare kan inte läsa fixerade element, för dem passar AP-element bättre.

Flytande position

(Float)

När vi talar om position kan vi inte undvika att tala om flytande position. Även om egen-

skapen [float] inte är en del av (attributet) position, så är det också ett sätt att positionera

innehåll. Det element som görs flytande tappar sin position i dokumentflödet, men samtidigt

placeras det flytande elementet i förhållande till flödet. Det kan göras flytande åt höger

[right] eller åt vänster[left]. Element som placerats före det flytande elementet påverkas

inte, men alla som kommer efter flödar/flyter runt elementet. Det flytande elementet

omvandlas till ett block-element (med allt det innebär) när det gjorts flytande, så man bör

alltid ange bredd [width] på flytande element (förutom bilder). Flytande element lägger sig

på rad efter varandra, utefter vilket utrymme som finns tillgängligt.

I exemplet ovan är det flytande elementet placerat först före alla andra element, sedan efter rubriken<h1> och sist efter texten.

{

Position: fixed;

Top: 10px;

Left: 25px;

}


35

Flytande element och yta

En aspekt av flytande element som lätt glöms bort är hur de påverkar de element som flyter

runt det. Det märks tydligast hos block-elemet som tilldelats bakgrund eller andra

blockegenskaper som marginaler och kantlinjer. (inline) Innehållet i de ytor som omsluter det

flytande elementet reagerar på ytan hos flytande elementets, genom att knuffas undan. Alla

marginaler, kantlinjer och bakgrunder till den yta som omsluter det undanknuffade

innehållet kommer fortfarande reagera som att det flytande elementet inte är där.

Då det flytande elementet har avlägsnats från flödet, men fortfarande knuffar undan inline-innehåll,

breder bakgrunder, kantlinjer och marginaler hos block-elementen ut sig under det flytande elementet.

(clear)

Att flytande element funkar så att det man placerar efter (i html-dokumentet) omsluter det

flytande elementet istället för att det flytande elementet flyter upp genom ovanliggande

inline-element har en enkel förklaring. Annars flyter alla element med en flytande position

upp längst upp på webbsidan, vilket inte är önskvärt. För att om det vore så, skulle det kräva

att man blev tvungen att lägga till en massa extrakod, för att få de flytande elementen att

stanna på plats. Nu är det istället bara automatiskt att underliggande element flyttas uppåt

och omsluter det flytande elementet.

Men om du inte vill att det som ligger efter (nedanför) det flytande elementet skall flyttas

upp och omsluta runt elementet, kan du använda attributet [clear]. Attributet kopplas till ett

av de efterliggande elementen och stoppar då upp flödet (uppflyttandet av element).

Clear kan ha följande fyra (fem)värden: right, left, both och none.

Värdet right gör så att elementet lägger sig under den yttersta kanten av ett flytande

element som har värdet [ clear: right; ] som kommer före i html-dokumentet.

Värdet left gör så att elementet lägger sig under den yttersta kanten av ett flytande

element som har värdet [ clear: left; ] som kommer före i html-dokumentet.

Värdet both gör så att elementet lägger sig under den yttersta kanten av alla flytande

element som kommer före i html-dokumentet.

Värdet none, är detsamma som att inte ange ett clear-värde alls.

Clear kan även ha det femte värdet: Inherited, som innebär att den ärver egenskapen från

ett föräldraelement och får då det värde det elementet har för attributet clear.


36

C 2.1. Meny under rubriken

Jag börjar med att beskriva vad som är lättast att åstadkomma, för här ska vi helt enkelt bara

låta dokumentflödet göra sitt jobb, vi lägger inte till några större förändringar. Jag utgår nu

från att du har en horisontell meny, då den passar bäst att placera under sidrubriken.

Placera din ”lista med länkar” efter <h1> (rubrik) men före <div>-taggen (satsytan).

1. <div id=”sidyta”>

2. <h1 …>Rubrik </h1>

3. <ul …>

4. <li><a …>Lnk txt </a></li> …

5. </ul>

6. <div …> Satsyta </div>

7. <div …> Sidfot </div>

8. </div>

Ja, det är så enkelt för att få dem i rätt ordning, nu läser webbläsaren in dem i den ordning

som de kommer att visas på sidan (om du inte på något annat sätt, till exempel positionering,

ändrat dokumentflödet).

Jag föreslår att du tar dig en liten titt igen på illustrationen över dokumentflödet i början av

kapitlet som en liten repetition innan du går vidare.


37

D1 2.2. Meny bredvid sidinnehållet (absolut)

Lite svårare uppgift är att placera menyn på sidan, som alltid när man vill placera block-

element bredvid varandra. Vi ska titta på två varianter, i den första använder vi oss av absolut

position i kombination med relativt placerad förälder (det omslutande elementet). I den

andra tittar vi närmare på en lösning med att göra menyn flytande.

Grundproblemet dem mellan är detsamma, när vi har en vertikal meny (lista) knuffar den ner

efterföljande innehåll, då menyn upptar hela raden (det naturliga beteendet för block-

element). Men vi vill att delar av innehållet (satsytan) skall ligga bredvid menyn istället.

Vi ändrar därför menyn [#meny] från att vara opositionerad (static) till något vi kan

kontrollera, i det här fallet använder vi oss av absolut position.

1. #meny { position: absolut; }

Menyn tappar nu sin plats i dokumentflödet och underliggande element flyttar upp i dess

ställe. Men det blir inte riktigt som vi vill ha det, nu så ligger menyn över allt annat innehåll

och skymmer eventuellt innehåll.


38

Menyn placerar sig dock fint utifrån sin tidigare plats i dokumentflödet. Vilket snabbt

kommer att ändras om du lägger till ett numreriskt värde för positionerings attributen top,

right, bottom eller left; även om värdet är noll [0].

Vi kan avhjälpa detta beteende genom att ge närmaste förälder (omslutande element) en

annan position än dess naturliga (static). Samtidigt vill vi inte ta den ur dokumentflödet; vi

gör det omslutande elementet därför till relativt positionerad.

1. #sidyta { position: relativ; }

Sådär, nu kan vi sätta igång och placera ut vår meny. Skriver vi in negativa värden (för top,

right, bottom och left) placeras den utanför sitt föräldra elements ytterkanter, positiva

värden flyttar den inåt över ytan. Prova med att ge menyn ett negativt vänstervärde (left)

som är lika stort som menyn är bred; vips så har menyn placerats bredvid innehållet.

1. #meny { position: absolute; left: -70px; }


39

D2

Meny bredvid sidinnehållet (float)

I den här varianten gör vi menyn till ett flytande element och låter det andra sidinnehållet

flyta på plats, vi kan lätt låta den flyta åt vänster eller höger. Se till att menyn är placerad före

det innehåll som skall läggas sida vid sida med menyn.

1. < … id=”rubrik> … </h1>

2. <ul id=meny”> … </ul>

3. <div id=”satsyta”> … </div>

4. <div id=”sidfot”> … </div>

Sen gör vi menyn flytande (se till så du inte även har angett absolut position till menyn).

1. #meny { … float: left; … }

Efterföljande element flyttar nu upp och omsluter/fyller snyggt upp högersidan, men

bakgrunden lägger sig även bakom menyn.

Men vad händer om det man vill ska ligga jäms med menyn upptar lika stor yta som menyn i

sig gör? Vi prövar genom att ta bort all text från den ytan vi kallat [satsyta].

Flytande element problem

När du börjar anvä-nda dig av flytande element i din design, kommer du snabbt märka att det kan dyka upp underliga skillnader mellan oli-ka webbläsare, jag har valt att undvikia att ta upp det här.

En sådan sak kan vara att bakgrunds-bilder och även text försvinner plötsligt, trots att de borde vara där, för att sedan dyka upp igen när man laddar om sidan.

Du undviker det här problemet genom att ge det försvinnande elementet en posit-ion, förslagsvis [posit-ion:relative;].

Det kan även vara problem med hur marginaler runt ett block-element beter sig brevid ett flyt-ande element, hur det kan bli oförut-sedda skillnader i hur mycket elementet knuffas ifrån det flyt-ande elementet.

Lösningen här är att sätta marginalerna på de flytande ele-menten, inte de statiska.

Ytterligare ett prob-lem kan uppstå när man har flera flyt-ande element efter varandra. Dels kan de lägga sig på bredd, fastän det inte finns utrymme för det, eller att de fortsätter ut utanför ett om-slutande element.

Prova att ge det omslutande elemen-tet en given vidd [width]. Kanske inte riktigt vad vi kan kalla önskvärt resultat.

Det som är placerat före det

flytande elementet påverkas

inte.

Det som är placerat efter

påverkas


40

Vi ska se till att sidfoten aldrig flyttar upp, utan alltid stannar nedanför det flytande elementet.

Vi gör det genom att lägga till egenskapen [clear] till sidfoten, med värdet [left] eller [both].

1. #sidfot { … clear: left; … }

Nu lägger sig sidfoten snyggt under det flytande elementet!

Men [satsyta]:n fyller inte tommrummet, då den fortfarande får sin storlek utifrån sitt innehåll.

Därför ska vi lägga till en egenskap för höjd [min-height] på den ytan, så att den alltid minst

fyller upp en viss yta. Här väljer jag ett numreriskt tal som motsvarar höjden på menyn. Den

här höjdegenskapen hindrar inte heller att ytan expanderar, den ger bara ett minsta värde…

1. #satsyta { … min-height: 140px; … } /* samma som menyn */

Om du inte vill att bakgrunden till det omslutande elementet skall krypa in under det flytande

elementet lägger du till marginal (i det här fallet [margin-left])på det uppflyttade elementet.

Sådärja! Nu är vi färdiga … nu ska vi bara fylla sidan med innehåll!

Education

Vi skapar en webbsida