[CSS] opmaak verpest door scrollbar

[Garoth]

Ik ben bezig met een online applicatie, die onder andere informatie in een tabel toont. Deze tabel heb ik opgedeeld in drie tabellen, eentje voor de header, eentje voor de footer en eentje met de content. Deze drie heb ik in drie Div's neergezet. Zo krijg je de layout dat de header en footer blijven staan en de content body scrolled.

Dit gaat allemaal leuk en aardig, maar bij de body div komt er een verticale scrollbar bij. Hierdoor wordt meteen de hele opmaak verneukt. De tabellen zijn zo gemaakt dat de breedte van de cellen in procenten aangegeven wordt, en ze staan gecentreerd in de Div's, die ook gecentreerd zijn. Maar als er dus een scrollbar bij komt, wordt de breedte van de tabel in het content gedeelte kleiner en past deze dus niet meer bij de header en de footer.

De scrollbar is altijd aanwezig bij het content gedeelte. Ik had als idee om een spacer te gebruiken van 12 pixels breed, en deze naast de header en footer tabel neer te zetten, maar helaas lukt dit niet. En aangezien ik de tabel opmaak in procenten doe, kan ik er ook niet nog een 12px brede kolom bij proppen.

Iemand enig idee hoe ik of die spacer op de goede plaats krijg (zodat de tabel ook opschuift) of hoe ik het anders zou kunnen fixen? Ik neem aan dat stylesheets hier misschien handig kunnen zijn. Ik gebruik deze ook voor de positionering. (misschien is er een manier om de scrollbar te laten verdwijnen, terwijl je wel nog steeds kunt scrollen?)

stukje (pseudo)code (redelijk standaard, maar om een beeld te vormen):

code:

<DIV align="center" id="header" style="position: absolute; top:0px; height: 10%;">
  <table align="center">
  <tr>
    <td width="20%"></td>
    <td width="20%"></td>
    <td width="20%"></td>
    <td width="20%"></td>
    <td width="20%"></td>
  </tr>
  </table>
</div>

<DIV align="center" id="body" style="position: absolute; top:10%; height: 80%;">
  <table align="center">
  <tr>
    <td width="20%"></td>
    <td width="20%"></td>
    <td width="20%"></td>
    <td width="20%"></td>
    <td width="20%"></td>
  </tr>
  </table>
</div>

<DIV align="center" id="footer" style="position: absolute; top:90%; height: 10%;">
  <table align="center">
  <tr>
    <td width="20%"></td>
    <td width="20%"></td>
    <td width="20%"></td>
    <td width="20%"></td>
    <td width="20%"></td>
  </tr>
  </table>
</div>

[ Voor 39% gewijzigd door Garoth op 13-01-2005 09:04 ]

[Woudloper]

Waarom niet gewoon werken met fixed width en height? Lijkt mij een stuk verstandiger...

[Garoth]

omdat de tabel op veel verschillende resoluties bekeken wordt. Dan is de fixed opmaak niet echt geheel mooi.

Maar ik bedenk me net dat ik ook eens iets kan proberen met scrollbars. Als ik de scrollbars in de header en de footer wel toon, maar ze de kleuren van de achtergrond geef, dan zijn ze onzichtbaar, maar de tabel is wel recht.

Dat ga ik ff proberen. Ik zal het resultaat hier posten.

edit --- Dit werkt! Het is misschien niet zo'n mooie stijl, maar het doet wat het moet doen...

Dan kan dit topic al weer dicht. Raar dat je altijd vindt wat je zoekt, net als je het gevraagd hebt...

[ Voor 21% gewijzigd door Garoth op 13-01-2005 10:15 ]

[paragon]

Maar dat werkt alleen voor IE natuurlijk of niet?

[Garoth]

Ik heb het geprobeerd in FireFox, maar inderdaad, daar werkt het voor geen meter...

Maar aangezien mijn applicatie alleen moet draaien op IE is dat niet zo'n probleem. Het is toch alleen voor intern gebruik.

Maar als het goed is moet FireFox het in een keer al goed doen , en is dit probleem daar niet van toepassing...
grtz
G

[BetuweKees]

misschien half offtopic, maar waarom gebruik je niet gewoon thead, tfoot en tbody (HTML 4.01 specs) voor je header en footer in plaats van de drie losse tabelletjes die je nu gebruikt?