NemProgrammering.dk logo
NemProgrammering.dk Trustpilot

Dimensioner i CSS

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 lektion skal vi arbejde med dimension i CSS. Vi skal derfor kigge nærmere på CSS egenskaberne height, width, min-width, min-height, max-width og max-height. Derudover skal vi afprøve forskellige værdier til disse, så vi får en fornemmelse af, hvordan helholdvis procent, auto og pixel værdier fungerer.

Øvelser:
1 - Lav 4 divs og give dem alle en fast højde på 100px og bredder på henholdsvis 20%, 30%, 40% og 50%. Giv dem også en baggrundsfarve. Hvad sker der med disse divs, når du gør browseren mindre?
2 - Nest dine divs, altså, læg dine divs ind i hinanden således at 40% div´en ligger inde i 50% div´en, 30% inde i 40% og 20% inde i 30%. Hvordan ser dette ud og hvad sker der når du ændrer i browserstørrelsen?

Video tags:

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

Her har du kildekoden

<!-- HTML filen: -->
<!DOCTYPE html>
<html>
    <head>
        <title>Lektion 11</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="firkant">
            
            
            <img src="pow.jpg" alt="pow" class="pow" />
            
            
        </div>
            
            
          
        <p class="tekst">
            
            Tekst tekst tekst Tekst tekst tekstTekst tekst 
            tekstTekst tekst tekstTekst tekst tekstTekst 
            tekst tekstTekst tekst tekst tekstTekst tekst 
            tekst tekstTekst tekst tekst tekstTekst tekst tekst 
            tekstTekst tekst tekst
            tekstTekst tekst tekst   tekstTekst tekst tekst
            tekstTekst tekst tekst   tekstTekst tekst tekst
            tekstTekst tekst tekst   tekstTekst tekst tekst
            tekstTekst tekst tekst
        </p>

    </body>
</html>    
        

Her har du kildekoden

/* CSS filen */
.firkant {
    width: 50%;
    height: 400px;
    border: 1px solid black;
}

.pow {
   width: 30%;
}


.tekst {
    font-size: 30px;
    background-color: red;
    min-height: 100px;
}
        

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    2015-02-16

Denne øvelse driver mig mere eller mindre til vanvid. Jeg formår ikke at neste som anvist. Kun 20% i 30% og 40% i 50% ! Jeg har kigget i tutorial 14, men det hjalp vist heller ikke. Er godt ør i bolden. Nu kalder kaffen... :-) /* css */ .div1{ height: 100px; width: 20%; border: 1px solid black; background-color: green; float: left; margin-left: 15%; } .div2{ width: 30%; height: 100px; border: 1px solid black; background-color: yellow; float: none; margin-left: 10%; } .div3{ width: 40%; height: 100px; border: 1px solid black; background-color: pink; float: left; margin-left: 5%; } .div4{ width: 50%; height: 100px; border: 1px solid black; background-color: grey; float: none; margin-left: 0%; Mvh Laryea


Forum stats

  • 1146 Antal brugere
  • 1613 Antal emner
  • 8073 Antal indlæg

Deltag selv!

Nyt fra vores bloggere

Besøg vores webbureau

WordPress Hjemmeside

Nyheder

  • Lær, hvordan du kommer til tops i Google og får flere kunder med vores nye SEO kursus for begyndere. Læs mere her!
  • Du kan nu lære avanceret WordPress her på siden. Lær at tilpasse dit tema samt udvikle dit eget plugin! Lœs mere...
  • Nu kan du også lære at bruge Photoshop fra bunden! Se med her: Photoshop kursus
  • Du kan ikke drive et velfungerende udviklingsmiljø uden hurtigt bredbånd. Se vores artikel om Billig Bredbånd
  • Vil du blive bedre til Google Sheets? Så kan du med fordel se vores nye Google Sheets kursus!