[html & css] 3 kolommen relatief positioneren

Pagina: 1
Acties:
  • 131 views sinds 30-01-2008
  • Reageer

  • wilcodl
  • Registratie: September 2004
  • Laatst online: 30-03 22:55
hallo tweakers,
ik ben mijn site aan het omzetten van tabellen naar css. Nu stuit ik op het volgende probleem: Ik wil 3 kolommen naast elkaar hebben, alle kolommen hebben een vaste breedte en het geheel moet in het midden worden gecentreerd. Dit is mij al wel gelukt maar doordat de inhoud van oa het menu wel eens veranderd, wordt de rechter kolom dan op de verkeerde hoogte geplaatst. ik gebruik daarvoor bv top: -100px. dit is de pagina: http://81.206.236.112/msn/index2.php
de code (verkort):
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>MSN op School.nl.nu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div style="position: relative; margin: 2px auto 0px auto; border: 1px solid black; padding-left: 5px; font-size: 14pt; vertical-align: middle; width: 420px; height: 25px; background-image: url(images/leeg_groot2.gif); background-repeat: no-repeat;">
Inhoud:
</div>

<div style="position: relative; margin: 0px auto 0px auto; top: -27px; right: 298px; width: 155px; border: 1px solid black;">

<div style="position: relative; margin: 0px auto 5px auto; border: 1px solid black; padding-left: 5px; font-size: 14pt; vertical-align: middle; width: 150px; height: 25px; background-image: url(images/leeg_groot.gif); background-repeat: no-repeat;">
Menu:
</div>
<div style="position: relative; margin: 0px auto 5px auto; border: 1px solid black; padding: 5px; vertical-align: middle; width: 138px;">
Dit is het menu<br>
jep
</div>

<div style="position: relative; margin: 2px auto 5px auto; border: 1px solid black; padding-left: 5px; font-size: 14pt; vertical-align: middle; width: 150px; height: 25px; background-image: url(images/leeg_groot.gif); background-repeat: no-repeat;">
Info:
</div>
<div style="position: relative; margin: 0px auto 5px auto; border: 1px solid black; padding: 5px; vertical-align: middle; width: 138px;">
Hier komt info
</div>

</div>

<div style="position: relative; margin: 0px auto 0px auto; top: -27px; left: 298px; width: 155px; border: 1px solid black;">

</div>

</body>

</html>

Ik heb dus alles realtief gepostioneerd door de vaste breedte. Nu is mijn vraag: kun je verschillende div gebieden ook relatief positioneren tov 1 bepaald punt of is dit op een andere manier op te lossen? ik kon op got en google niks vinden over een aantal kolommen allemaal relatief positioneren.
bvd

  • Sappie
  • Registratie: September 2000
  • Laatst online: 18-04 09:00

Sappie

De Parasitaire Capaciteit!

Een element is standaard "static" gepositioneerd. Je maakt pas gebruik van relatieve positionering wanneer je het betreffende element een offset wilt geven of wanneer één van zijn childs absoluut tov de relatief gepositioneerde div gepositioneerd moet worden.

Verder bestaat er ook nog zoiets als floating elementen, die je voor dit doel waarschijnlijk het beste kan gebruiken.

Ik denk dat je CSS nog niet echt onder de knie hebt en dat je je daar eerst even wat meer in zal moeten verdiepen. Kijk bijvoorbeeld op de onderstaande links:

- http://www.richinstyle.com/guides/css2.html
- http://www.w3schools.com/css/default.asp

Verder is er genoeg te vinden over kolom layouts icm CSS:

http://www.google.nl/sear...&btnG=Google+zoeken&meta=

[ Voor 12% gewijzigd door Sappie op 09-01-2006 18:46 ]

Specs | Audioscrobbler