21
CSS layouts, en kort repris Idag: Html kod och stylesheets Css selektorer Document flow Boxmodellen Float

Css layouts, en kort repris

Embed Size (px)

Citation preview

Page 1: Css layouts, en kort  repris

CSS layouts, en kort reprisIdag:• Html kod och stylesheets• Css selektorer• Document flow• Boxmodellen• Float

Page 2: Css layouts, en kort  repris

CSS layoutsTa en design från nätetKolla t.ex. (http://www.code-sucks.com/css%20layouts/)

Klipp och Klistra och Vips har du en sida..

Men hur fungerar koden? – Hur fungerar en enkel css-layout? Idag skall vi undersöka detta genom att hämta kod på nätet och analysera denna.

Bra att ha denna genomgång i fall man råkar glömma hur man gör.

Page 3: Css layouts, en kort  repris

CSS layoutsHämta design från,http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/2-column-css-layouts/fw-12-2-col/

header + footer + 2 column, margins

Page 4: Css layouts, en kort  repris

Först undersöker vi html koden

• En div används som ”wrapper” och innehåller alla de andra.

• Taggarna som ger sidans layout finns i body.

• Alla div-taggarna har unikt id.

• Länkat stylesheet.

• <div> taggar används att skapa layouten.

Page 5: Css layouts, en kort  repris

Html utan style sheetDen stil som används på html-sidan finns i en annan fil och länkas i <head> taggen.<link rel="stylesheet" type="text/css" href="main.css" />

all layout finns i css-

filen!

Vad händer om man tar bort länken?

Attributet href talar om var stil (css) filen finns. I detta fall I samma mapp som din html-sida. Filnamnet måste innehålla filändelsen .css

Page 6: Css layouts, en kort  repris

Css-layout

Page 7: Css layouts, en kort  repris

Cssfilen - Hur läser man?

Regler:

Page 8: Css layouts, en kort  repris

Css-selektorerMed en css-selektor väljer man ut vilka html-element som skall ha en viss style.

När är de bättre att använda css-klasser än id?

Page 9: Css layouts, en kort  repris

Css-filen (start)

Med selektorn body väljer man ut allt innehåll i taggen <body>. Här sätts font, storlek och färg på texten.

Med selektorn * väljer man ut alla element på sidan och i detta fall sätts marginal och padding till noll.

I början av css-filen skrivs generella regler som skall gälla överallt.

Page 10: Css layouts, en kort  repris

Css-filen (#wrapper)

Sidan centreras med margin : 0 auto; Detta är kortkod för att skriva, margin-left : auto; margin-right : auto

Med selektorn #wrapper väljer man ut <div> - taggen som har id=”wrapper”

Syftet med <div> taggen som har id=”wrapper” är att centrera sidans innehåll. Kom ihåg att alla andra <div> taggar ligger inuti ”wrapper”.

Här måste man bestämma bredden på det innehåll man vill visa på sidan. Bredden skall vara mindre än upplösningen på användarnas skärmar som ofta är 1024px. I detta fall valdes width: 922px

Page 11: Css layouts, en kort  repris

Css-filen (#header)<div> taggen med id=”header” är placerad längst upp inuti wrapper.

I denna <div> brukar man lägga sidans titel med <h1> eller <h2> taggar.En <div> är av typen block vilket innebär att den automatiskt får den höjd som krävs för att visa innehållet. Bredden bestäms av tillgängligt utrymme dvs. den blir så bred som den kan bli om inte bredd anges. Kom ihåg att <div> taggar måste fyllas med lite text för att man skall få reda på hur de ser ut på sidan.

Page 12: Css layouts, en kort  repris

Html - document flow

Till blockelement räknas de element som staplas på varandra "by default", dvs utan att du behöver ändra på några inställningar. Använder automatiskt allt tillgängligt utrymme och använder radbrytning före och efter.

Ett element som är inline är med den svenska översättningen "på rad". Om ett inline-element placeras direkt efter ett annat element så kommer det att lägga sig omedelbart efter detta. Till inline-element hör exempelvis bilder <img> och länkar <a>. Ett inline element tar bara upp den plats som behövs och ger inga radbrytningar.

En html sida är uppbyggd av element som följer efter varandra i tur och ordning. Det är detta som man menar med document flow. Elementen på sidan kan vara av typen inline eller block.

Page 13: Css layouts, en kort  repris

Css display: Man kan få ett element att byta hur det visas med css egenskapen display. Se exemplet nedan där <p> som är ett block element fås att visas som ett inline element.

p { display: inline;}

De viktigaste värden för display: är block, inline och inline-block. Inline-block är en specialare som gör att flera blocks kan läggas på samma rad utan radbrytningar.

Page 14: Css layouts, en kort  repris

Boxmodel – margin:, padding:, border:

Att tänka på:

Collapsable margins = Om två boxar med marginaler finns bredvid varandra adderas inte marginalerna. I stället används den största.

Allt som du kan ställa in:

En box med noll marginal som innehåller ett element med marginal kan ibland få child-elementets marginal.

Page 15: Css layouts, en kort  repris

Css-filen (#leftcolumn)<div> taggen med id=”leftcolumn” är placerad under header längst till vänster.

Här brukar man ofta hitta en navigeringsmeny eller i alla fall några länkar.Man använder float: left för att få <div> taggen att placera sig längst till vänster.

Man får inte glömma att sätta bredden här. I vanliga fall ca en femtedel av bredden inuti wrapper.

Page 16: Css layouts, en kort  repris

Css – float:

Med float är det möjligt att placera boxar till höger eller vänster i det tillgängliga utrymmet. Texten flödar runt boxarna. (text wrap)

Floats kan användas för css-layout som i vårt exempel.

Page 17: Css layouts, en kort  repris

Css-filen (#rightcolumn)

Man använder float: right för att få <div> taggen att placera sig längst till höger.

<div> taggen med id=”rightcolumn” är placerad under header längst till vänster. Här brukar sidans innehåll finnas

Här kan man få trixa lite innan man får bredden rätt. Vid för stor bredd så läggs boxen på ny rad. För liten så ser inte marginalerna snygga ut.

Page 18: Css layouts, en kort  repris

#footer

För att vara säker på att #footer hamnar längst ner på sidan så används clear: both vilket betyder att inga andra element får finnas varken till vänster eller höger.

Till sist har vi #footer som är placerad längst ned på sidan. Här brukar man hitta loggor och copyright meddelanden.

Page 19: Css layouts, en kort  repris

Att fundera på:Finns det några problem med sätta viss höjd och bredd på elementen i layouten? (fixed-with, fixed-height)

I så fall vilka?

Page 20: Css layouts, en kort  repris

Att läsa:

Mallar för layout:http://www.code-sucks.com/css%20layouts/http://www.maxdesign.com.au/articles/css-layouts/

Teori:http://www.webdesignskolan.se/css-layout/css_layout.phphttp://www.webdesignskolan.se/css_position/css_position.php#boxgrundhttp://www.mandalatv.net/itp/drivebys/css/http://css-tricks.com/all-about-floats/

Page 21: Css layouts, en kort  repris

UppgifterHämta hem en valfri css-mall från http://www.code-sucks.com/css%20layouts/

1. Läs igenom koden för html och css. 2. Finns det onödiga css properties att ta bort? Ta bort dem

och testa vad som händer!3. Lägg till 5 länkar (<a>) på rad i en horisontell box

(header kanske)4. Lägg till 5 länkar (<a>) under varandra i en vertikal box

(nav kanske)5. Vad händer om man fyller någon box med för mycket text

så att all text inte får plats. Hur kan man fixa detta problem

6. Klura ut hur man kan lägga fyra nya boxar på rad inuti t.ex. content boxen. (se bild)

7. Klura ut hur man kan lägga åtta boxar i två rader med fyra boxar i varje rad.