XHTML & CSS 2 del 2

1. Designa din egen webbsida XHTML & CSS 2 del 2

2. david.gunnarsson@hb.se Idag Boxmodellen Bakgrundsbilder Rubriker Clear och float Positionering Pseudoklasser

3. david.gunnarsson@hb.se innehåll margin padding border Boxmodellen ”TRouBLed”: När man använder kortformen för att specificera margin, padding eller border för ett element börjar man med den övre sidan och går medsols: Top, Right, Bottom, Left. Ex.:h1 { margin: 1em 1em 0 1em; }

4. Boxmodellen p { width: 300px; padding: 20px; margin: 10px; border: 2px solid } Total bredd 300px +40px +20px +4px ----- 364px

5. Boxmodellen padding: 20px; margin: 10px; border: 2px; width: 300px;

6. david.gunnarsson@hb.se Bakgrundsbilder background-image: url(bgbild.jpg); background-repeat: repeat; Kopierar bilden över hela bakgrunden background: url(bgbild.jpg) top left; background-repeat: no-repeat; • Placerar bilden i övre vänstra hörnet

7. david.gunnarsson@hb.se Bakgrundsbilder background-image: url(bgbild.jpg); background-repeat: repeat-y; • Kopierar bilden vertikalt över hela bakgrundens höjd background-image: url(bgbild.jpg); background-repeat: repeat-x; • Kopierar bilden horisontellt över hela bakgrundens bredd

8. Positionera bakgrundsbilder • Egenskap: background-position • Värden: top, right, bottom, left och center • Bör kombineras med no-repeat • Exempel: background-image: url(bgbild.jpg); background-position: top left; background-repeat: no-repeat; • Minimerat: background: url(bgbild.jpg) top left no-repeat;

9. Positionera bakgrundsbilder • Total centrering: • background-position: center; • I övre vänstra hörnet: • background-position: top left; • I nedre högra hörnet: • background-position: bottom right; • I mitten till höger: • background-position: center right;

10. Positionera bakgrundsbilder i % • Total centrering: • background-position: 50%; • I övre vänstra hörnet: • background-position: 0 0; • I nedre högra hörnet: • background-position: 100% 100%; • I mitten till höger: • background-position: 100% 50%; • Procentvärdet kan givetvis anta andra värden än 0, 50 och 100.

11. Skaka liv i en länklista <div id="linkList"> <div id="linkList2"> <ul> <li><a href="javascript:showHide('home')" class="a">Hem</a></li> <li><a href="javascript:showHide('teaching')" class="b">Undervisning</a></li> <li><a href="javascript:showHide('personal')" class="a">Personligt</a></li> </ul> </div> </div> Exempel

12. Listelementen #linkList li { list-style-type: none; margin: 0 0 2px 0; padding: 0; } 2px marginal nedåt till nästa listelement Ingen padding eftersom länkens bakgrundsbilder ska fylla ut hela listelementets yta

13. Inzoomning <li> <a href="#"> Hem </a> </li>

14. Bakgrundsbilderna • .a, link, visited (ae_aal_back.gif) • .a, hover, active (ae_aah_back.gif) • .b, link, visited (ae_abl_back.gif) • .b, hover, active (ae_abh_back.gif)

15. .a link, visited #linkList a:link.a { background: #E9E9E9 url('../img/ae_aal_back.gif') repeat-x top center; } #linkList a:visited.a { background: #E9E9E9 url('../img/ae_aal_back.gif') repeat-x top center; }

16. .a hover, active #linkList a:hover.a { background: #E9E9E9 url('../img/ae_aah_back.gif') repeat-x top center; } #linkList a:active.a { background: #E9E9E9 url('../img/ae_aah_back.gif') repeat-x top center; }

17. .b link, visited #linkList a:link.b { background: #E9E9E9 url('../img/ae_abl_back.gif') repeat-x top center; } #linkList a:visited.b { background: #E9E9E9 url('../img/ae_abl_back.gif') repeat-x top center; }

18. .b hover, active #linkList a:hover.b { background: #E9E9E9 url('../img/ae_abh_back.gif') repeat-x top center; } #linkList a:active.b { background: #E9E9E9 url('../img/ae_abh_back.gif') repeat-x top center; }

19. Egenskaper som är gemensamma… • …kan placeras i ett regelblock med selektorn a a { font-variant: small-caps; font-weight: normal; width: 120px; display: block; padding-top: 4px; padding-bottom: 4px; border: 1px solid #6B4C4C; margin: 0; text-align: center } Utan display: block kommer bland annat inte width: 120px fungera

20. Om vi vill ha listan på en rad? • li måste ändras från blockelement till radelement: #linkList li { list-style-type: none; margin: 0 0 2px 0; padding: 0; display: inline; } • Länkelementen kan dock inte ha egenskapen display: block om detta ska fungera…

21. …om inte float används förstås #linkList a { font-variant: small-caps; font-weight: normal; color: #6B4C4C; width: 120px; display: block; float: left; padding-top: 4px; padding-bottom: 4px; border: 1px solid #6B4C4C; margin: 0 2px 0 0; text-align: center } Margin för li funkar inte här, utan istället får man sätta marginaler för länkarna Exempel

22. david.gunnarsson@hb.se Rubriker med rundade hörn XHTML-kod <div id="header"> <h1> <span>Valans spådom</span> </h1> </div>

23. Rubriker med rundade hörn #header h1 { font-size: 1.2em; width: 300px; padding: 10px 0 0 0; background: #7FC0E8 url(top.jpg) top left no-repeat; } #header h1 span { width: 290px; display: block; padding: 5px 0 10px 10px; background: #7FC0E8 url(bottom.jpg) bottom left no-repeat; } Exempel

24. Ersätt en rubrik med en bild CSS-kod #header h1 { background: url(h1bild.gif) top left no-repeat; width: 300px; height: 50px; } #header h1 span { display: none; } Exempel

25. Float • Tillåtna värden: left, right och none • Låter ett element flyta till vänster (höger) om nästa element .vers1 { float: left; border: 1px solid #000; width: 200px; }

26. Clear • Tillåtna värden: left, right, both och none • Specificerar på vilka sidor om elementet där ett annat element inte tillåts flyta .vers3 { clear: left; }

27. Exempel 1 #vers1 { float: left; width: 200px; background: #efefef; margin-right: 45px; } #vers2 { float: left; width: 350px; background: royalblue; color: white; } #vers3 { clear: both; background: darkred; color: #efefef; } Exempel 1

28. Exempel 2 #vers1 { float: left; width: 190px; background: #efefef; margin-right: 10px; } #vers2 { width: 190px; background: royalblue; color: white; float: left; margin-right: 10px; } #vers3 { width: 190px; background: darkred; color: #efefef; float: left; } #navigation { text-align: center; margin-left: 0; clear: both; } Exempel 2

29. Exempel 2 - spegelvänd #vers1 { float: right; width: 190px; background: #efefef; margin-left: 10px; } #vers2 { width: 190px; background: royalblue; color: white; float: right; margin-left: 10px; } #vers3 { width: 190px; background: darkred; color: #efefef; float: right; } #navigation { text-align: center; margin-left: 0; clear: both; } Exempel 2 - spegelvänd

30. Exempel 3 #vers1 { float: left; width: 190px; background: #efefef; margin-right: 10px; } #vers2 { width: 190px; float: left; background: royalblue; color: white; margin-right: 10px; margin-bottom: 10px; } #vers3 { background: darkred; clear: both; color: #efefef; } #navigation { text-align: center; margin-left: 0; position: absolute; top: 70px; right: 10px; } Exempel 3

31. Exempel 4 #header h1 { float: left; background: white; padding: 5px; margin: 0; } #vers1 { background: #efefef; } #vers2 { float: left; width: 190px; background: royalblue; color: white; margin-right: 10px; } #vers3 { background: darkred; color: #efefef; width: 395px; float: left; } Exempel 4

32. Balans med float och bilder

33. container header topnav main leftnav content extras footer

34. Bilderna

35. Steg 1 • Generella regler för body, h2 och p samt bakgrund för hela sidan: #container { width: 750px; position: relative; margin: auto; background: #efefef url(exempel_cont.gif) top center repeat-y; } Exempel

36. Steg 2 - Klistra över bakgrundsbilder, göm h1 #header { height: 100px; background: #efefef url(exempel_header.gif) top center no-repeat; } #header h1 { display: none; } #topnav { height: 64px; background: #efefef url(exempel_nav.gif) top center no-repeat; } #footer { clear: both; height: 60px; background: #efefef url(exempel_footer.gif) top center no-repeat; } Exempel

37. Steg 3 – placera ut elementen #leftnav { width: 130px; float: left; margin-left: 0; padding: 10px 10px 10px 20px; margin-right: 10px; /*border: 1px solid black;*/ } #content { width: 390px; float: left; margin-right: 10px; padding: 10px; } #extras { width: 120px; float: left; margin-right: 10px; padding: 10px; } Bortkommenterad kantlinje. Användning av border underlättar vid placeringen av element. Exempel

38. Steg 4 – finlir • Länklistan i topnav görs om till en inline-lista • Länklistan i leftnav snyggas till • Sidfotstext placeras rätt • Textstycken får marginaler som togs bort av *-regeln * { margin: 0; padding: 0; } Slutligt exempel

39. Float: att tänka på • Ange alltid en bredd för ett float-element (behövs dock inte om elementet är img) • Ett float-element bryts ut från övriga element vilket kan resultera i att det överlappar andra element. Innehållet kommer dock att inte att överlappas. • Ett float-element placeras mot vänstra (högra) kanten av det omgivande elementet eller föregående float-element (med samma riktning). • Saknas det horisontellt utrymme för float-elementet på aktuell rad kommer det att flyttas till nästa rad.

40. Positionering • Egenskap: position, värde: absolute, relative, static eller fixed • Absolute – placerar elementet i en position relativ till elementets förälder • Relative – placerar elementet i en position relativ till dess utgångsposition

41. Absolute #navigation { text-align: center; margin-left: 0; position: absolute; top: 70px; right: 10px; } • Dokumentträdet: #container > #navigation • #container är #navigation:s förälder • #navigation placeras 70px från #container:s topp och 10px från #container:s högerkant

42. Relative h1 { background: white; width: 200px; border: 1px solid black; position: relative; top: -20px; left: -20px; } • Elementet h1 placeras 20px ovanför och 20px till vänster om dess utgångsposition Rubrik

43. Pseudoklasser • selektor:pseudoklass { egenskap: värde; } • selektor.klass:pseudoklass { egenskap: värde; } • selektor:pseudoklass.klass { egenskap: värde; } • a:link { text-decoration: none; } • a.text:hover { text-decoration: none; } • a:hover.text { text-decoration: none; } • p:first-letter { color: red; }

44. Elementen div och span <div id="main"> <h2><span>Underrubrik</span></h2> <p class="text"> <span class="leader"> <span class="firstLetter">L </span> oren ipsum </span> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div>

45. Elementen div och span span.firstLetter { font-style: italic; font-size: 3em; font-family: georgia, serif; } span.leader { font-size: 2em; font-family: georgia, serif; font-variant: small-caps; } Exempel

46. (Nästan) samma sak <div id="main"> <h2><span>Underrubrik</span></h2> <p class="text"> Loren ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div>

47. (Nästan) samma sak p:first-letter { font-style: italic; font-size: 3em; font-family: georgia, serif; } p:first-line { font-size: 2em; font-family: georgia, serif; font-variant: small-caps; } Exempel