Forberedelse

• Læs resten af kapitel 8, dvs. fra afsnit 8.5 og frem

Formål

• Arbejde videre med <div> tagget
• Arbejde med dens egenskaber
• Bruge det til at lave en menu

Fælles gennemgang

Fra sidst

• Hvad er et <div> tag
• Hvad er et blok hhv. et inline tag for noget
• Hvad kan vi bruge det til
• Giv nogle eksempler på, hvordan man kan style det
• Hvad er en wrapper (ikke en rapper)

Lektien til denne gang

• Arbejde videre med nogle egenskaber på <div> tagget
• Lave både lodrette, vandrette og fald-ned menuer

Øvelser

I må gerne arbejde 2 og 2 i øvelserne her.

15.1 Static, fixed, relative og absolute

Gennemfør videoen her: https://www.nemprogrammering.dk/Tutorials/CSS/V2/13-positionering.php. Supplerende: https://www.w3schools.com/css/css_positioning.asp samt lærebogen.

• Hvad er static, fixed, relative og absolute for noget
• Vis den side, som du laver, men sæt noget tekst ind i dine div-tags. I den statiske skriver du “static” osv.
• Gør vinduet i browseren smallere. Hvad sker der med dine div-tags
• Vi glemte lillebror. Hvad kan vi bruge “sticky” til (se lærebogen). Vis et eksempel på “sticky”

15.2 Egenskaben float

Se videoen her: https://www.nemprogrammering.dk/Tutorials/CSS/V2/14-float-clear.php og gennemfør vejledningen. Supplerende https://www.w3schools.com/css/css_float.asp samt lærebogen.

• Hvad er float for noget
• Hvordan virker float
• Hvad kunne vi evt. bruge float til

15.3 En lille dropdown-menu

• Lav en lille side, hvor du tester koden af fra siden her. https://www.w3schools.com/css/css_dropdowns.asp.
• Hvilke teknikker bruger w3schools for at vise fald-ned menuen. Tip: Kik på siden her: https://www.w3schools.com/css/css_inline-blok.asp

15.4 Lang opgave: Navigationsbar

Gennemfør vejledningen på https://www.nemprogrammering.dk/Tutorials/CSS/V2/16-navigationsbar.php. Se evt. videoen igennem i sin helhed først

• Hvilke teknikker brugte han i videoen
• Hvordan stemmer teknikkerne overens med dem i bogen

15.5 Repetitionsopgave. Orden på Anholt

Download pakken her med et lille website om øen Anholt. Din opgave er at gøre følgende:

• Lav orden i sitet, så filerne ikke ligger hulter til bulter. Dvs. lav relevante mapper til billeder og evt. stylesheets og opdater links
• Lav et eksternt stylesheet, så alt styling ligger eksternt
• Få ordentlige titler på siderne
• Lav menuen vandret og uden prikker foran
• Få styr på, at æ, ø og å vises ordentligt
• Lav siderne til wrappede sider
• Tilføj kontaktoplysninger nederst på hver side
• Har du tid til overs: Lav noget pænere styling. F.eks. få link på siderne til at have en anden styling end i header-området