Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HT17 - DA156A - Layout med HTML & CSS

395 views

Published on

HT17 - DA156A - Layout med HTML & CSS

Published in: Education
  • Be the first to comment

  • Be the first to like this

HT17 - DA156A - Layout med HTML & CSS

  1. 1. Layout med CSS
  2. 2. Dagens föreläsning • Snabb repetition • Element för positionering • Positionering av element • Static • Relative • Absolute • Fixed • Layout med CSS • Exempel, exempel & exempel
  3. 3. Frågor kring det vi gått igenom hittils? • HTML • Doctype <!doctype html> • Teckenuppsättning <meta charset=”utf-8”> • Taggar <h1>, <p>, <ul>, <li>, <i>, <b> • Tabeller <table><tr><td></td></tr></table> • Formulär <form action=”#” method=”get”> • CSS • Selektorer h1, .class, #id • Egenskaper font-size:12px; color:red;
  4. 4. Översikt HTML-dokument Vad innehåller sidan? Metadata om sidan Sidans teckenkodning Sidans titel Sidans innehåll HTML, rotelementet
  5. 5. Länkar Var länken lederLänk-element Länkens namn Extern länk Länk inom webbplatsen Intern länk
  6. 6. Tabeller I webbläsaren
  7. 7. Formulär
  8. 8. CSS • Att formge en webbplats • Olika klädsel till samma innehåll • Hur hittar man det man vill ändra på?
  9. 9. Boxar Total bredd för en box är: Content (width) + Padding + Border. Margin är sedan marginalen från boxen
  10. 10. Utvecklingsverktyget i Chrome (F12)
  11. 11. Elementet <div> “The <div> tag defines a division or a section in an HTML document.”
  12. 12. Positionera saker
  13. 13. Positionering • Visar elementen i den ordning de skrivs i HTML-koden • Static (standard) • Relative • Visar elementen i relation till förälder-elementet eller dokumentet • Absolute • Fixed
  14. 14. Position: static • Är standard-positionen för HTML-element • Elementen visas i den ordning som de skrivs i (det som står först i HTML-dokumentet visas först) • Egenskaper som ej används med position: static • left, right, top, bottom • z-index
  15. 15. Position: relative • Elementen visas i den ordning som de skrivs i (det som står först i HTML-dokumentet visas först) • Egenskaper som kan användas med position: relative • left, right, top, bottom • Avstånd från elementets normala plats på webbsidan • z-index • Avgör om elementet ska ligga över/under andra element
  16. 16. Position: absolute • Specificerar ett elements position relativt mot • Förälder-elementet (som har ”position: relative”) • Eller om detta ej finns, till dokumentet
  17. 17. Position: fixed • Specificerar ett elements position relativt mot • Hela dokumentet • Positionen påverkas inte när man skrollar, utan ligger ”fastklistrad” på samma plats på skärmen
  18. 18. Att lägga element bredvid varandra • Egenskapen ”float” • Gör så att man kan placera block-element bredvid varandra • Float:left; Flyttar elementet till vänster • Float:right; Flyttar elementet till höger • Gäller • postion: static • position: relative
  19. 19. https://www.w3schools.com/cssref/css_selectors.asp
  20. 20. Demo positionering
  21. 21. https://developer.mozilla.org/en-US/docs/Web/HTML/Element
  22. 22. Andra, ”bättre”, element för layout <header> Definierar ett sidhuvud för dokument/artikel <nav> Definierar en navigation <main> Definierar huvudinnehåll i ett dokument <section> Definierar en sektion i ett dokument/artikel <aside> Definierar innehåll som skiljer sig (t.ex. ”sidebar”) <footer> Definierar en sidfot för dokument/artikel
  23. 23. Hur skapar man en layout?
  24. 24. Vi behöver alltså • Sidhuvud <header> • Navigation <nav> • Innehåll <main> • Sidfot <footer>
  25. 25. Kan vara bra att ha… • En box (<div>) som omsluter hela sidan.
  26. 26. box-sizing: content-box;
  27. 27. box-sizing: border-box;
  28. 28. Demo layout
  29. 29. Egenskapen: box-sizing http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

×