CSS boksmodellen | Dansk video-tutorial
NemProgrammering.dk logo
Læs mere om denne UnoEuro Rabatkode
UnoEuro rabatkode

CSS boksmodellen | Sådan fungerer den!

Lad NemProgrammering.dk´s eksperter lave din hjemmeside for dig
Vi tilbyder professionel hjælp til udvikling af hjemmesider og webshops. Læs mere om vores ydelser her!

Information om denne video

Underviser: Thomas Iversen, A-kasse priser

I denne video skal vi arbejde med det man kalder for "boksmodellen" i CSS. Boksmodellen er et udtryk for, hvordan alle HTML-elementer er opbygget som kasser, og hvordan du så kan anvende padding, border og margin til at positionere indholdet i disse kasser i forhold til hinanden på siden.

Øvelser:
1 - Lav en div som har et billede som indhold, og som derudover har 20px padding, 5px border og 20px margin både i top og bund, men ikke til højre og venstre. Anvend baggrundsfarver både på din side og på din div, så du visuelt kan se både padding, border og margin.
2 - Lav to divs (div1 og div2), som er nested inde i hinanden. div2 skal have dimensionerne 500px gange 500px. Style den inderste div1 med margin 10% og fyld lidt tekstindhold i. Observer og forstå hvad der sker når du ændre i indholdet i div1 eller gør div2 større.

Video tags:

Denne video relaterer til emner såsom: CSS kursus for begyndere, CSS guides, Lær CSS fra bunden, CSS video-tutorials og Introduktion til CSS

Her har du kildekoden

<!-- HTML filen: -->
<!DOCTYPE html>
<html>
    <head>
        <title>Lektion 10</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
     

        
        <div class="content">
            
            <img src="500x500.jpg" alt="billede" >
            
        </div>
       

    </body>
</html>   
        

Her har du kildekoden

/* CSS filen */
body {
    margin: 0px;
}

.content {
    width: 500px;
    height: 500px;
    background-color: red;
    border: solid;
    border-width: 5px;
    padding: 10px;
    margin:10px;
}
        

Spørgsmål og kommentarer

Har du et spørgsmål eller en kommentar til denne video/artikel? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar til at hjælpe.

Url´er bliver automatisk omdannet til links (nofollow).

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Laryea    08-02-2015

Det vil jeg gøre. Troede det var bedst at følge hver enkelt øvelse inden jeg skulle gå videre. :-) Tak for tippet. mvh


kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    08-02-2015

Hej Laryea, Prøv at se video 14 ;-) Mvh.


kommentar på NemProgrammering.dk - lav din egen hjemmeside
Laryea    08-02-2015

Hejsa Jeg har fulgt alle CSS toturials og må sige, at det har fungeret fint for mig indtil nu mht. at lave øvelserne lige indtil nu. Jeg bøvler med at kunne ligge DIV's ind i hinanden. Det er sikkert ret simpelt, men jeg kan ikke rigtig greje det lige pt. Måske noget jeg har glemt eller ikke forstået forhold til de øvrige toturials. Måske jeg kunne bede om lidt hjælp til "Nesting" ? :-)