Vi skapar en webbsida

  • 1,164 views
Uploaded on

En enkel genomgång hur du kan skapa en enkel webbsidesdesign med hjälp av html och grundläggande css. Går igenom från grunden, utgår från att du skriver koden själv. Kräver minimal, men viss …

En enkel genomgång hur du kan skapa en enkel webbsidesdesign med hjälp av html och grundläggande css. Går igenom från grunden, utgår från att du skriver koden själv. Kräver minimal, men viss förkunskap.

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,164
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HandledningVi 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
  • 2. 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
  • 3. Vi skapar en webbsidaVi skapar en webbsida! - med CSSMålsättningV 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ågraspeciallö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örberedelseSkapa 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 dujobbar 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, skillnadenmellan extern och intern är inte så stor, så du kan lätta följa med i resonemangen ändå. Villdu jobba med en extern mall, döp den då till min-css-sida.css och spara den i samma mappsom min-css-sida.html. 3
  • 4. Vi skapar en webbsida 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
  • 5. Vi skapar en webbsidaBakgrundNär du skapar webbsidor med html styr webb-läsarens inställningar hur sidan visas. Stil ochstorlek på bokstäver, visas utifrån de ins-tällningar besökaren valt eller de standard-inställningar den aktuella webbläsaren har. Medattribut som skrivs in i html-taggen, kan manförändra webbsidans utseende. Men vill mansenare ändra sidans utseende, måste man gå inpå alla ställen där man skrivit in attribut, särskiltbesvärligt är detta om man vill uppdatera flerawebbsidors utseende.Vad vill vi uppnåTanken nu är att vi skall använda oss av enmetod där vi skriver webbsidans utseende medcss. Det hjälper oss att separera sidinnehåll ochutseende. 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 separatfil, 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 ellerhela webbsidor. Man kan bestämma placeringen av element och kontrollera elementens i lageregenskaper. 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 grundprincipernaoch 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 jagrekommenderar är de kopplade till boxmodellen (höjd, vidd, positionering, marginaler och kant), dekopplade 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örolika plattformar, ska det anpassas för att visas på en skärm, en handdator, en mobiltelefon, via dinspelkonsol 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 varjeanpassning. Tänk då att vi har en hel webbplats, med flera interna sidor. Med hjälp av CSS-mallar kanvi istället skapa flera utseenden/anpassningar som formar innehållet istället för att skapa flera sidormed samma innehåll. 5
  • 6. Vi skapar en webbsida 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
  • 7. Vi skapar en webbsida 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 &xhtmlDet 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åkethtml och det den del av html-dokumentet som visas i webbläsaren eller i css-mallen.pågår en ständigutveckling av det. Vi kommer att jobba med en extern css-mall, där alla css-deklarationer skrivs in, vi kommerDet 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 somsom ä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änneteckenför XHTML är att Radbrytningar i html-kod är främst till för att få god översikt, det spelar ingen roll om manstrukturens utse-ende styrs av pre- skriver html-taggarna på rad efter varandra. Webbläsaren tolkar innehåll och uppmärkningsentationen; man korrekt ändå, under förutsättning att man skrivit in den rätt.använder såledesalltid 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ärhtml till att byggastrukturen. För att du berättar vad de olika elementen är och var de börjar och slutar. Öppna en html-mall, ellerdärutöver få en skapa en ny sida från grunden, jobba med html-dokumentet i valfri editor.websajt att kunnaimpleenteras  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 doctypeför att få den attfölja en webb- 1. <!DOCTYPE … >standard.”Ett html-doku- 2. <html … >ment ska deklar-eras som ett 3. <head>text/html , medanett xhtml doku-ment skall deklar- 4. <title>Din sidtitel </title>eras som antin-gen applica- 5. </head>tion/xml ellerapplication/xhtm 6. <body>l+xml.Läs mer: 7. <!-- Sidans innehåll här --> 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
  • 8. Vi skapar en webbsida 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
  • 9. Vi skapar en webbsida3. 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. <!-- här mellan placeras alla andra enheter, som sidhuvud, sidfot, satsyta och meny --> 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. <!-- placer något mellan så att inte div-taggen kollapsar -->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
  • 10. Vi skapar en webbsida 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. <!-- 4. Css { … } 5. --> 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
  • 11. Vi skapar en webbsida 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 testardin 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
  • 12. Vi skapar en webbsida 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
  • 13. Vi skapar en webbsida 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
  • 14. Vi skapar en webbsida 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 { 9. background-color: #...; 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
  • 15. Vi skapar en webbsida6. 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 { 16. background-color: #...; 17. color: #...; 18. min-height: 200px; 19. padding: 10px 50px; 20. } 15
  • 16. Vi skapar en webbsida 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
  • 17. Vi skapar en webbsida 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
  • 18. Vi skapar en webbsida 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änkarTänk på att det fin- Vanligast förekommande förändring av länktexter är textfärgen. Visa att det är en länkns en anledning till genom att göra länktexten blå och göra den understruken, visa att en länk redan äratt 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 dendet är meningen att som röd. Webbläsaren kan även visa att länken är markerad/vald/i focus genom att geman 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
  • 19. Vi skapar en webbsida 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 regelnersätter föregående :hover är ett tillstånd när muspekaren placeras (svävar) ovanför länken.om det uppstår enkonflikt 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
  • 20. Vi skapar en webbsida 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 detPseudoklassen [:link] som skall förändras i de olika tillstånden.letar efter närvaronav - [href] - i detelement som regeln Men du behöver även vara medveten om att när du deklarerar en regel för [a] omfattarför pseudoklassen är den även länkar som fungerar som ankare inom ett dokument (de som inte länkar till enkopplad till. Saknasdenna, tolkar webb- plats utan till en identitet eller ett namn). Vill man inte att regeln skall omfatta även kapitelläsaren det inte som och styckes referenser inom dokumentet, utan enbart länktaggar som används till externaen länk (:link). länkar, kopplar man regeln till [a:link] enbart. 20
  • 21. Vi skapar en webbsida 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äsarefö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 – [#] - somlänkmål. Stöter du på 6. <li> <a href=”tres.html” title=” Una enlace muy interesante” > Tres </a>problem, hitta på enlä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
  • 22. Vi skapar en webbsida 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
  • 23. Vi skapar en webbsida :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
  • 24. Vi skapar en webbsida 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
  • 25. Vi skapar en webbsida 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
  • 26. Vi skapar en webbsida 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
  • 27. Vi skapar en webbsidaVi ska nu göra de nödvändiga förändringar som behövs för att förvandla länkarna från vanligalä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örknipparmed länkar. Som att länkar är blå och understrukna, så därför tar vi bort understrykningenmed 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älldabeteende. 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 somskall ändras (t.ex. bakrundsfärg och passande textfärg). Har flera pseudoklasser sammavä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
  • 28. Vi skapar en webbsida 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
  • 29. Vi skapar en webbsida 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 flestawebbläsare, om ele-mentet som manändrar beteende hos 1. #meny li a { display: inline-block; }tidigare varit ett in-line-element. Vilketgö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å, beroranvä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 äratt det inte alltid ser den här egenskapen som vi skulle vilja använda, men så länge den inte stödjs av allalika ut mellan olikawebblä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 ialla 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 somgörs flytande, om- 29vandlas till ett block-element (med allt detinnebär), men läggersig utanför inline och
  • 30. Vi skapar en webbsida 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
  • 31. Vi skapar en webbsida menyn Nu är det dags att välja en plats för din meny, om du inte redan valt en. Jag kommer i minaC 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
  • 32. Vi skapar en webbsida 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
  • 33. Vi skapar en webbsida 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 positionSaknas 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 havärdet [auto], men har den en absolut position som utgår från horisontella och vertikala koordinater.vad innebär det ipraktiken? Men från vad utgår dessa koordinater? AP-elementet får sin position från sitt förhållande tillJo att det absolut sin närmaste föräldra-elements position, men om föräldern är opositionerad (static) utgårpositionerade ele- den från första element i hierarkin som är positionerad (dvs allt annat än static). Finns ingetmentet är placerat iförhållande till den positionerat element, utgår den från <body> (egentligen <html>-taggen), vilket i proncip blirposition den skulleha, 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 liggerovanför annat inne- att styra dess position, då ett relativt positionerat element kan bete sig som och placerahå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ånAnger du ett värde angiven kant/sida och inåt. Anges inget värde för dem, anses de ha värdet [auto], anges ettför top, right, bottomeller left, tappar det numreriskt värde, är det dominerande över (används istället för och/eller påverkar) detabsolut positioner-ade elementet den automatiska värdet. Om det blir en konflikt mellan värden (t.ex left-right; top-bottom), måstehär egenskapen. en av dessa prioriteras, standarden anger att det är vänstra [left] och övre [top] som vinner. 33
  • 34. Vi skapar en webbsida 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
  • 35. Vi skapar en webbsida 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
  • 36. Vi skapar en webbsida 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
  • 37. Vi skapar en webbsidaD1 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
  • 38. Vi skapar en webbsida 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
  • 39. Vi skapar en webbsida 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 detelement i din design, flytande elementet påverkaskommer du snabbtmärka att det kan 2. <ul id=meny”> … </ul> inte.dyka upp underligaskillnader mellan oli- 3. <div id=”satsyta”> … </div> Det som är placerat efterka webbläsare, jaghar valt att undvikia påverkasatt ta upp det här. 4. <div id=”sidfot”> … </div>En sådan sak kanvara att bakgrunds- Sen gör vi menyn flytande (se till så du inte även har angett absolut position till menyn).bilder och även textförsvinner plötsligt,trots att de borde 1. #meny { … float: left; … }vara där, för attsedan dyka upp igennär man laddar om Efterföljande element flyttar nu upp och omsluter/fyller snyggt upp högersidan, mensidan. bakgrunden lägger sig även bakom menyn.Du undviker det härproblemet genom attge det försvinnandeelementet en posit-ion, förslagsvis [posit-ion:relative;].Det kan även varaproblem med hurmarginaler runt ettblock-element betersig brevid ett flyt-ande element, hurdet kan bli oförut-sedda skillnader i hurmycket elementetknuffas ifrån det flyt-ande elementet.Lösningen här är attsätta marginalernapå de flytande ele- Men vad händer om det man vill ska ligga jäms med menyn upptar lika stor yta som menyn imenten, inte destatiska. 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ärman har flera flyt-ande element eftervarandra. Dels kan delägga sig på bredd,fastän det inte finnsutrymme för det,eller att de fortsätterut utanför ett om-slutande element.Prova att ge detomslutande elemen-tet en given vidd[width]. Kanske inte riktigt vad vi kan kalla önskvärt resultat. 39
  • 40. Vi skapar en webbsida 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! 40