Archief - (beginner) margin & position

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
T

Timmos

Legacy Member
Hallo,

Ik ben een beginner in XHTML en CSS. Ik ben vanalles aan het uitproberen. Bezoek dit eens: http://users.skynet.be/timdemey/ (stylesheet staat hier: http://users.skynet.be/timdemey/css/stylesheet.css). De kleuren zijn zo gekozen dat ik zie wat ik doe.

Nu wil ik het witte vak steeds 20px van het menu links afstand laten houden. Ik vermoed dat dit moet met een combinatie van "position", "margin"? Of niet? Ik heb hier een lijst met alle CSS keys voor me, ik zie geen andere optie?

Nu neemt het vak altijd afstand vanaf de linkerkant van het venster zelf. Het moet afstand nemen vanaf het menu (stel dat ik het menu bvb breder laat worden, of een relatieve breedte meegeef).

Hoe moet ik dit aanwenden?

(wellicht een zware noob-vraag voor jullie)

:)
C

CyXo

Legacy Member
Margin zorgt voor een spatie buiten uw boxmodel

{margin}<div></div>{margin}

Padding zorgt voor een spatie binnen uw boxmodel

<div>{padding}</div>

Best kan je een fixed width instellen in een containerdiv, liefst onder de 1024px (pak maar +- 1000, aangezien er nog eventueel een scrollbar en altijd zijrandjes van de browser zijn.) 1024x768 is nu eenmaal nog steeds de meest gebruikte resolutie.

Een simpel voorbeeld:

HTML (snelle weergave, zonder head en body enzo):

HTML: 
<div id="Container">
  
  <div id="Menu">
    <ul>
      <li><a href="#" title="blabla1">Menuitem1</a></li>
      <li><a href="#" title="blabla2">Menuitem2</a></li>
      <li><a href="#" title="blabla3">Menuitem3</a></li>
    </ul>
  </div>

    <div id="Content">
      <p>Dit is content!</p>
    </div>

</div>

CSS:

Code: 
#Container {
  width: 1000px;
  margin: 0 auto; /* Dit is om de containerdiv te centreren, alles wat hierin zit wordt dus ook gecentreerd */
}

#Menu {
  width: 250px;
  float: left; /* Dit gaat de menudiv in de linker bovenhoek van de containerdiv plaatsen */
}

#Content {
  width: 750px; 
  float: right; /* Deze div wordt m.a.w rechts van de menudiv geplaatst, aangezien er plaats over is voor 750px width. Links floaten lukt ook uiteraard. */

Let wel op: Als je de padding of dergelijke gaat gebruiken ga je je width ook moeten aanpassen!

Een handige tip: Om te kunnen zien tot waar je boxmodels komen kan je best de web developer toolbar installeren (Dit is een plugin voor firefox).

Als je nu je site load kan je eenvoudig bij de tab Outline kiezen voor outline block level elements.

Pas even mijn voorbeeld toe, en experimenteer maar even en bekijk het gedrag van de boxmodels als je dingen gaat veranderen in je CSS.
T

Timmos

Legacy Member
Ik gebruik nu de body als container-element. Mag dat? Want jij gebruikt een extra div met een id="container".

Kan ik dan bvb niet in mijn CSS doen
Code: 
body
{
    <hier staat alles wat bij jou in je #container staat>
}

Alvast bedankt voor je reply. Dan moet ik alles in de body centreren?
n

nigel555

Legacy Member
Best een extra div maken voor die container :)
Het is makkelijker werken dan ;)
Je kan dit niet doen in CSS meen ik mij te herinneren :)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan