Ik heb een paar vraagjes over CSS

[jorenman]

Ik heb een paar vraagjes over CSS:

Wat is margin?
Wat is padding?
Ik gebruik vaak bij divs 'position: absolute; top: 10px; left: 10px;', maar ik heb al meerdere keren de opmerking gekregen dat het slimmer is om margin te gebruiken, waarom is margin beter dan position:absolute.... want ik vind position:absolute.... erg handig.

 

[tobiastheebe]

Margin is hoeveel ruimte er om een element heen moet worden vrijgemaakt.
Padding is hoeveel ruimte er binnen een element moet worden vrijgemaakt.

Met position: absolute positioneer je een element ten opzichte van het browservenster.
Met margin kun je eigenlijk niet positioneren, je kunt alleen aangeven hoeveel ruimte er zich tussen het element en het andere element bevinden moet.

 

[RogerS]

position:absolute was alleen handig toen je redelijk zeker wist hoe groot het venster was waarin je content werd weergegeven. Door het toenemend aantal devices en schermformaten is dit heden ten dage niet meer erg handig. Meer weten. Verdiep je dan in responsive design

Hoe margin zich verhoud tot padding staat uitgelegd in het CSS box model -> http://www.w3schools.com/css/css_boxmodel.asp

 

[bron]

Zet 3 afbeeldingen naast elkaar met position: absolute en wijzig dan de grootte van een afbeelding.
Doe daarna hetzelfde maar dan met float: left.

Wat werkt beter :d en dan heb je gelijk je antwoord waarom position niet wordt gebruikt om een layout te maken.

 

[jorenman]

Je kan dan de zijdes ook gewoon vergroten, iets meer werk maar ook duidelijker.
Heeft iemand hier een duidelijke tutorial voor margin in samenwerking met CSS?

 

[jorenman]

Nu snap ik het!
Margin is veel verder ontwikkeld dan position: absolute;
bij margin is een class al ondergewaardeerd aan een id.
float: left zorgt ervoor als je 2 dingen naast elkaar wilt

Margin is inderdaad handiger, kostte even tijd om het door te hebben

 

[bron]

Top. Je zit in de goede richting.
Echter... margin/padding hoort bij css, en class/id/style hoort bij html.
De naam van id moet uniek zijn binnen een body, maar class mag je meerdere keren gebruiken binnen een body.

**edit
Ik heb net een aantal van je posts terug gekeken. Alle bugs zijn veroorzaakt door het gebruik van position. Bekijk nog eens de bijlage onderaan post http://www.helpmij.nl/forum/showthread.php/803601-Probleempjes-in-mijn-navigation-menu

 

[bron]

Even 2 voorbeeldjes gemaakt waarmee je kunt stoeien

<!-- voorbeeld 1: geneste elementen -->
<div class="container rood">
  <div id="box1" class="blauw">
    <div id="box2" class="geel">
      Hallo<br />allemaal
    </div>
  </div>
</div>

<!-- voorbeeld 2: floated elementen -->
<div class="container">
  <div id="box3" class="floatlinks rood">
  </div>
  <div id="box4" class="floatlinks geel">
  </div>
  <div id="box5" class="floatlinks blauw">
  </div>
</div>

* {
  /* een simpele reset */
  margin:0; padding:0; border:0; font:normal 100% sans-serif;
}

/*** classes voor algemeen gebruik ***/

.container {
  width: 650px; /* bij margin 'auto' ook een width opgeven */
  margin: 30px auto 0px auto; /* top right bottom left */
}

.rood  { background: #f00; }
.geel  { background: #ff0; }
.blauw { background: #00f; }

.floatlinks {
  /* float kan een element zwevend een andere plek geven */
  float: left;
}

/*** voorbeeld 1: geneste elementen ***/

#box1 {
  margin: 35px;  /* lege ruimte buiten box1 */
  padding: 50px; /* lege ruimte binnen box1 */
}

#box2 {
  /* bij gebruik van width in px: margin/padding eraf halen */
  /* of je geeft op: width: 100%; */
  width: 480px; /* 650 -35 -35 -50 -50 = 480px */
}

/*** voorbeeld 2: floated elementen ***/

#box3, #box5 {
  width: 250px;
  height: 160px;
}

#box4 {
  width: 150px;
  height: 100px;
  margin-top: 30px; /* laten zakken tov container */
}

 

[Naarling]

Met position: absolute positioneer je een element ten opzichte van het browservenster.

Nee, dat doet position:fixed; Absolute positioneert een element ten opzichte van het eerste relatief gepositioneerde element waar het in staat. Dit kàn de body zijn, maar het kan ook een ander element zijn dat position:relative; heeft meegekregen.

Position:absolute; kan dus nog steeds erg handig zijn, je moet alleen uitkijken hoe je het gebruikt.

NB: Firefox ondersteunt geen position:relative; op tabelelementen, dus kijk uit met absolute elementen in een tabel.