Lær å lage hjemmeside – Leksjon 10

Da var det på tide med denne ukas webleksjon igjen! Nå skal vi begynne på den midtre delen av siden vi bygger opp. 

 

Komme i gang

Først vil jeg bare bytte ut bredden på wrapperen vi har laget. Øverst i css’en skal dette:

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

byttes ut med dette:

.wrapper
{
    max-width: 980px;
    margin: auto;
}

Dette gjør jeg for at nettsiden skal ta full bredde når den går under 980 piksler, men før dette skal den ha margin på sidene. 

 

Vi starter med å legge inn <main> med både en <section> og en <aside>, slik: 

<main>
       <section>
                
       </section>
       <aside>
                
       </aside>
</main>

I forrige leksjon gikk vi gjennom flex-attributten. Skriv derfor dette inn nederst i CSS-arket:

/* Main */

main {
    display: flex;
    flex-direction: row;
}

section {
    width: 100%;
}

aside {
    width: 300px;
}

Her har jeg nå laget to kolonner, én for å ha en sideseksjon der jeg tenker å legge profilinformasjon og lignende i, og én til å ha artikler og innlegg. Jeg setter dem ved siden av hverandre med flex-direction: column.

Nå som vi nesten har fått opp hele siden kan vi godt fjerne de røde strekene og paddingen vi la på i første leksjon på alle elementene for å synliggjøre dem. Fjern disse linjene øverst i css-arket: 

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

 

Aside

I denne leksjonen vil jeg fokusere på å få opp høyrefeltet på siden. Her kan du bestemme akkurat hva du vil legge inn, men jeg skal ta utgangspunkt i et standard høyrefelt du for eksempel kan finne på en blogg, med bilde, kontaktinformasjon og litt tekst. 

Vi begynner nå med å bygge opp selve html-koden inne i aside, før vi tar oss av stylingen etterpå. 

Skriv inn denne koden:

<aside>
    <div class=”profilepicture”>
        <img src=”profilbilde.jpg” alt=”placeholder+image”>
    </div>
    <div class=”profiletext”>
        <h3 class=”name”>
            Elise Kristiansen
        </h3>
        <p class=”info”>
            23, Skien
        </p>
        <p>
            Håper dere trives med denne webleksjonen! Dersom dere sliter, kan dere kontakte meg på <a href=”mailto:[email protected]”>[email protected]</a>
        </p>
    </div>
</aside>

Her lager jeg først en egen div som profilbildet kan ligge inne i. Deretter lager jeg en bildetag som referer til et bilde jeg har liggende i samme mappe som fila. Dersom du skal bruke et bilde fra nett må du lime inn bildenettadressen i src-attributten. 

Under har jeg laget en til div for profiltekst. Inne i denne lager jeg de forskjellige tekstfeltene jeg ønsker. For navnet bruker jeg h3, siden det er en slags tittel i aside-boksen. Merk at jeg lager en <a>-tag inne i teksten min, som har href=”mailto:” og så eposten min. Det er slik du forteller nettleseren din at du vil linke til en mailadresse, og ikke til en url.

Vi starter med å style hele aside-klassen. Vi har jo allerede satt en bredde på den, men vi legger til disse to linjene: 

aside {
    width: 300px;
    background-color: #f8f8f8;
    padding: 10px;

}

Dette er for å få litt bakgrunnsfarge og luft i boksen. Her kan du selvsagt velge akkurat den fargen du vil. Om du vil ha et mer rosa design, kan du jo velge en rosa farge her. Minner igjen om at du finner veldig mange fine hex-farger her

Nå må vi få gjort noe med profilbildet vi la inn, for akkurat nå tar den sin fulle størrelse, og det ser som regel ikke helt bra ut. Vi legger denne koden inn i css-arket:

.profilepicture img {
    width: 100%;
}

Det denne koden sier er at alle bilder som ligger inne i en klasse som heter “profilepicture” skal være 100% bredde. Det gjør at bildet kun strekker seg ut på den plassen den er tiltenkt, og aside-klassen har jo allerede fått begrenset plassen sin til bare 300px.

Nå ser resultatet slik ut:

Det er fortsatt litt traust og kjedelig! Så vi legger derfor på litt mer styling, selv om siden fungerer som den skal. 

Vi legger derfor på denne stylingen og:

.profilepicture {
    padding: 10px;
    box-shadow: 0px 0px 10px #e8e8e8;
    background-color: #ffffff;
}

.profiletext h3 {
    font-weight: 400;
}

.profiletext a {
    color: #000000;
}

.profiletext a:hover {
    color: #777777;
}

Først lager vi en ramme rundt bildet. Deretter smalner vi navnet som ligger i en h3-tag. Vi setter svart farge på lenken (epostadressen) og setter en ny hoverfarge på den (fargen som kommer når man holder pusepekeren over linken). 

Nå er resultatet slik: 

Nå er det bare å endre rundt på farger, luft og andre designelementer! Det viktigste er å være kreativ og ha det gøy med det. Enjoy!

 

Andre leksjoner:

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