Hoi Criz,
[edit]Zie de 2 PS'sen![/edit]
Als je het met aan absolute positie wilt doen (geeft wel vaak complicaties), dan kan het vaak zo:
Code:
body {
position: relative;
}
#menu {
width: 200px;
position: absolute;
right: 0;
margin-right: 10%; /* of in px: zie PS-1 ! */
}
Dwz. de <body> is dan het aanknopingspunt voor het absoluut geplaatste #menu. Je moet eerst met
{right: 0;} aangeven dat het menu helemaal aan de rechterkant van de <body> moet beginnen, en daarna met
{margin-right: 10%;} een afstandje van 10% (van de <body>-breedte) vanaf de rechterkantlijn opgeven. En meestal zal er ook een
{width: ..px;} voor het menu bij moeten.
- NB: Als de <body> niet de breedte van de pagina aangeeft, maar als er een <div id="container"> of iets dergelijks is die de pagina-breedte bepaalt, dan moet die #container de relatieve positie krijgen.
=======
... lees ik ook ergens iets over het 'float' element ...
Dat kan ook, en werkt doorgaans prettiger. In de html doe je dan dit:
HTML:
...
<body>
<div id="menu">
... [menu-onderdelen]
</div>
<div id="hoofdinhoud">
... [koppen, teksten enz. van de hoofdinhoud]
</div>
<div class="clearB"></div>
</body>
</html>
Dwz. éérst het element dat moet drijven, dan kan het element dat ernaast moet komen er rekening mee houden.
De <div class="clearB"></div> is ervoor nodig dat de pagina doorloopt t/m het menu, als het menu de hoogste kolom van de twee is (en anders kan het geen kwaad).
- NB: Er zijn dan geen relatieve of absolute posities nodig: dat regelt zichzelf.
In de css wordt het dan iets als:
Code:
#menu {
float: right;
width: 200px; /* altijd breedte opgeven bij een float */
margin-right: 20px; /* meestal handiger in px dan in % */
}
#hoofdinhoud { /* (breedte regelt zichzelf) */
margin-right: 230px; /* zorgt ervoor dat de inhoud niet onder het menu door gaat lopen */
}
.clearB {
clear: both; /* pagina eindigt onder hoogste kolom */
}
Met vriendelijke groet,
CSShunter
____________
1. Ah, kruispost met ThaDevil, zie ik.
Een
{right: ...;} waarde kan eventueel ook in % opgegeven worden, net als een
{margin-right: ..;}.
Maar voor beide gevallen geldt: dat hoeft alleen als de hele pagina (met z'n breedte) ook als
liquid design is gebouwd (dwz. alles in de breedte in % = afhankelijk van de schermbreedte/windowbreedte van de bezoeker).
- Dat zonder meer doen geeft echter kans op onleesbare lange zinnen (bij hoge resoluties) of juist te smalle kolommen (bij lage resoluties) + ongewenste effecten voor de hoogte-opbouw van de opmaak.
Zou ik als starter nog even niet aan beginnen.
2. Oh, m'n toetsenbord kan het niet bijhouden: intussen ook kruispost met Criz!
van 
