I dag skal vi ha pils og være sosiale med jobben på taket av bygningen vi jobber i! Været er kjempefint her i Skien, og stemningen er god. Hurra for lønningspils!
Etter en uke med tunge programmeringsoppgaver og mye kaos er det DEILIG å kunne trekke seg tilbake og starte helgen med et par pils i vårvarmen.
I forrige leksjon gikk vi gjennom forskjellige layout-elementer. Om du gikk glipp av den, kan du lese den her. Vi startet å bygge opp en side ved å bruke mange forskjellige layout-elementer. Til nå har vi kun fått på plass headeren. Vi skal få på plass ett element per leksjon framover, og i dag er det nav-baren som står for tur. Dersom du har mistet koden fra forrige gang, lager du en ny mappe med en index.html-fil og en style.css-fil. Her er koden:
I tillegg lastet vi ned et bilde og kalte det “bannerbilde.jpg” (dersom bildet du laster ned er av et annet filformat må du skrive noe annet i <img>-tagen enn .jpg).
Nav-baren
Nav-baren brukes som meny på siden vår. Det er hovedmenyen helt øverst, der det typisk på en blogg vil være linker til “Hjem”, “Kategorier”, “Profil” og “Arkiv”. Man kan velge å ha hva man vil i disse nav-barene.
Vi bygger den opp ved å putte dette inn i <nav>-tagen:
<nav>
<ul class=”menu”>
<li><a href=”#nowhere” title=”Link til forsiden”>Hjem</a></li>
<li><a href=”#nowhere” title=”Link til kategorier”>Kategorier</a>
<ul>
<li><a href=”#nowhere” title=”Link til kategori1″>Kategori 1</a></li>
<li><a href=”#nowhere” title=”Link til kategori2″>Kategori 2</a></li>
<li><a href=”#nowhere” title=”Link til kategori3″>Kategori 3</a></li>
<li><a href=”#nowhere” title=”Link til kategori4″>Kategori 4</a></li>
<li><a href=”#nowhere” title=”Link til kategori5″>Kategori 5</a></li>
</ul>
</li>
<li><a href=”#nowhere” title=”Link til arkiv”>Arkiv</a>
<ul>
<li><a href=”#nowhere” title=”Link til kategori1″>Januar 2018</a></li>
<li><a href=”#nowhere” title=”Link til kategori2″>Februar 2018</a></li>
<li><a href=”#nowhere” title=”Link til kategori3″>Mars 2018</a></li>
<li><a href=”#nowhere” title=”Link til kategori4″>April 2018</a></li>
</ul>
</li>
<li><a href=”#nowhere” title=”Link til profil”>Profil</a></li>
</ul>
</nav>
Har man litt god hukommelse kan man legge merke til at man bygger opp menyen av en “unordered-list”. Som en påminnelse for andre er <ul>-tagen noe som lager en punktliste bestående av <li>-elementer. Derfor vil dette se veldig rart ut om man nå bare lagrer og ser på uten noe css til:
Legg også merke til at jeg har lagt en <ul> inne i en annen <li> to steder. Dette er for å lage undermenyer under punktene. Det er jo vanlig at for eksempel “Kategori” og “Arkiv” har under menyer med måneder og kategorinavn under seg.
Alle <li>-tagene har en <a>-tag inne i seg. Denne lager linken, for en meny skal jo bestå av forskjellige linker. Foreløpig står det bare “#nowhere” i linken (href), slik at når du trykker på dem, så havner du ingen steder. Det du skriver i “title” vil ikke bli synlig på nettsiden, annet enn når du holder musa over ordet. Dette følger regler for universell utforming, så en dataoppleser kan vite hvor linken skal hen.
Men vi trenger jo litt styling og, for det kan ikke være en slik punktliste nedover. Derfor legger vi først inn denne linken i head:
li a {
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul.menu li ul {
display: none;
position: absolute;
border: 1px solid transparent;
border-width: 0px 1px 1px 1px;
box-shadow: 0px 3px 5px 0px #e8e8e8;
top: 47px;
}
nav ul.menu li:hover ul {
display: block;
}
nav ul.menu li a:hover {
background-color: #f8f8f8;
}
Nå skal jeg gå gjennom og forklare:
Øverst har jeg skrevet “/* Nav */”. /* brukes for å skrive kommentarer i et css-dokument. Det vil ikke bli lest av websiden, og ødelegger derfor ikke valideringen.
Vi starter med å bare legge styling på nav-tagen.
Først legger vi “position: sticky”. Det gjør at posisjonen til elementet blir “klistret” til toppen sammen med parameteret “top: 0” som vi ser under.
Vi fjerner paddingen la vi til for å illustrere med “padding: 0;”.
For å pynte litt legger vi på litt text-transform og border. For å få til at det bare blir border oppe og nede kan man gjøre slik jeg har gjort her med “border-width”.
Vi går videre til å style selve <ul>-tagen. Vi har gitt ul’en klassenavnet “menu”, så vi skriver derfor “nav ul.menu” når vi skal style den. Det betyr ul med klasse “menu” som ligger inni nav.
For å fjerne “dottene” bak listeelementene bruker vi “list-style-type: none”.
Vi fjerner alt av autogenerert margin og padding.
Vi setter bakgrunnsfarge.
Vi gjør at elementene i nav-baren “flexer”. Vi kommer til å ha en helt egen leksjon om flex og hvordan det fungerer en gang. Nå bruker vi det til å få alle elementene under “ul” til å legge seg pent på rekke.
Vi velger at li, som er direkte under ul, som er direkte under nav, skal ha “position: relative”. Man setter denne posisjonen om elementene inne i dette elementet skal forholde seg til dette. Altså om man skal ha et element med “position: absolute”, vil dette bruke det nærmeste elementet oppover med relativ posisjon som “ramme”.
Så begynner vi å style selve linken.
Vi setter at linken skal være vist i blokkvisning, slik at vi kan legge margin og padding på den.
Vi setter farge på skriven, sentrerer den og legger på padding, så det blir litt luft inne i boksen.
Til slutt fjerner vi understreken under linken med “text-decoration: none;”.
Vi har jo en dropdown-meny, og for å få denne til å fungere som den skal må vi også style denne. Det gjør vi ved å velge ul, som er under li, som er under ul igjen og som er under nav. Da blir det spesifikt undermenyen som blir stylet.
Først skjuler vi den med “display: none”. Vi vil jo ikke at den skal vises før man holder musa over den.
Deretter setter vi “position: absolute” for at elementets plassering ikke skal påvirke noen andre objekter på nettsiden. Dette er grunnen til at vi satte “position: relative” på li-tagen, for nå legger den seg direkte under sin egen li-tag.
Vi pynter med border og box-shadow.
Så sier vi at det skal være 47px opp til toppen av elementet. Dette er for at den skal legge seg under <li>-tagen, og ikke oppå.
På “nav ul.menu li:hover ul” sier vi at når vi holder musen over en li-tag, skal ul være “display: block”. Dette overstyrer “display:none” som vi satte i stad.
Til slutt setter vi bakgrunnsfarge på a-tagen når den blir hovret over.
Var dette forståelig?
Lagre dokumentene og se på siden i nettleseren din! Det skal se slik ut:
Gleder meg til neste leksjon når vi skal ta for oss hovedseksjonen!
På lørdag sto jeg opp før alle andre og tilbragte morgenen alene nede på brygga. Det var deilig å våkne til bølgeskvulp og måkeskrik. Lufta var så salt og frisk.
Altså, finnes det en bedre måte å våkne på? Dette var idyll på sitt beste. Hvem trenger sommer når våren kan være så fin? Det hadde vært en drøm å kunne våkne slik hver dag. Kanskje det skjer en gang? Det er viktig med drømmer.
Jeg ble til og med vitne til våryre ender. Det var koselig.
Det ble en litt hard start på uka med lite søvn og dermed en tung morgen. Men det er viktig å tenke positivt, og det er jo tross alt ny uke og nye muligheter. Det som skal gjøres denne uka er dette:
Tiden er kommet for litt vårrengjøring, og det er på tide å vaske bak de tunge møblene. Vi pleier ikke å gå over bak sofaene og under pulten så nøye. Men en gang i blant må man jo trå til og få gått over bak der og, og tiden er kommet.
Utenom det er det bare “vanlige” punkter denne uka. Jeg vil prøve å trene minst tre ganger, som er målet for denne måneden å gjøre hver uke. I tillegg vil jeg fortsette å spare til at jeg kan gå berserk på turutstyr en gang i framtiden! Det blir så gøy. Jeg vil sette pris på de små tingene og jeg vil være snill mot de rundt meg. Det er de andre målene jeg har for uka!
Jeg kjenner allerede det skal bli godt med lønningspils med jobben på fredag, altså! Ha en super uke videre ♥
Akkurat nå har jeg kommet hjem fra en super hyttetur med gode venner. Det har vært en fin, morsom og koselig helg, og nå er jeg sliten og skal tilbringe resten av dagen under dette teppet i sofaen.
Denne uka har vi vært på hyttetur i mitt ferieparadis, Portør! Det var helt herlig å komme seg vekk til et så fint sted. Luften var frisk, været var bra, vi var en bra gjeng og alt var supert. Vi har laget masse mat, spilt spill og gått turer. Deilig!
Ukas nedtur
Jeg har egentlig aldri noen ukas nedtur, men jeg fant nettopp ut noe jeg syntes var en klar definisjon på en “nedtur”, og det var at den nye “Story”-funksjonen til blogg.no ikke fungerte som den skulle. Jeg laget et langt innlegg med oppskrift tidligere denne uka, som skulle publiseres automatisk i går, men så fungerte det ikke! Sykt flaut, haha! Innlegget er sletta, og jeg skal gjøre det godt igjen med oppskriften i vanlig innlegg-format.
Ukas stolteste øyeblikk
Vi klarte faktisk noe mange tvilte på at vi skulle klare, nemlig å lage Beef Wellington fra bunnen av! Ja, faktisk butterdeigen og! Det ble såå godt. Etter min mening ble det faktisk helt perfekt. Det var kanskje ganske vanskelig å feile når vi hadde kjøpt ordentlig god indrefilet, men det var mange som var skeptiske til oss! Det var gøy å kokkelere på et ordentlig kjøkken med mye benkeplate og mange kasseroller, noe vi ikke har hjemme.
Ukas mest leste innlegg
Det innlegget som ble mest lest denne uka var innlegget med treningsplanen for denne uka. Kanskje det blir flere slike innlegg? Du kan lese det her.
Ukas jobbøyeblikk
På fredag hadde vi den månedlige “Show ‘n tell”, som vi arrangerer for å samle alle i bedriften til “foredrag”. Alle må rullere på å holde halvtimelange foredrag, og det er to stykker per gang. Det er for å lære hverandre ting som vi ellers ville sittet inne på og ikke tenkt på at var lurt å dele med andre.
I den anledning hadde prosjektlederen på jobben bakt sinnsykt gode brownies! I tillegg hadde hun kjøpt is til alle sammen. Slike gleder, altså!
Ukas måltid
Middagen vi lagde på lørdag. MMmmmm! Vi hadde kremet aspargiessuppe til forrett, beef wellington med rødvinssaus, mandelpotetstappe og sjalottløk til hovedrett, og daimiskake til dessert. Det var himmelsk! Det kommer senere et mer utdypende innlegg om akkurat dette.
I morgen drar vi av sted på hyttetur direkte etter jobb. Det blir så deilig! Det er godt å komme seg vekk noen ganger, og jeg gleder meg så veldig til å treffe et vennepar vi ikke har truffet på lenge. Og til et så fantastisk vakkert sted som Portør!
På lørdag skal vi diske opp med ordentlig god middag! Vi må derfor lage tidsskjema, handleliste, printe ut oppskrifter og alt på forhånd før avreise. Jeg skal poste disse listene i et innlegg på bloggen senere. tillegg må vi ha med litt utstyr, i tilfelle det ikke ligger i Portør.
Innleggene på bloggen kommer til å være laget på forhånd, så ikke bli overrasket om det kommer bilder og innlegg som ikke passer helt til skjærgård og hytteliv.
Nå har vi lært mye av det grunnleggende i det å lage hjemmeside, men foreløpig har vi bare hatt en lang rekke av elementer etter hverandre, uten noen form for struktur. Vi har brukt <head> og <body> for å samle de elementene som er synlige og “usynlige”, men nå skal vi strukturere siden med enda flere tager.
Layout-elementer
HTML tilbyr noen tager man kan bruke for å definere enkelte elementer på siden. Dette er de forskjellige layout-elementene:
<header> – Definerer headeren på nettsiden (toppen)
<nav> – Lager en konteiner rundt navigasjonslinker, som en meny
<main> – Definerer hovedinnholdet. Det som kanskje varierer fra side til side
<section> – Definerer en seksjon på en webside
<article> – Definerer en selvstendig og selvforklarende artikkel. Inneholder ofte bloggposter, nyheter, forumposter og kommentarer
<footer> – Definerer bunnen av nettsiden.
<aside> – Definerer innhold som skal ligge på siden av resten av innholdet.
Alle disse brukes på hver sine måter på blogg.no’s nyeste design (når man oppretter en ny blogg). Før var det bygd opp kun av ulike <div>-elementer. <div>-elementer er veldig praktiske til å gruppere ulike elementer og bygge opp forskjellige layoutklosser. Layout-elementene erstatter altså div’er. Der man før ville skrevet <div class=”header”> kan man nå bare skrive <header>.
Oppgave
Lag en ny mappe og kall den “layoutelements”. Lag to filer i denne mappen, en som heter index.html (filtypen skal være .html) og en som heter style.css (filtypen skal være .css). Det enkleste er å bruke Sublime til dette, som du lærte i leksjon 3.
Analyser denne koden litt. Inne i body-tagen ligger de forskjellige layout-tagene jeg nevnte. Legg merke til at section, article og aside ligger inne i main-tagen. Det vil si at <main> ikke avsluttes med en </main> før etter <aside> er avsluttet. I tillegg ligger alt dette inne i en <div> med klasse “wrapper”. Denne brukes til å sette bredde på alt av innhold, og for at det skal legge seg på midten av nettsiden.
I css’en lister vi opp alle de forskjellige layout-tagene etter hverandre med , mellom. Dette kan man gjøre når flere elementer skal ha lik styling. Vi setter en rød ramme på 1px rundt alle tagene, og legger i tillegg inn litt luft inne i hver av boksene. På div med klasse “wrapper” har vi satt en maks-bredde på 1200px, slik at siden ikke skal bli større enn dette. I tillegg har vi satt automatisk marginer på siden. Dette gjør at wrapperen legger seg på midten. Vi setter at luft til høyre og luft til venstre skal være automatisk.
Resultatet blir slik:
Dette viser litt hvordan man kan legge noen elementer inne i andre elementer.
Vi kan bit for bit gå gjennom og legge styling på de forskjellige elementene til vi har en blogg. Vi starter med header-elementet i dag.
Headeren
I headeren ønsker vi å legge til et bilde, og det er egentlig det hele.
Et bilde settes inn med <img>-tagen, slik:
<header>
<img src=”BILDELINK” />
</header>
Denne tagen er unik fordi den lukker seg selv med en / bakerst. Den har altså ikke noen </img> etter seg. Som du ser, har jeg skrevet “BILDELINK” der det står “src”. Du kan velge om du vil legge inn et bilde som ligger lokalt på din datamaskin, eller om du vil hente et bilde online. Ulempen med å hente online er at bildet kan bli fjernet eller at linken endres senere, men jeg kan uansett vise begge deler.
Hente online:
1. Finn et bilde på nett (OBS! Henter du fra google og skal bruke bildet offentlig må du passe på å filtrere på bruksrettigheter som er “Merket for gjenbruk”. Å skrive “Kilde: Google” holder ikke, for det er ikke Google som lager bildene..
2. Høyreklikk på bildet og velg “Kopier bildeadresse”.
Den andre måten å gjøre dette på er å lagre bildet i samme mappe som filene dine (gi den et enkelt navn, men uten æ, ø og å). Skriv det fulle navnet til bildet i src, slik:
og bruk denne img-tagen:
<img src=”bannerbilde.jpg” />
Nå gjenstår det bare stylingen. Lim inn denne teksten i style.css (nederst):
header
{
padding: 0px;
}
header img
{
width: 100%;
}
Her fjerner vi først paddingen på header-tagen (Lufta på innsiden). Deretter sier vi at img-tagen som ligger inne i header-tagen skal ha en bredde på 100% (full bredde).
Resultatet blir slik:
Da er vi et stort steg på vei! Følg med neste gang når vi skal lage toppmenyen!
Nå er vi så godt i gang med treningen igjen, og det er fryktelig deilig! Det har vært en boost for både meg og Øystein at han har begynt å trene med en venn av oss. Da presses han på trening, og han presser meg. I tillegg er det mye morsommere å være på treningssenteret når vi er flere som kan prate sammen.
