HT16 - DA156A - CSS, layout
- 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. 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. Översikt HTML-dokument Vad innehåller sidan? Metadata om sidan Sidans teckenkodning Sidans titel Sidans innehåll HTML, rotelementet
- 5. Länkar Var länken lederLänk-element Länkens namn Extern länk Länk inom webbplatsen Intern länk
- 7. Formulär
- 8. CSS • Att formge en webbplats • Olika klädsel till samma innehåll • Hur hittar man det man vill ändra på?
- 9. Boxar Total bredd för en box är: Content (width) + Padding + Border. Margin är sedan marginalen från boxen
- 11. Elementet <div> • “The <div> tag defines a division or a section in an HTML document.”
- 12. Andra, ”bättre”, element för layout • <header> Definierar ett sidhuvud för dokument/artikel • <nav> Definierar en navigation • <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
- 14. 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
- 15. 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
- 16. 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
- 17. Position: absolute • Specificerar ett elements position relativt mot • Förälder-elementet (som har ”position: relative”) • Eller om detta ej finns, till dokumentet
- 18. 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
- 19. 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
- 21. Layout
- 22. Hur skapar man en layout?
- 23. Vi behöver alltså • Sidhuvud <header> • Navigation <nav> • Innehåll <div> • Sidfot <footer>
- 24. Kan vara bra att ha… • En box (<div>) som omsluter hela sidan.
- 25. Demo layout