CSS positionering vraag

  • Onderwerp starter Onderwerp starter miem
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.

miem

Gebruiker
Lid geworden
24 feb 2002
Berichten
797
Ik wil een pagina maken met drie kolommen naast elkaar en die maken met css, zgn boxes.
De linker en de rechter kolom hebben een groene achtergrond, vaste breedte en daar komt het menu in. In de middelste kolom komt de inhoud. De inhoud verschilt per pagina, maar als inhoud van de middelste kolom langer is dan schermhoogte en je dus moet scrollen, dan loopt de achtergrond kleur in de linker en rechter kolom niet meer door.
Als ik de pagina achtergrond groen maak en de achtergrond van de kolom "inhoud" wit, dan is er als de inhoud niet pagina vullend is, weer een hele groene balk onderin ipv mijn drie kolommen.
Ik zet hieronder een stukje van het stylesheet:

#links {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
margin: 0px;
padding: 10px;
border: 0px;
background: #00A633;
height: 100%;
width: 175px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 155px;
}
html>body #left {
width: 170px; /* ie5win fudge ends */
}

#inhoud {
padding: 10px;
border: 0px;
background: White;
margin: -20px 175px 0px 175px;
voice-family: "\"}\"";
voice-family:inherit;
margin-top: 0px;
}
html>body #middle {
margin-top: 0px; /* ie5win fudge ends */
}

#rechts {
position: absolute;
top: 0px;
right: 0px;
margin: 0px;
padding: 10px;
border: 0px;
background: #00A633;
height: 100%;
width: 175px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 155px;
}
html>body #right {
width: 155px; /* ie5win fudge ends */
}


Zie ik iets over het hoofd, of is het gewoon niet mogelijk? Ik heb gezocht bij w3schools.com, www.glish.com, thenoodleincident.com/tutorials/box_lesson/boxes.html enz, maar ik kom er niet uit.
 
Wat is de bedoeling van boxes?
- - - - een vast gebied aangeven - - - -
........ juist.

Wens je links en rechts met achtergrond te kleuren bij scrol van inhoud, dan ben je toch op tabellen aangewezen.

En.......
#rechts {
position: absolute;
top: 0px;
right: 0px;
margin: 0px;
padding: 10px;
border: 1px solid;
background: #00A633;
height: 100%;
width: 175px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 155px;
}
html>body #rechts {
width: 155px; /* ie5win fudge ends */

... wel dezelfde naam geven ;)

Styles linken
boxes
http://www.macedition.com/cb/cb_20010424.shtml
http://www.thenoodleincident.com/tutorials/box_lesson/index.html


:cool:
 
Hahaha, sorry foutje met knippen en plakken.
Jammer dat ik nu weer terug moet naar tabellen.
 
Ik heb de hele pagina in een div gezet met height=100%. In IE lukt het nu wel, maar in Netscape niet, die ondersteunt geen height percentages.
Weet iemand hier iets voor?

ik heb een voorbeeldje op het net gezet. De linken werken nog niet.

www.tcleende.nl/hermes
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan