Lær å lage hjemmeside – Leksjon 8

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:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Layout elementer</title>
    <meta charset=”utf-8″>
    <link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
    <div class=”wrapper”>
        <header>
            <img src=”bannerbilde.jpg” />
        </header>
        <nav>
            Navigasjonsbar
        </nav>
        <main>
            Main
            <section>
                Seksjon
            </section>
            <article>
                Artikkel
            </article>
            <aside>
                Sidebar
            </aside>
        </main>
        <footer>
            Footer
        </footer>
    </div>
</body>
</html>

 

CSS

.wrapper
{
    width: 80%;
    margin: auto;
}

header, nav, main, footer, section, aside, article
{
    border: 1px solid red;
    padding: 10px;
}

header
{
    padding: 0px;
}

header img
{
    width: 100%;
}

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:

<link href=’https://fonts.googleapis.com/css?family=Raleway:400,500,600,300′ rel=’stylesheet’ type=’text/css’>

Det er for å kunne bruke skrifttypen Raleway. 

Deretter legger vi dette i CSS’en: 

/* Nav */

nav
{
    position: sticky;
    top: 0;
    padding: 0px;
    text-transform: uppercase;
    border-width: 1px 0px 1px 0px;
    border-color: #ccc;
}

nav ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    display: flex;
}

nav > ul.menu > li {
    position: relative;
}

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! 

Følg med!

 

Alle leksjoner: 

2 thoughts on “Lær å lage hjemmeside – Leksjon 8

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top