1. CSS layouts, en kort repris
Idag:
• Html kod och stylesheets
• Css selektorer
• Document flow
• Boxmodellen
• Float
2. CSS layouts
Ta en design från nätet
Kolla 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.
4. Först undersöker vi html
koden
• Taggarna som ger sidans layout finns i body.
• <div> taggar används att skapa layouten.
• En div används som ”wrapper” och innehåller alla de andra.
• Alla div-taggarna har unikt id.
• Länkat stylesheet.
5. Html utan style sheet
Den 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" />
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
Vad händer om man tar bort länken?
all layout
finns i css-
filen!
8. Css-selektorer
Med 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?
9. Css-filen (start)
I början av css-filen skrivs generella regler som skall gälla
överallt.
Med selektorn * väljer man ut alla element på sidan och i detta fall
sätts marginal och padding till noll.
Med selektorn body väljer man ut allt innehåll i taggen <body>.
Här sätts font, storlek och färg på texten.
10. Css-filen (#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”.
Med selektorn #wrapper väljer man ut <div> - taggen som har
id=”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
Sidan centreras med margin : 0 auto;
Detta är kortkod för att skriva, margin-left : auto; margin-right :
auto
11. 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.
12. Html - document flow
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.
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.
13. 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.
14. Boxmodel –
margin:, padding:, border:
Allt som du kan ställa in: 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.
En box med noll marginal
som innehåller ett
element med marginal
kan ibland få child-
elementets marginal.
15. 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.
16. 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.
17. Css-filen (#rightcolumn)
<div> taggen med id=”rightcolumn” är placerad under header
längst till vänster. Här brukar sidans innehåll finnas
Man använder float: right för att få <div> taggen att placera sig
längst till höger.
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.
18. #footer
Till sist har vi #footer som är placerad längst ned på sidan. Här
brukar man hitta loggor och copyright meddelanden.
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.
19. 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?
20. 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.php
http://www.webdesignskolan.se/css_position/css_position.php#boxgr
und
http://www.mandalatv.net/itp/drivebys/css/
http://css-tricks.com/all-about-floats/
21. Uppgifter
Hä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.
