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

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

2


Vi skapar en webbsida!
- med CSS

Målsättning

V 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.

3


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.

4


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.

5


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!

6

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 .

html 1. Inledningsvis startar vi med ett tomt html-dokument
&xhtml
Det finns flera
I handledningen, kommer bara aktuella förändringar skrivas ut (i några fall, anges även om-
versioner av upp- givande element i svagare färg). Du placerar förändringarna flera mellan <body>-taggarna,
märkningsspråket
html och det den del av html-dokumentet som visas i webbläsaren eller i css-mallen.
pågår en ständig
utveckling av det. Vi kommer att jobba med en extern css-mall, där alla css-deklarationer skrivs in, vi kommer
Det finns dessut-
om en striktare att växelvis ändra i de båda dokumenten. Det är bra om du ofta sparar och förhandsgranskar,
variant av html, gärna i olika webbläsare för bästa resultat, under arbetets gång. Det är inte alltid som
som är en kombi-
nation av html webbsidan ser lika ut i olika webbläsare och på olika plattformar, allt beroende på webb-
och xml – xhtml.
läsaren och på användarens personliga inställningar.
” Ett kännetecken
för XHTML är att Radbrytningar i html-kod är främst till för att få god översikt, det spelar ingen roll om man
strukturens utse-
ende styrs av pre- skriver html-taggarna på rad efter varandra. Webbläsaren tolkar innehåll och uppmärkning
sentationen; man korrekt ändå, under förutsättning att man skrivit in den rätt.
använder således
alltid css till pre-
sentationen och Du kan även ha för vana att lägga in anteckningar i ditt html-dokument och din css-mall, där
html till att bygga
strukturen. För att
du berättar vad de olika elementen är och var de börjar och slutar. Öppna en html-mall, eller
därutöver få en skapa en ny sida från grunden, jobba med html-dokumentet i valfri editor.
websajt att kunna
impleenteras  Glöm inte att ge sidan en lämplig titel <title>.
crossbrowser vali-
derar vi den ut- Din sida bör se ut något liknande detta:
ifrån rätt doctype
för att få den att
följa en webb- 1. <!DOCTYPE … >
standard.”

Ett html-doku- 2. <html … >
ment ska deklar-
eras som ett 3. <head>
text/html , medan
ett xhtml doku-
ment skall deklar-
4. <title>Din sidtitel </title>
eras som antin-
gen applica- 5. </head>
tion/xml eller
application/xhtm
6. <body>
l+xml.

Läs mer: 7. 
 HTML-grund
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..

7


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.

8

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.

9

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…

10


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;}

11


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.

12


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.

13


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].

14


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. }

15


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…

16


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

<a> 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> .

17


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.
länkar
Tänk på att det fin- Vanligast förekommande förändring av länktexter är textfärgen. Visa att det är en länk
ns en anledning till genom att göra länktexten blå och göra den understruken, visa att en länk redan är
att länkar är utmär-
kta och avvikande, använd genom att göra den lila och medan länken är aktiv/klickas på/används visa den
det är meningen att som röd. Webbläsaren kan även visa att länken är markerad/vald/i focus genom att ge
man ska hitta dem
– förstå att de går länken en ram av prickar, länkar kan få en ny färg när muspekaren ligger ovanför länken.
att klicka på!

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; … }

18


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

font-size
text-decoration: har flera val (läs mer om det i css text och font-övningarna), men
Användaren kan
ändra inställnin-
vill du ta bort understrykningen hos länkar skriver du in[none], vill
gen för bokstäv- du få den att blinka skriver du [blink] och vill du återställa
ernas storlek i sin
egen webbläsare. understrykningen skriver du [underline].

Dessutom kan det color: ger texten en ny färg, välj mellan webbfärgnamn eller skriv in det
skilja mellan olika
webbläsare hur med hexadecimaler [#RRGGBB] (läs mer om det i webbfärger).
stor skillnad det
blir.
background-color: ger bakgrunden till länktexten en ny färg.
Ett enkelt fix för
detta är att tilldela background-image: ger dig möjlighet att använda en bild som bakgrund till länktexten,
ett attribut till
<html> med css tänk på att ytan begränsas av radlängd och radhöjd (läs mer om
och sätta textstor- hur du kan påverka detta i css text och fontövningarna).
leken till 100.01%

Html { font-size: ändrar storleken på bokstäverna (läs mer om hur du kan påverka
font-size:100.01%
} detta i css text och fontövningarna).
För att sen sätta
storleken på text i text-align: ändrar justeringen av texten, normalt är text vänsterjusterad
t.ex <body>.
[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

LVHA(f) De vi ska titta på här är kopplade till länkarnas olika tillstånd:
Ordning på pseudo-
klasserna är viktiga :link är en normal obesökt länk, länkens normaltillstånd.
just för hur webb-
läsare läser in dem. :visited är en besökt länk, visas när man kommer tillbaka till sidan.
Den senare regeln
ersätter föregående :hover är ett tillstånd när muspekaren placeras (svävar) ovanför länken.
om det uppstår en
konflikt dem emel-
lan.
: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.

19


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
a och a:link skriva samma egenskaper (med samma värde) flera gånger. Därför skriver du bara in det
Pseudoklassen [:link] som skall förändras i de olika tillstånden.
letar efter närvaron
av - [href] - i det
element som regeln
Men du behöver även vara medveten om att när du deklarerar en regel för [a] omfattar
för pseudoklassen är den även länkar som fungerar som ankare inom ett dokument (de som inte länkar till en
kopplad till. Saknas
denna, tolkar webbplats utan till en identitet eller ett namn). Vill man inte att regeln skall omfatta även kapitel
läsaren det inte som och styckes referenser inom dokumentet, utan enbart länktaggar som används till externa
en länk (:link).
länkar, kopplar man regeln till [a:link] enbart.

20


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

A  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>

A
B  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>
href=”#”
2. <li> <a href=”un.html” title=” Una enlace muy interesante” > Un </a>
En del webbläsare
förstår inte använd- 3. </li>
andet av tomma län-
kar eller länkar som 4. <li> <a href=”dos.html” title=” Una enlace muy interesante” > Dos </a>
inte leder någon-
stans. Som vid använ- 5. </li>
dandet av – [#] - som
länkmål. Stöter du på
6. <li> <a href=”tres.html” title=” Una enlace muy interesante” > Tres </a>
problem, hitta på en
länk som ser rätt ut,
eller länka till något
7. </li>
tillfälligt.
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.

21


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.

22


: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.

html 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.

css 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 */

23


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 */

24


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.

<ul> 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)

<ol> 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. }

25


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

26


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

27


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.

B2 1.3. Horisontell meny av lista med länkar

28


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

inline-block 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.
Fungerar i de flesta
webbläsare, om ele-
mentet som man
ändrar beteende hos
1. #meny li a { display: inline-block; }
tidigare varit ett in-
line-element. Vilket
gör att det passar att Så där, nu när du förhandsgranskar bör de lagt sig vackert på rad. Om det inte gör så, beror
användas till länkar.
Var bara beredd på
det på din webbläsare, pröva med en annan webbläsare som följer webbstandarden. Det är
att det inte alltid ser den här egenskapen som vi skulle vilja använda, men så länge den inte stödjs av alla
lika ut mellan olika
webbläsare webbläsare, får vi använda oss av en annan metod.
float
Det andra alternativ vi då har är att göra elementet flytande med egenskapen [float].
Fungerar inte lika i
alla webbläsare, men
Nackdelen här är att även det inte alltid fungerar fullt ut i alla webbläsare. Övriga inline-
är ändå en väldigt an-
vändbar metod.
Ett element som
görs flytande, om- 29
vandlas till ett block-
element (med allt det
innebär), men lägger
sig utanför inline och


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
H (padding-left) på vänstra sidan, vilket knuffar länkarna inåt på linjen. Länkarna, har en yttre
T
M
vänstermarginal (margin-left) om två pixlar, vilket gör att länkarna får ett litet mellanrum. Till
L menyn är även definierat de olika pseudoklasserna (link, visited, hover, active, focus) för de olika
o
tillstånd som länkarna kan ha. Variation…
c
h  Låt länkarna flyta åt höger, ha en kantlinje upptill, andra färger.
C  Ta bort float och ange länkarna som inline-block istället.
S
S … #meny {border-bottom: 1px solid black; padding-left: 10px; font:
<ul id="meny"> bold 12px Verdana; list-style-type: none; min-width: 400px;
e <li><a href="#"> Home </a></li> height:28px;}
x <li><a href="#"> Un </a></li>
e #meny li {display: inline;}
<li><a href="#"> Dos </a></li>
m
<li><a href="#"> Tres </a></li> #meny li a {display: inline-block; text-decoration: none; text-
p
e
<li><a href="#"> Away </a></li> align:center; width: 50px; padding: 7px 8px; margin-left:
l </ul> 2px; color: white; background-color: #414141;}
…
#meny li a:link {} #meny li a:visited {} #meny li a:hover {} … osv
2. Positionering av

30


menyn
Nu är det dags att välja en plats för din meny, om du inte redan valt en. Jag kommer i mina
C 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.
D 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.
Placeras något före ”sidyta”, knuffar det ner övrigt innehåll.

[ Dokumentflödet ]

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

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.

31


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).

{
Position: relative;
Top: 10px;
Left: 25px;
}

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.

32


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”).

{
Position: absolute;
Top: 10px;
Left: 25px;
}

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
Absolut och
värden är längre upp/fram, negativa längre ner/bak.
odefinierat
värde ... Absolut position
Saknas värde för top,
right, bottom och Eftersom ett AP-element (absolut positionerat element) inte är en del av dokumentflödet,
left, anses de ha
värdet [auto], men
har den en absolut position som utgår från horisontella och vertikala koordinater.
vad innebär det i
praktiken? Men från vad utgår dessa koordinater? AP-elementet får sin position från sitt förhållande till
Jo att det absolut sin närmaste föräldra-elements position, men om föräldern är opositionerad (static) utgår
positionerade ele- den från första element i hierarkin som är positionerad (dvs allt annat än static). Finns inget
mentet är placerat i
förhållande till den positionerat element, utgår den från <body> (egentligen <html>-taggen), vilket i proncip blir
position den skulle
ha, om den inte tag-
det samma som webbläsarfönstret.
its ut ur dokument-
flödet. Det innebär Relativt positionerat element används ofta som förälder till ett absolut positionerat för
även att det ligger
ovanför annat inne- att styra dess position, då ett relativt positionerat element kan bete sig som och placera
håll som flyttats upp sig som de som placerats efter dokumentflödet.
för att fylla tomrum-
met efter elementet.
Du styr AP-elementets position med [top], [right], [bottom] eller [left], positivt värde är från
Anger du ett värde angiven kant/sida och inåt. Anges inget värde för dem, anses de ha värdet [auto], anges ett
för top, right, bottom
eller left, tappar det numreriskt värde, är det dominerande över (används istället för och/eller påverkar) det
absolut positioner-
ade elementet den
automatiska värdet. Om det blir en konflikt mellan värden (t.ex left-right; top-bottom), måste
här egenskapen. en av dessa prioriteras, standarden anger att det är vänstra [left] och övre [top] som vinner.

33


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.

{
Position: fixed;
Top: 10px;
Left: 25px;
}

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.

34


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.

35


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.

36


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.

37


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; }

38


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
Flytande
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
element
problem det innehåll som skall läggas sida vid sida med menyn.
När du börjar anvä-
nda dig av flytande 1. < … id=”rubrik> … </h1> Det som är placerat före det
element i din design, flytande elementet påverkas
kommer du snabbt
märka att det kan
2. <ul id=meny”> … </ul> inte.
dyka upp underliga
skillnader mellan oli- 3. <div id=”satsyta”> … </div> Det som är placerat efter
ka webbläsare, jag
har valt att undvikia påverkas
att ta upp det här. 4. <div id=”sidfot”> … </div>

En sådan sak kan
vara att bakgrunds- Sen gör vi menyn flytande (se till så du inte även har angett absolut position till menyn).
bilder och även text
försvinner plötsligt,
trots att de borde 1. #meny { … float: left; … }
vara där, för att
sedan dyka upp igen
när man laddar om Efterföljande element flyttar nu upp och omsluter/fyller snyggt upp högersidan, men
sidan. bakgrunden lägger sig även bakom menyn.
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- Men vad händer om det man vill ska ligga jäms med menyn upptar lika stor yta som menyn i
menten, inte de
statiska. sig gör? Vi prövar genom att ta bort all text från den ytan vi kallat [satsyta].
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.

39

Vi skapar en webbsida

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

Similar a Vi skapar en webbsida

Similar a Vi skapar en webbsida (20)

Vi skapar en webbsida