Övning: div-element

I den här övningen jobbar vi med <div>-elementet.

<div>-elementet är som ett block som innehåller olika saker (text, bilder, fler <div>-element, mm.). Med hjälp av CSS-stilregler kan vi lägga till olika saker till elementet, t.ex: bakgrundsfärger, marginal, ram (border) osv.

Vi kan också positionera våra <div>-element på sidan!
Det här används på nästan alla websidor – du kan inspektera koden för vilken sida som helst (minns du hur man gör?) så hittar du en mängd div-element.

Exempel: Div-element på hbl.fi.

Nu ska vi själva pröva på hur vi kan ändra layouten på en sida med hjälp av <div>-element.

Vi börjar med en html-sida som har två <div>-element (du kan kopiera koden):

<html>
    <head>
        <style>

        </style>
    </head>

    <body>

    <div id="box1">Box nummer 1.</div>
    <div id="box2">Box nummer 2.</div>
    
    </body>
<html>

Som vanligt är allt innehåll vi ska visa på sidan inne i <body>-sektionen. Det enda innehåll vi har är två <div>-element med text i. Elementen har fått varsin id – ”box1″ och ”box2″ – så att vi ska kunna ge skillda stilregler åt dem med CSS.

I <head>-sektionen har vi ett tomt <style>-element som kommer att innehålla alla de stilregler vi ska pröva.

Börja med att fylla i strukturen för stilreglerna:

<style>
    div#box1 {

        // stilreglerna för box1
        // kommer här

    }

    div#box2 {

        // stilreglerna för box 2
        // kommer här

    }
</style>

Om du nu tittar på sidan, borde den se ut ungefär såhär, d.v.s. vi har inte gett några stilregler ännu.

Bakgrundsfärg

Nu börjar det roliga.

Pröva följande CSS-regler och observera vad de gör. Kom ihåg att alla reglerna ska vara innanför { }-parenteserna för den box du vill ändra!
Det är också viktigt att du har : och ; på rätt ställe.

background-color:blue;

Gör ”box1″ grön och ”box2″ någon annan färg!

color:red;

Vad är skillnaden på color och background-color?

Margin och padding

margin:30px;

padding:10px;

Vad är skillnaden på margin och padding.

Du kan också centrera ena lådan med hjälp av marginaler:

margin-left: auto;
margin-right: auto;

Border

För att få en ram finns några olika regler som måste användas samtidigt. Pröva följande:

border-style: solid;
border-width: 1px;
border-color: black;

Hittar du alternativ till att ha en border som är solid?
Googla css border-style!

Höjd och bredd
Det går också att manuellt bestämma bredden och höjden på en div. Det fungerar på samma sätt som med bilder, d.v.s. med width och height:

width: 400px;
height: 100px;

Positionering: left, right, top, bottom
Nu är det dags att börja positionera våra boxar!
Vi börjar med att aktivera ”absolut positionering”.
Det betyder att vi kan flytta boxarna vart vi vill på sidan!

position: absolute;

Flytta box 1 till den högra kanten:

position: absolute;
right:0px;

Flytta box 2 till den nedre kanten:

position: absolute;
left:0px;
bottom:0px;

Du märker att vi har nästan obegränsade möjligheter att justera layouten på sidan med hjälp av våra <div>-element!

Nu kan du pröva följande övningar:

1. Gör ena lådan brun och andra lådan grön. Flytta den bruna lådan till nedre vänstra hörnet och den gröna lådan till nedre högra hörnet.

Vad händer om du lägger till mera innehåll på sidan (i body sektionen)?

2. Gör ena lådan ljusblå och andra lådan ljusgrön. Centrera båda lådorna med hjälp av marginaler.

3. Centrera ena lådan både horisontellt och vertikalt med

top: 50%;
left: 50%;

För att den ska hamna exakt i mitten måste du också justera marginalerna. Du kan ta hjälp här.

This entry was posted in Allmän. Bookmark the permalink.

Comments are closed.