Jump to content

OWN

  • artikelen
    5186
  • reacties
    17587
  • bezichtigingen
    1588493

OWN 440 - Web Met Boer


OWN

605 bezichtigingen

j52uCEX.png

Welkom!


Welkom terug! Fijn dat je het weer wilt gaan lezen wat ik je vandaag ga leren. We gaan weer verder waar we gebleven waren natuurlijk, ik hoop dat jullie na deze les ook weer iets wijzer zijn geworden! Succes!

Wat gaan we vandaag doen?


Vandaag gaan we een begin maken voor het menu. We kunnen namelijk alleen een menu gaan bouwen als we een beetje kennis over bepaalde theorieën hebben. Vandaag een saaie theorie les. Volgende week in de praktijk ;).

Wat relevant kan worden is het volgende. Padding en margin. twee handige CSS attributen.

how-are-margins-borders-padding-and-content-related-01.gif

Even vanuit gaande dat het content in dit geval een DIV is die je hebt aangemaakt. Een padding zorgt er voor dat je ruimte binnen je content creëert. Dus met padding-right: waarde; creëer je binnen je div ruimte aan de rechterkant. Met een border zet je dus een rand om je content heen. Maar als je dus een bepaalde padding aan je content heen doet komt er dus ruimte tussen je content en je border.

Zodra je met margin gaat spelen, met margin: waarde; dus. Dan speel je eigenlijk met de ruimte er om heen. Bijvoorbeeld; hoeveel pixels moet het van de bovenste rand afstaan?

Voorbeeld:

<style type="text/css">
div{
border: 1px solid #000 /* Dit zet een zwart randje van 1 pixel erom heen */
padding: 10px; /* Dit zorgt er voor dat er tussen de border en de div ruimte komt. In dit geval aan alle 4 zijde's 10 pixels.
margin: 10px; /* Dit zorgt ervoor dat er 10pixels ruimte om je div heen komt. in plaats van in je div. */
}
</style>

Ik zou zeggen, met alles wat je nu in je bol hebt. Probeer het is ;).

Volgende keer!


Volgende les; dan brengen we alles in praktijk!

Succes met deze opdracht en graag tot volgende week ;)

MWfTSx9.png

0 reacties


Recommended Comments

Er zijn geen reacties om weer te geven.

Gast
Reactie toevoegen...

×   Je hebt text geplaatst met opmaak.   Opmaak verwijderen

  Only 75 emoji are allowed.

×   Je link is automatisch ingevoegd.   In plaats daarvan weergeven als link

×   Je vorige bewerkingen zijn hersteld.   Alles verwijderen

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...