Css layouts, en kort repris

312 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
312
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Tips! Lägg till dina egna talaranteckningar här.
  • Tips! Lägg till dina egna talaranteckningar här.
  • Tips! Lägg till dina egna talaranteckningar här.
  • Tips! Lägg till dina egna talaranteckningar här.
  • Css layouts, en kort repris

    1. 1. CSS layouts, en kort reprisIdag:• Html kod och stylesheets• Css selektorer• Document flow• Boxmodellen• Float
    2. 2. 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 ochanalysera denna.Bra att ha denna genomgång i fall man råkar glömma hur man gör.
    3. 3. CSS layouts Hä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
    4. 4. Först undersöker vi htmlkoden• 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. 5. Html utan style sheetDen stil som används på html-sidan finns i en annan fil ochlä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 Isamma mapp som din html-sida. Filnamnet måste innehållafiländelsen .cssVad händer om man tar bort länken? all layout finns i css- filen!
    6. 6. Css-layout
    7. 7. Cssfilen - Hur läser man? Regler:
    8. 8. Css-selektorerMed en css-selektor väljer man ut vilka html-element som skall haen viss style.När är de bättre att använda css-klasser än id?
    9. 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 fallsä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. 10. Css-filen (#wrapper)Syftet med <div> taggen som har id=”wrapper” är att centrerasidans innehåll. Kom ihåg att alla andra <div> taggar ligger inuti”wrapper”.Med selektorn #wrapper väljer man ut <div> - taggen som harid=”wrapper”Här måste man bestämma bredden på det innehåll man vill visapå sidan. Bredden skall vara mindre än upplösningen påanvändarnas skärmar som ofta är 1024px. I detta fall valdeswidth: 922pxSidan centreras med margin : 0 auto;Detta är kortkod för att skriva, margin-left : auto; margin-right :auto
    11. 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ården höjd som krävs för att visa innehållet. Bredden bestäms avtillgängligt utrymme dvs. den blir så bred som den kan bli ominte bredd anges.Kom ihåg att <div> taggar måste fyllas med lite text för att manskall få reda på hur de ser ut på sidan.
    12. 12. Html - document flowEn html sida är uppbyggd av element som följer efter varandra itur 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änderradbrytning 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 elementså kommer det att lägga sig omedelbart efter detta. Till inline-element hör exempelvis bilder <img> och länkar <a>. Ett inlineelement tar bara upp den plats som behövs och ger ingaradbrytningar.
    13. 13. Css display:Man kan få ett element att byta hur det visas med css egenskapendisplay. Se exemplet nedan där <p> som är ett block element fås attvisas 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. 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. 15. Css-filen (#leftcolumn)<div> taggen med id=”leftcolumn” är placerad under headerlängst till vänster.Här brukar man ofta hitta en navigeringsmeny eller i alla fall någralänkar.Man använder float: left för att få <div> taggen att placera siglängst till vänster.Man får inte glömma att sätta bredden här. I vanliga fall ca enfemtedel av bredden inuti wrapper.
    16. 16. Css – float:Med float är det möjligt attplacera boxar till högereller vänster i dettillgängliga utrymmet.Texten flödar runt boxarna.(text wrap)Floats kan användasför css-layout som ivårt exempel.
    17. 17. Css-filen (#rightcolumn)<div> taggen med id=”rightcolumn” är placerad under headerlängst till vänster. Här brukar sidans innehåll finnasMan använder float: right för att få <div> taggen att placera siglängst till höger.Här kan man få trixa lite innan man får bredden rätt. Vid för storbredd så läggs boxen på ny rad. För liten så ser inte marginalernasnygga ut.
    18. 18. #footerTill sist har vi #footer som är placerad längst ned på sidan. Härbrukar 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årfinnas varken till vänster eller höger.
    19. 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. 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.phphttp://www.webdesignskolan.se/css_position/css_position.php#boxgrundhttp://www.mandalatv.net/itp/drivebys/css/http://css-tricks.com/all-about-floats/
    21. 21. 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 problem6. 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.

    ×