Archief - CSS: % versus px

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.
s

soepkieke

Legacy Member
ik was derstraks bezig met css.
ik was mijn divs aan het positioneren
maar ik stootte op iets waar ik niet aan uit kan
de % van de positie
hoe zit dit? want als ik de grootte van mijn browser veranderde, veranderde de % niet mee
Code: 
#container {
	width: 800px;
	margin: 10% auto 20px auto;
	border: 1px solid;
}
de 10% is geen 10% van de hoogte maar van wat wel?
want als ik 100% neem is het ver buiten de pagina
?????
t

tikketim

Legacy Member
natuurlijk is dat ver buiten je pagina omdat je de margin waarschijnlijk op 100% hebt ingesteld

100% van de breedte is dus de volledige breedte van het scherm afhankelijk van de resolutie dus bv 800 pixels
s

soepkieke

Legacy Member
en als ik de pagina vergroot of verklein, hoe komt het dan dat de margin niet mee veranderd? deze staat toch in %
s

soepkieke

Legacy Member
100% is het volledige oppvervlakte van de browser of van het beeldscherm zelf???
s

soepkieke

Legacy Member
hoe komt dan, dat als ik het formaat van de browser verander, de hoogte van menu niet mee veranderd?

html:
Code: 
<html>
  <head>
    <title>DVD Collection</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>

<div id="container">
  <div id="menu">
    list | login
  </div>
  <div id="border">
    <div id="content">
      inhoud
    </div>
  </div>
</div>

  </body>
</html>

css:
Code: 
#container {
	width: 800px;
	margin: 10% auto 20px auto;
	border: 1px solid;
}
#menu {
	margin: 10% 0px 0px 0px;
	border: 1px solid;
}
#border {
	border: 1px solid;
	margin: 30px;
	padding: 30px;
}
#content {
	border: 1px solid;
	padding: 20px;
}
F

Fr3aK

Legacy Member
De percentages werken wel maar hij gebruikt die van de breedte ipv die van de hoogte... waarschijnlijk is hier geen andere omweg voor, prolly een bugje in zowel FF als IE.
s

soepkieke

Legacy Member
hm, ok, ge hebt gelijk
als ik de breedte verander gaat de container omhoog, maar het menu ga ni mee omhoog tegenover de container (normaal zou de afstand van menu tegenover container ook mee moeten veranderen).
dit is wel zo als ik bij container een padding-tag bijvoeg

is dit ook een soort van fout van de browser?
o

orez

Legacy Member
niet echt.. padding zou normaal verplicht mee te geven moeten zijn. Dan werkt uw blokelement zoals het moet werken.

Maar ksnap ni echt waarom ge %'en gaat gebruiken voor margins hoor. Dat ge da doet voor een breedte/hoogte van bepaald elementen ok..
s

servi

Legacy Member
soepkieke zei:
en als ik de pagina vergroot of verklein, hoe komt het dan dat de margin niet mee veranderd? deze staat toch in %
Klik om te vergroten...


omdat dat niet mee dynamisch gewijzigd wordt, als je echter je browser herschaalt en dan op refresh drukt zal je merken dat dit wel klopt.

Of dit per se fout is dat de browser niet de marge wijzigt wanneer je je browservenster aanpast is wel erg voor discussie vatbaar.
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