XHTML & CSS 2 del 2 Designa din egen webbsida. Idag  Boxmodellen  Bakgrundsbilder  Rubriker  Clear och float  Positionering.

En presentation över ämnet: "XHTML & CSS 2 del 2 Designa din egen webbsida. Idag  Boxmodellen  Bakgrundsbilder  Rubriker  Clear och float  Positionering."— Presentationens avskrift:

1 XHTML & CSS 2 del 2 Designa din egen webbsida

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

3 david.gunnarsson@hb.se Boxmodellen innehåll margin padding border ”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 margin: 10px; padding: 20px; width: 300px; border: 2px;

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 Hem Undervisning Personligt 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 Hem

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 Valans spådom

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 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 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 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 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; } Exempel Bortkommenterad kantlinje. Användning av border underlättar vid placeringen av element.

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 Underrubrik L oren 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.

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 Exempel

46 (Nästan) samma sak Underrubrik Loren ipsumdolor 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.

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 Exempel