/u/40371/pino.JPG?f=community)
Ik ben bezig met een website. Deze website moet simpel onderhouden kunnen worden. Ik heb daarom een functie in php gemaakt die een Box maakt. Van die box kun je dan de titel, inhoud, hoogte,breedte en top- en left-margins opgeven.
Zo ziet een Box er bijvoorbeeld uit: (Waarbij de variabelen uit de functieoproep komen)
Mijn pagina heeft natuurlijk een stylesheet. Daarin heeft een box de volgende eigenschappen:
De verschillende boxen in een pagina komen in een div in de hoofdpagina.
Dit is de opzet van mijn hoofdpagina:
ook deze pagina maakt gebruik van de stylesheet.
De voor mijn probleem relevante code (neem ik aan):
Mijn probleem:
Ik gebruik voor de boxes dus een absolute positionering. Dit werkt goed. Alle boxes komen op de opgegeven positie etc.
De footer van de pagina komt echter direct onder het submenu. Met andere woorden: De mainContent heeft geen "inhoud" en daardoor rekt hij niet mee.
Wanneer ik de position van .box verander in relative rekt de mainContent mooi mee en staat de footer netjes onderaan. De margin-top van elke box klopt dan echter niet, aangezien hij die dan berekend vanaf zijn voorganger ipv de parent. Alle boxes staan dus min of meer onder elkaar.
Ik heb van zowel de footer, de mainContent, de mainParent als de mainBody zo'n beetje alle verschillende combinaties geprobeerd als het gaat om Position: relative/absolute. Het mocht niet baten.
De reden waarom ik concludeer dat de mainContent geen inhoud heeft is dat wanneer ik hem een hoogte meegeef hij wel meerekt. Ook als ik er geen box inzet maar "losse" tekst schuift de footer ook goed mee.
Mijn vraag:
Ik wil de positionering van de boxes kunnen opgeven én ik wil een footer die onderaan mijn pagina staat.
Is het op te lossen met css (en doe ik dus iets fout)
óf is het alleen "smerig" op te lossen (met javascript of met php hoogte berekenen en meegeven)?
Een linkje naar de pagina zal ivm de spam-regels hier niet erg op prijs gesteld worden denk ik, dus ik hoop dat ik genoeg duidelijk heb gemaakt.
Zo ziet een Box er bijvoorbeeld uit: (Waarbij de variabelen uit de functieoproep komen)
HTML:
1
2
3
4
5
6
7
8
9
10
| <div class="box" style="left: <?=$marginleft?>px; top: <?=$margintop?>px; width: <?=$width?>px;"> <div class="boxHead"> </div> <div class="boxBody" style="height: <?=$height-44?>px"> <?=$text?> </div> <div class="boxFoot"> </div> </div> |
Mijn pagina heeft natuurlijk een stylesheet. Daarin heeft een box de volgende eigenschappen:
code:
1
2
3
4
| .box {
position: absolute;
padding: 0px 0px 0px 0px;
} |
De verschillende boxen in een pagina komen in een div in de hoofdpagina.
Dit is de opzet van mijn hoofdpagina:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <body id="mainBody"> <div id="mainParent"> <div id="header"> <!-- header hier --> </div> <div id="subHeader"> <!-- subheader hier --> </div> <div id="mainMenu"> <!-- mainmenu hier --> </div> <div id="subMenu"> <!-- submenu hier --> </div> <div id="mainContent"> <!-- de content (met daarin boxes) hier --> </div> <div id="footer"> <!-- footer hier --> </div> </div> </body> |
ook deze pagina maakt gebruik van de stylesheet.
De voor mijn probleem relevante code (neem ik aan):
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
| #mainBody {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color: #ffffff;
}
#mainParent {
border-collapse: collapse;
border-spacing: 0px;
width: 754px;
padding: 0px 0px 0px 0px;
margin: auto;
}
#mainContent {
position: relative;
width: 754px;
}
#footer {
height: 26px;
background-image: url('<?=$basepath?>/images/footer.png');
background-repeat: no-repeat;
} |
Mijn probleem:
Ik gebruik voor de boxes dus een absolute positionering. Dit werkt goed. Alle boxes komen op de opgegeven positie etc.
De footer van de pagina komt echter direct onder het submenu. Met andere woorden: De mainContent heeft geen "inhoud" en daardoor rekt hij niet mee.
Wanneer ik de position van .box verander in relative rekt de mainContent mooi mee en staat de footer netjes onderaan. De margin-top van elke box klopt dan echter niet, aangezien hij die dan berekend vanaf zijn voorganger ipv de parent. Alle boxes staan dus min of meer onder elkaar.
Ik heb van zowel de footer, de mainContent, de mainParent als de mainBody zo'n beetje alle verschillende combinaties geprobeerd als het gaat om Position: relative/absolute. Het mocht niet baten.
De reden waarom ik concludeer dat de mainContent geen inhoud heeft is dat wanneer ik hem een hoogte meegeef hij wel meerekt. Ook als ik er geen box inzet maar "losse" tekst schuift de footer ook goed mee.
Mijn vraag:
Ik wil de positionering van de boxes kunnen opgeven én ik wil een footer die onderaan mijn pagina staat.
Is het op te lossen met css (en doe ik dus iets fout)
óf is het alleen "smerig" op te lossen (met javascript of met php hoogte berekenen en meegeven)?
Een linkje naar de pagina zal ivm de spam-regels hier niet erg op prijs gesteld worden denk ik, dus ik hoop dat ik genoeg duidelijk heb gemaakt.
[ Voor 9% gewijzigd door phYzar op 09-12-2003 11:48 ]
:strip_exif()/u/25264/momentum.gif?f=community)
:strip_icc():strip_exif()/u/58343/Turtle.jpg?f=community)
