diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/nl/learn/css | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/nl/learn/css')
| -rw-r--r-- | files/nl/learn/css/css_layout/index.html | 68 | ||||
| -rw-r--r-- | files/nl/learn/css/css_layout/positioning/index.html | 468 | ||||
| -rw-r--r-- | files/nl/learn/css/first_steps/index.html | 64 | ||||
| -rw-r--r-- | files/nl/learn/css/index.html | 64 |
4 files changed, 0 insertions, 664 deletions
diff --git a/files/nl/learn/css/css_layout/index.html b/files/nl/learn/css/css_layout/index.html deleted file mode 100644 index 5990002230..0000000000 --- a/files/nl/learn/css/css_layout/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: CSS layout -slug: Learn/CSS/CSS_layout -tags: - - Beginner - - CSS - - Doorgeefpagina - - Floating - - Gids - - Grids - - Landing - - Leren - - Meerdere kolommen - - Module - - Overzicht - - Positionering - - Rasters - - flexbox - - float -translation_of: Learn/CSS/CSS_layout ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Op dit punt gekomen hebben we al gekeken naar de fundamenten van CSS, hoe tekst te stijlen en hoe de dozen te stijlen en de inhoud ervan te manipuleren. Nu wordt het tijd om te kijken naar hoe we de dozen in de juiste plaats zetten ten opzichte van de viewport en elkaar. We hebben de noodzakelijke vereisten al gezien, en dus kunnen we nu diep duiken in de CSS layout. We kijken naar de verschillende displayinstellingen, traditionele layout methoden (dozen laten drijven en ze positioneren), en nieuwe layout opties zoals flexibele dozen.</p> - -<h2 id="Vereisten">Vereisten</h2> - -<p>Voor je begint aan deze module zou je het volgende al moeten kennen:</p> - -<ol> - <li>De basis van hoe HTML werkt, zoals gezien in de <a href="https://developer.mozilla.org/nl/docs/Learn/HTML/Introduction_to_HTML">Inleiding tot HTML</a> module.</li> - <li>De CSS fundamenten kennen, zoals besproken in de <a href="https://developer.mozilla.org/nl/docs/Learn/CSS/Introduction_to_CSS">Inleiding tot CSS</a> module.</li> - <li>Begrijpen hoe je <a href="/en-US/docs/Learn/CSS/Styling_boxes">dozen moet stijlen.</a></li> -</ol> - -<div class="note"> -<p><strong>Opmerking</strong>: Als je werkt op een computer/tablet/ander apparaat waar je niet de mogelijkheid hebt om je files aan te maken, kan je de meeste voorbeelden uitproberen in een online code-omgeving zoals <a href="http://jsbin.com/">JSBin</a> of <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Gidsen">Gidsen</h2> - -<p>Deze hoofdstukken zullen instructies geven over de fundamentele layouttechnieken en -hulpmiddelen die CSS rijk is.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introductie tot CSS layout</a></dt> - <dd>Dit hoofdstuk zal enkele CSS layout mogelijkheden herhalen die we al zagen in vorige modules, zoals de verschillende waarden voor {{cssxref("display")}}, en enkele van de concepten introduceren die we zullen zien doorheen deze module.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats / Drijvers</a></dt> - <dd>Oorspronkelijk bedacht voor het laten drijven van afbeeldingen in blokken tekst, is de {{cssxref("float")}} eigenschap één van de meest gebruikte hulpmiddelen geworden voor het maken van layouts met meerdere kolommen op webpagina's. Dit artikel zal alles uitleggen.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positionering</a></dt> - <dd>Positionering laat je toe om elementen uit de normale flow van de pagina te halen, zodat ze zich anders gedragen: bv. door op elkaar te zitten of altijd in dezelfde plaats te blijven "plakken" in de viewport. Dit hoofdstuk legt de verschillende mogelijke waarden voor de {{cssxref("position")}} eigenschap uit en hoe je die kan gebruiken.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Praktische positioneringsvoorbeelden</a></dt> - <dd>Verder bouwend op de basis van positionering uit het vorige hoofdstuk, gaan we nu proberen enkele voorbeelden uit het "echte leven" te bouwen, om te tonen welke zaken er mogelijk zijn met positionering.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox / flexibele dozen</a></dt> - <dd>Een nieuwe technologie, maar met sterke ondersteuning door de browsers. <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> wordt bijgevolg al veel gebruikt. Het verschaft hulpmiddelen die toestaan om zeer snel complexe, flexibele layouts te maken. Het staat toe om zaken te doen die traditioneel zeer moeilijk waren in CSS. Dit hoofdstuk legt de basis uit.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids / Rasters</a></dt> - <dd>Rastersystemen zijn nog een veel voorkomend kenmerk van CSS layouts, die dikwijls met behulp van floats of andere layoutmogelijkheden geïmplementeerd worden. Stel je voor dat layouts gebruik maken van een vast aantal kolommen (bv. 4, 6 of 12) en dat je inhoud binnen deze denkbeeldige kolommen wordt weergegeven. In dit hoofdstuk zullen we het basisidee verkennen dat leidde tot de creatie van een raster. We kijken verder naar voorgemaakt raster dat verschaft wordt door een rasterframework en eindigen door te experimenteren met CSS Rasters, een nieuwe mogelijkheid in de browser die het een pak makkelijker maakt om rasters te implementeren in CSS.</dd> -</dl> - -<h2 id="Beoordelingen">Beoordelingen</h2> - -<p>De volgende beoordelingen zullen je vaardigheid om pagina's vorm te geven met behulp van CSS testen.</p> - -<dl> - <dt>Een flexibele layout creëeren met meerdere kolommen (TBD)</dt> - <dd>Deze beoordeling test je vaardigheid in het creëeren van een standaard meerkolommige layout met enkele interessante kenmerken.</dd> - <dt>Een vastgeplakte controlewidget maken (TBD)</dt> - <dd>Deze beoordeling test je kunde in positionering doro je te vragen om een vastgeplakte controlewidget te maken die gebruikers toelaat om de instellingen van een web app te openen, ongeacht waar die gebruiker naartoe scrollt op de pagina.</dd> -</dl> diff --git a/files/nl/learn/css/css_layout/positioning/index.html b/files/nl/learn/css/css_layout/positioning/index.html deleted file mode 100644 index 647827a3b7..0000000000 --- a/files/nl/learn/css/css_layout/positioning/index.html +++ /dev/null @@ -1,468 +0,0 @@ ---- -title: Positionering -slug: Learn/CSS/CSS_layout/Positioning -tags: - - Article - - Beginner - - CSS - - CoderenScripten - - Gids - - Layout - - Positionering - - VAST - - absoluut - - relatief -translation_of: Learn/CSS/CSS_layout/Positioning -original_slug: Learn/CSS/CSS_layout/Positionering ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</div> - -<p class="summary">Positionering laat je toe om elementen uit de normale layout flow te nemen, en ervoor te zorgen dat ze zich anders gedragen dan normaal. Bijvoorbeeld, dat ze boven op elkaar zitten, of altijd op dezelfde plaats in de viewport. Dit artikel overloopt de verschillende mogelijke waarden voor {{cssxref("position")}} en hoe die te gebruiken.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>Basis van HTML (bestudeer <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introductie tot HTML</a>) en een idee van Hoe CSS werkt (bestudeer <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introductie tot CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>Leren hoe CSS positionering werkt.</td> - </tr> - </tbody> -</table> - -<h2 id="Documentstroom">Documentstroom</h2> - -<p>Positionering is een behoorlijk complex onderwerkp, dus gaan we voor we in de code duiken de layout theorie herhalen en licht uitbreiden, zodat we een idee krijgen van hoe dit werkt.</p> - -<p>Ten eerste worden individuele element-dozen gelayout door de inhoud van het element te nemen, dan de vulling, rand en marge toe te voegen daar rond: kort gezegd is dat het <a href="https://developer.mozilla.org/nl/docs/Learn/CSS/Introduction_to_CSS/doosmodel">doosmodel</a>. Standaard neemt een blok-level element 100% van de beschikbare breedte in van zijn ouderelement, en is het even hoog als de eigen inhoud. Inline elementen zijn zo hoog en zo breed als hun inhoud. Je kan de breedte en hoogte niet instellen voor inline elementen, ze zitten gewoon in de inhoud van blok-level elementen. Indien je de grootte van een inline element wil instellen, moet je maken dat het zich gedraagt als een blok-level element met <code>display: block;</code>.</p> - -<p>Dit verklaart de individuele elementen, maar hoe zit het met de interactie tussen elementen? De <strong>normale layout flow</strong> (vermeld bij de inleiding van dit hoofdstuk) is het systeem volgens hetwelk de elementen binnen de viewport geplaatst worden. Standaard worden block-level elementen vertikaal uitgelegd in de viewport: elk block-level element zal op een nieuwe lijn onder het vorig element verschijnen, en ze zullen worden gescheiden door de marge die erop ingesteld wordt.</p> - -<p>Inline elementen gedragen zich anders, ze verschijnen niet op nieuwe regels. Zij worden op dezelfde regel geplaatst als andere inline elementen en tekstinhoud, op voorwaarde dat er plaats is om dat te doen binnen de breedte van het ouderelement. Indien er geen ruimte is dan zal de overvloeiende tekst of zullen de overvloeiende elementen naar een volgende regel verhuizen. </p> - -<p>Indien twee naast elkaar gelegen element allebei een marge hebben, en de twee marges raken elkaar, dan zal de kleinere marge verdwijnen. Dit noemen we <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">samenvallende marges</a>, wat we al eerder zagen.</p> - -<p>We illustreren dit alles met een eenvoudig voorbeeld:</p> - -<pre class="brush: html"><h1>Basic document flow</h1> - -<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> - -<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> - -<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> - -<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> - -<pre class="brush: css">body { - width: 500px; - margin: 0 auto; -} - -p { - background: aqua; - border: 3px solid blue; - padding: 10px; - margin: 10px; -} - -span { - background: red; - border: 1px solid black; -}</pre> - -<p>{{ EmbedLiveSample('Document_flow', '100%', 500) }}</p> - -<p>We komen nog een aantal keer terug op dit voorbeeld naarmate we door dit hoofdstuk verder gaan, om de effecten van de verschillende positioneringsmogelijkheden aan te tonen.</p> - -<p>We zouden graag hebben dat je met deze voorbeelden meevolgt op je lokale computer, indien mogelijk. Haal een kopie van <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> af van onze Github repo (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">broncode hier</a>) en gebruik dat als aanvangspunt.</p> - -<h2 id="Inleiding_tot_positionering">Inleiding tot positionering</h2> - -<p>Het idee achter positionering is dat het ons toelaat om de algemene documentstroom, die hierboven werd uiteengezet, te overschrijven. Wat indien je de positie van sommige dozen wil wijzigen om bv. een licht rare sfeer op te wekken? Positioneren is de manier waarop je dat kan. Of wat indien je een UI element wil maken dat boven de andere delen van de pagina drijft, en/of altijd in dezelfde plaats in het browservenster zweeft ook al wordt de pagina gescrolled? Positioneren maakt dit mogelijk.</p> - -<p>Er zijn een aantal verschillende soorten van positionering die je kan toepassen op HTML elementen. Om die in te stellen gebruiken we de {{cssxref("position")}} eigenschap.</p> - -<h3 id="Statische_positionering">Statische positionering</h3> - -<p>Statische positionering is de standaard voor elk element. Het betekent gewoon: "zet het element op zijn normale positie in de documentstroom, hier is niets speciaals te zien".</p> - -<p>Om dit te illustreren, en om je voorbeeld klaar te maken voor de volgende secties, voeg je de klasse <code>positioned</code> toe aan het tweede {{htmlelement("p")}} in de HTML:</p> - -<pre class="brush: html"><p class="positioned"> ... </p></pre> - -<p>Voeg nu de volgende regel toe aan de onderkant van je CSS:</p> - -<pre class="brush: css">.positioned { - position: static; - background: yellow; -}</pre> - -<p>Als je nu opslaat en herlaad, zal je maar één verschil zien: de veranderde achtergrondkleur van de tweede paragraaf. </p> - -<div class="note"> -<p><strong>Opmerking</strong>: Je kan het voorbeeld live zien op <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">zie broncode</a>).</p> -</div> - -<h3 id="Relatieve_positionering">Relatieve positionering</h3> - -<p>Relatieve positionering is de eerste soort positie die we regelmatig zullen bekijken. Deze soort is zeer gelijkaardig aan statische positionering, behalve dat eens het element zijn normale plaats in de normal layout flow heeft ingenomen, je de uiteindelijke positie nog kan wijzigen. Zo kan je het andere elementen laten overlappen op de pagina. Probeer de positiedeclaratie te updaten in je code:</p> - -<pre class="brush: css">position: relative;</pre> - -<p>Indien je nu opslaat en herlaad, zul je geen verandering zien in het resultaat. Hoe wijzig je dan de positie van het element? Je moet de {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} eigenschappen gebruiken, welke we hierna gaan bespreken.</p> - -<h3 id="Kennis_maken_met_top_bottom_left_and_right">Kennis maken met top, bottom, left, and right</h3> - -<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} worden gebruikt in conjunctie met {{cssxref("position")}} om in te stellen waar het gepositioneerde element naar toe moet. Om dit uit te proberen kan je de volgende declaraties toevoegen aan de <code>.positioned</code> regel in je CSS:</p> - -<pre>top: 30px; -left: 30px;</pre> - -<div class="note"> -<p><strong>Opmerking</strong>: De waarden van deze eigenschappen kunnen alle <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">eenheden</a> aanvaarden die je logischerwijze zou verwachten: pixels, mm, rems, %, enz.</p> -</div> - -<p>IIndien je nu opslaat en herlaad zal je dit resultaat krijgen:</p> - -<div class="hidden"> -<pre class="brush: html"><h1>Relative positioning</h1> - -<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> - -<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> - -<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> - -<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> - -<pre class="brush: css">body { - width: 500px; - margin: 0 auto; -} - -p { - background: aqua; - border: 3px solid blue; - padding: 10px; - margin: 10px; -} - -span { - background: red; - border: 1px solid black; -} - -.positioned { - position: relative; - background: yellow; - top: 30px; - left: 30px; -}</pre> -</div> - -<p>{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}</p> - -<p>Cool, niet? Dit was misschien niet wat je zou verwachten: waarom is het naar onder en naar rechts verschoven nadat we boven en links specifieerden? Hoe onlogisch het aanvankelijk ook mag klinken: dit is gewoon de manier waarop relatieve positionering werkt. Je moet denken aan een onzichtbare kracht die duwt tegen de zijkant van de gepositioneerde doos, waardoor die in de tegenovergestelde richting beweegt. Als je dus specifieert <code>top: 30px;</code>, dan duwt die kracht tegen de bovenkant van de doos waardoor die 30px naar beneden beweegt.</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Je kan dit voorbeeld in actie zien op <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">zie broncode</a>).</p> -</div> - -<h3 id="Absolute_positionering">Absolute positionering</h3> - -<p>Absolute positionering geeft radicaal andere resultaten. Laten we proberen om de positie in onze declaratie als volgt te veranderen:</p> - -<pre>position: absolute;</pre> - -<p>Als je nu opslaat en herlaad, zou je iets moeten zien dat hier op trekt:</p> - -<div class="hidden"> -<pre class="brush: html"><h1>Absolute positioning</h1> - -<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> - -<p class="positioned">Now I'm absolutely positioned, I'm not playing by the rules any more!</p> - -<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> - -<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> - -<pre class="brush: css">body { - width: 500px; - margin: 0 auto; -} - -p { - background: aqua; - border: 3px solid blue; - padding: 10px; - margin: 10px; -} - -span { - background: red; - border: 1px solid black; -} - -.positioned { - position: absolute; - background: yellow; - top: 30px; - left: 30px; -}</pre> -</div> - -<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}</p> - -<p>Merk ten eerste op dat het eerste en derde element na elkaar komen alsof het tweede element niet meer bestaat! Dit klopt ook: een absoluut gepositioneerd element bestaat niet meer in de normale document layout flow. In de plaats daarvan bestaat het in een eigen laag, die los staat van alle andere elementen. Dit is zeer bruikbaar: het betekent dat we geïsoleerde UI elementen kunnen maken die niet interageren met de positie van andere elementen op de pagina. Popups, menus, enz. zijn mogelijke voorbeelden.</p> - -<p>Merk ten tweede op dat de positie van het element veranderd is. Dit komt doordat {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} zich anders gedragen bij absolute positionering. In plaats van te specificeren in welke richting een element moet bewegen, specificeren ze de afstand die het element moet hebben van de zijde van het element waarin het vervat zit. In dit geval zeggen we dat het absoluut gepositioneerde element 30px van de bovenkant, en 30px van de linkerkant moet gepositioneerd zijn van het "vervattende" element.</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Je kan {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} gebruiken om de grootte van elementen aan te passen indien nodig. Probeer volgende zaken in te stellen voor je gepositioneerde elementen en kijk wat er gebeurt: <code>top: 0; bottom: 0; left: 0; right: 0;</code> en <code>margin: 0;</code>. Zet die waarden nadien terug naar de originele waarden.</p> -</div> - -<div class="note"> -<p><strong>Opmerking</strong>: Ja, marges zijn nog steeds van toepassing op gepositioneerde elementen. Ze vallen echter niet samen.</p> -</div> - -<div class="note"> -<p><strong>Opmerking</strong>: Je kan dit voorbeeld live zien op <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">zie broncode</a>).</p> -</div> - -<h3 id="Positioneringscontexten">Positioneringscontexten</h3> - -<p>Welk element is het "vervattende element" van een absoluut gepositioneerd element? Standaard is dit het {{htmlelement("html")}} element: het gepositioneerde element is genest in de {{htmlelement("body")}} in de broncode, maar in de uiteindelijke layout is het 30px van de bovenkant en linkerkant van de rand van de pagina, en dat is het {{htmlelement("html")}} element. Dit wordt ook wel de <strong>positioneringscontext</strong> van het element genoemd.</p> - -<p>We kunnen de <strong>positioneringscontext</strong> (ten opzichte van welk element het absolute element relatief gepositioneerd wordt) veranderen. Dit wordt gedaan door één van de voorouders van het element te positioneren, maw. één van de elementen waarin het absoluut gepositioneerde element genest is (het is onmogelijk te positioneren relatief ten opzichte van een element waarin het niet genest is). Om dit te verduidelijken, voeg je de volgende declaratie toe aan de regel voor de body:</p> - -<pre>position: relative;</pre> - -<p>Dit zou het volgende resultaat moeten geven:</p> - -<div class="hidden"> -<pre class="brush: html"><h1>Positioning context</h1> - -<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> - -<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> - -<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> - -<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> - -<pre class="brush: css">body { - width: 500px; - margin: 0 auto; - position: relative; -} - -p { - background: aqua; - border: 3px solid blue; - padding: 10px; - margin: 10px; -} - -span { - background: red; - border: 1px solid black; -} - -.positioned { - position: absolute; - background: yellow; - top: 30px; - left: 30px; -}</pre> -</div> - -<p>{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}</p> - -<p>Het gepositioneerde element zit nu relatief ten opzichte van het {{htmlelement("body")}} element.</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Je kan het voorbeeld live zien op <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">zie broncode</a>).</p> -</div> - -<h3 id="De_z-index">De z-index</h3> - -<p>Absolute positionering is leuk, maar er is iets anders waar we nog niet over gesproken hebben: welk element zal als bovenste worden weergegeven indien elementen overlappen? In het voorbeeld dat we tot nu toe zagen, positioneerden we slechts één element in de positioneringscontext. Dat element zal bovenaan staan, aangezien gepositioneerde elementen winnen van niet-gepositioneerde elementen. Maar wat als er meer dan één is?</p> - -<p>Probeer het volgende toe te voegen aan je CSS, waardoor de eerste paragraaf ook absoluut gepositioneerd zal worden:</p> - -<pre>p:nth-of-type(1) { - position: absolute; - background: lime; - top: 10px; - right: 30px; -}</pre> - -<p>Nu zal je de eerste, groengekleurde paragraaf uit de document flow zien bewegen, en een beetje hoger gepositioneerd worden dan waar hij normaal zou staan. Hij wordt ook weergegeven onder de andere gepositioneerde paragraaf, waar de twee overlappen. Dit is omdat de andere gepositioneerde paragraaf later komt in de broncode, en gepositioneerde elementen die later in de broncode komen zullen winnen van gepositioneerde elementen die eerder in de broncode komen.</p> - -<p>Kan je die volgorde veranderen? Jazeker, met behulp van de {{cssxref("z-index")}} eigenschap. "z-index" is een referentie naar de z-as. Je zal je misschien herinneren van eerdere punten in de uitleg waar we bespraken hoe webpagina's horizontale (x-as) en verticale (y-as) coördinaten gebruiken om de positionering te bepalen van zaken zoals achtergrondafbeeldingen en drop shadow offsets. (0,0) is linksboven aan de pagina (of aan het element), en de x- en y-assen lopen tot de rechteronderhoek van de pagina (voor talen die van links naar rechts gelezen worden).</p> - -<p>Webpaginas hebben ook een z-as: een denkbeeldige lijn die gaat van je scherm naar je gezicht (of wat het ook is dat je voor het scherm hebt). {{cssxref("z-index")}} waarden hebben bijgevolg een effect op waar de gepositioneerde elementen op de z-as staan: positieve waarden betekenen dat het element hoger zal komen, negatieve waarden betekenen dat het element lager zal komen. Standaard hebben gepositioneerde elementen een <code>z-index</code> van auto, wat praktisch gezien 0 is.</p> - -<p>Om de volgorde te veranderen, voeg je volgende declaratie toe aan de <code>p:nth-of-type(1)</code> regel:</p> - -<pre>z-index: 1;</pre> - -<p>Je zou nu het voltooide voorbeeld moeten zien:</p> - -<div class="hidden"> -<pre class="brush: html"><h1>z-index</h1> - -<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> - -<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> - -<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> - -<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> - -<pre class="brush: css">body { - width: 500px; - margin: 0 auto; - position: relative; -} - -p { - background: aqua; - border: 3px solid blue; - padding: 10px; - margin: 10px; -} - -span { - background: red; - border: 1px solid black; -} - -.positioned { - position: absolute; - background: yellow; - top: 30px; - left: 30px; -} - -p:nth-of-type(1) { - position: absolute; - background: lime; - top: 10px; - right: 30px; - z-index: 1; -} -</pre> -</div> - -<p>{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}</p> - -<p>Bemerk dat <code>z-index</code> enkel eenheidsloze waarden aanvaardt. Je kan niet specificeren dat je een element 23 pixels wil laten bewegen op de z-as, zo werkt het niet. Hogere waarden gaan boven lagere waarden, en het is aan jou om te bepalen welke waarden je gebruikt. 2 en 3 gebruiken zal het zelfde effect hebben als 300 en 40000 gebruiken.</p> - -<p>Merk ook op dat we binnen een enkele positioneringscontext bleven met ons voorbeeld. Indien je twee sets van gepositioneerde elementen zou hebben in een pagina, en je zou er voor willen zorgen dat ze overlappen en dat de volgorde volgens een bepaald patroon verloopt, dan zou het ingewikkeld worden. Gelukkig kom je zo'n complexiteit maar zelden tegen met de z-index. Als je in meer detail wil lezen hoe de z-index werkt, bekijk dan het <a href="https://www.w3.org/community/webed/wiki/CSS_absolute_and_fixed_positioning#The_third_dimension.E2.80.94z-index">Web Standards Curriculum z-index artikel.</a> In dit hoofdstuk hebben we je alle informatie gegeven die je momenteel nodig hebt.</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Je kan het voorbeeld live zien op<code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">zie broncode</a>).</p> -</div> - -<h3 id="Fixed_positioning">Fixed positioning</h3> - -<p>There is one more type of positioning to cover — fixed. This works in exactly the same way as absolute positioning, with one key difference — whereas absolute positioning fixes an element in place relative to the {{htmlelement("html")}} element or its nearest positioned ancestor, fixed positioning fixes an element in place relative to the browser viewport itself. This means that you can create useful UI items that are fixed in place, like persisting navigation menus.</p> - -<p>Let's put together a simple example to show what we mean. First of all, delete the existing <code>p:nth-of-type(1)</code> and <code>.positioned</code> rules from your CSS.</p> - -<p>Now, update the <code>body</code> rule to remove the <code>position: relative;</code> declaration and add a fixed height, like so:</p> - -<pre>body { - width: 500px; - height: 1400px; - margin: 0 auto; -}</pre> - -<p>Now we're going to give the {{htmlelement("h1")}} element <code>position: fixed;</code>, and get it to sit at the top center of the viewport. Add the following rule to your CSS:</p> - -<pre>h1 { - position: fixed; - top: 0; - width: 500px; - margin: 0 auto; - background: white; - padding: 10px; -}</pre> - -<p>The <code>top: 0;</code> is required to make it stick to the top of the screen; we then give the heading the same width as the content column and use the faithful old <code>margin: 0 auto;</code> trick to center it. We then give it a white background and some padding, so the content won't be visible underneath it.</p> - -<p>If you save and refresh now, you'll see a fun little effect whereby the heading stays fixed, and the content appears to scroll up and disappear underneath it. But we could improve this more — at the moment some of the content starts off underneath the heading, because the positioned heading no longer appears in the document flow, so the rest of the content moves up to the top. We need to move it all down a bit; we can do this by setting some top margin on the first paragraph. Add this now:</p> - -<pre>p:nth-of-type(1) { - margin-top: 60px; -}</pre> - -<p>You should now see the finished example:</p> - -<div class="hidden"> -<pre class="brush: html"><h1>Fixed positioning</h1> - -<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> - -<p class="positioned">I'm not positioned any more...</p> - -<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> - -<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> - -<pre class="brush: css">body { - width: 500px; - height: 1400px; - margin: 0 auto; -} - -p { - background: aqua; - border: 3px solid blue; - padding: 10px; - margin: 10px; -} - -span { - background: red; - border: 1px solid black; -} - -h1 { - position: fixed; - top: 0px; - width: 500px; - margin: 0 auto; - background: white; - padding: 10px; -} - -p:nth-of-type(1) { - margin-top: 60px; -}</pre> - -<p> </p> -</div> - -<p>{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Je kan dit voorbeeld live aan het werk zien op <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">zie broncode</a>).</p> -</div> - -<h3 id="Experimental_position_sticky">Experimental: position sticky</h3> - -<p>There is a new positioning value available called <code>position: sticky</code>, support for which is not very widespread yet. This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the viewport), after which it becomes fixed. See our <a href="/en-US/docs/Web/CSS/position#Sticky_positioning">position: sticky reference entry</a> for more details and an example.</p> - -<h2 id="Samenvatting">Samenvatting</h2> - -<p>Ik ben er zeker van dat je plezier had om met de basis positionering te spelen. Het is één van de elementaire tools om complexe layouts te maken met CSS. Met dat in gedachten, zullen we in het volgende hoofdstuk nog meer plezier hebben met positionering: we gaan er een stap verder en bouwen enkele zaken die ook in de "echte wereld" nuttig zijn.</p> - -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</p> diff --git a/files/nl/learn/css/first_steps/index.html b/files/nl/learn/css/first_steps/index.html deleted file mode 100644 index 87e9ffe703..0000000000 --- a/files/nl/learn/css/first_steps/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Voor Beginners -slug: Learn/CSS/First_steps -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started -original_slug: Web/CSS/Voor_Beginners ---- -<p> -</p> -<h3 id="Introductie" name="Introductie"> Introductie </h3> -<p>Deze cursus is een introductie op <b>Cascading Style Sheets</b> (<b>CSS</b>). Het begeleid je door de basis eigenschappen van CSS met praktische voorbeelden die je zelf kan proberen op je eigen computer. Het is opgedeeld in twee delen. -</p> -<ul><li> Deel I illustreert de standaardeigenschappen van CSS, die werken in Mozilla browsers en ook in de meeste andere moderne browsers. -</li></ul> -<ul><li> Deel II bevat een aantal voorbeelden van speciale functies die werken in Mozilla, maar die niet noodzakelijk werken in andere omstandigheden. -</li></ul> -<p>Deze cursus is gebaseerd op de <a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 Specificatie</a>. -</p> -<h4 id="Wie_zou_deze_cursus_moeten_gebruiken.3F" name="Wie_zou_deze_cursus_moeten_gebruiken.3F"> Wie zou deze cursus moeten gebruiken? </h4> -<p>Deze cursus is grotendeels voor beginners, maar je kan het ook gebruiken als je al wat ervaring hebt met CSS. -</p><p>Als je een beginner bent met CSS, gebruik dan Deel I van deze cursus om te begrijpen wat CSS is en hoe je het moet gebruiken. Gebruik vervolgens Deel II om te leren hoe je CSS gebruikt in Mozilla. -</p><p>Als je al wat CSS kent, kan je de delen van de cursus overslaan die je al kent, en alleen de delen lezen die je interesseren. -</p><p>Als je ervaren bent met CSS maar niet in Mozilla, kun je direct naar Deel II gaan. -</p> -<h4 id="Wat_heb_je_nodig_voordat_je_begint.3F" name="Wat_heb_je_nodig_voordat_je_begint.3F"> Wat heb je nodig voordat je begint? </h4> -<p>Om het beste uit deze cursus te halen, heb je een editor nodig voor tekstbestanden en een Mozilla browser (Firefox of Mozilla Suite). Je moet ook weten hoe je deze moet gebruiken voor basishandelingen. -</p><p>Als je geen bestanden wilt veranderen, dan kun je alleen de cursus lezen en naar de plaatjes kijken, maar dat is een minder effectieve manier om te leren. -</p><p>Voor een aantal delen van deze cursus kan andere Mozilla software nodig zijn. Als je geen andere Mozilla software wil downloaden hoef je deze delen niet te volgen. -</p><p><strong>Let op:</strong> CSS zorgt voor een manier om met kleur te werken, dus delen van deze cursus hebben kleuren nodig. Je kunt deze delen van de cursus alleen makkelijk gebruiken als je een kleurenscherm en normaal kleurenzicht hebt. -</p> -<h4 id="Hoe_je_deze_cursus_moet_gebruiken" name="Hoe_je_deze_cursus_moet_gebruiken"> Hoe je deze cursus moet gebruiken </h4> -<p>Om deze cursus goed te gebruiken moet je de pagina's aandachtig en in volgorde lezen. Als je een pagina overslaat kan het moeilijk zijn latere pagina's te begrijpen. -</p><p>Gebruik de <i>Informatie</i> sectie op elke pagina om te begrijpen hoe CSS werkt. Gebruik de <i>Actie</i> sectie om CSS te proberen op je eigen computer. -</p><p>Om je begrip te testen, gebruik de uitdaging aan het einde van elke pagina. Uitkomsten voor sommige van deze uitdagingen worden op latere pagina's in de cursus bekend gemaakt. -</p><p>Om dieper in te gaan op CSS, lees de informatie die je kunt vinden in de kaders benoemd "<i>Meer details</i>". Gebruik de links daar om referentiemateriaal te vinden over CSS. -</p> -<h3 id="Cursus_Deel_I" name="Cursus_Deel_I"> Cursus Deel I </h3> -<p>Een basis stap-voor-stap gids. -</p> -<ol><li><b><a href="nl/CSS/Voor_Beginners/Wat_is_CSS">Wat is CSS?</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Waarom_CSS_Gebruiken">Waarom CSS Gebruiken?</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Hoe_CSS_Werkt">Hoe CSS Werkt</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/'Cascading'_en_nalatenschap">'Cascading' en nalatenschap</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Selectors">Selectors</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Leesbaar_CSS">Leesbaar CSS</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Text_Stijlen">Text Stijlen</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Kleur">Kleur</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Inhoud">Inhoud</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Lijsten">Lijsten</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Kaders">Kaders</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Layout">Layout</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Tabellen">Tabellen</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Media">Media</a></b> -</li></ol> -<h3 id="Cursus_Deel_II" name="Cursus_Deel_II"> Cursus Deel II </h3> -<p>Voorbeelden die CSS in Mozilla laten zien. -</p> -<ol><li><b><a href="nl/CSS/Voor_Beginners/JavaScript">JavaScript</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/XBL_Bindingen">XBL Bindingen</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/CSS_en_XUL">CSS en XUL</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/CSS_en_SVG">CSS en SVG</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/XML_data">XML data</a></b> -</li></ol> -{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "ja": "ja/CSS/Getting_Started", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar" } ) }} diff --git a/files/nl/learn/css/index.html b/files/nl/learn/css/index.html deleted file mode 100644 index aeb4f56374..0000000000 --- a/files/nl/learn/css/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: CSS -slug: Learn/CSS -tags: - - Beginner - - CSS - - CodingScripting - - Debugging - - Landing - - NeedsContent - - NeedsTranslation - - Topic - - TopicStub - - length - - specificity -translation_of: Learn/CSS ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Cascading Stylesheets — or {{glossary("CSS")}} — is the second technology you should start learning after {{glossary("HTML")}}. Whereas HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. So for example, you can use CSS to alter the font, color, size and spacing of your content, split it into multiple columns, or add animations and other decorative features.</p> - -<h2 id="Learning_pathway">Learning pathway</h2> - -<p>You should really learn the basics of HTML before attempting any CSS. We'd recommend that you work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module first — you can then learn about:</p> - -<ul> - <li>CSS, starting with the Introduction to CSS module</li> - <li>More advanced <a href="/en-US/Learn/HTML#Modules">HTML modules</a></li> - <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages</li> -</ul> - -<p>We'd recommend that you learn HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting with CSS, and you can't really learn CSS without knowing HTML.</p> - -<p>Before starting this topic, you should also have at least basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.) You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> - -<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> before attempting this topic, however it isn't absolutely necessary; much of what is covered in the CSS basics article is also covered in our Introduction to CSS module, albeit in a lot more detail.</p> - -<h2 id="Modules">Modules</h2> - -<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> - -<dl> - <dt><a href="/nl/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt> - <dd>This module gets you started with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt> - <dd>Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> - <dd>Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images and other features, and fancy features such drop shadows and filters on boxes.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> - <dd>At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox.</dd> - <dt>Responsive design (TBD)</dt> - <dd>With some many different types of devices able to browser the Web these days, <a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (RWD) has become a core web development skill. This module will cover the basic principles and tools of RWD, explain how to apply different CSS to a document depending on device features like screen width, orientation, and resolution, and explore the technologies available for serving different video and images depending on such features.</dd> -</dl> - -<h2 id="Solving_common_CSS_problems">Solving common CSS problems</h2> - -<p><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a webpage: Styling boxes,</p> - -<h2 id="See_also">See also</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt> - <dd>The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.</dd> -</dl> |