Toon posts:

[html] tabellen over de gehele hoogte van de pagina

Pagina: 1
Acties:

zaterdag 8 februari 2003 14:51

Acties:

Verwijderd

Topicstarter
Situtatie:
Ik heb 3 tabellen onder elkaar. De eerste twee tabellen bevatten plaatjes, en de cellen hebben dus een bepaalde hoogte in pixels. Dit kan niet in procenten doordat de plaatjes dan niet goed op elkaar aansluiten.
De onderste tabel bevat alleen tekst.

Probleem:
De onderste tabel moet altijd minimaal tot de onderkant van het scherm doorlopen.

Geprobeerd:
Eigenlijk vrijwel alles :D.
- Heb in de onderste tabel de hoogte op 100% ingesteld. Alleen neemt hij dit te letterlijk. Hij maakt de onderste tabel dan even groot als het scherm, zodat hij groter dan het scherm wordt, aangezien er nog 2 tabellen boven staan.
- Ik heb een extra tabel aangemaakt, waar de drie andere tabellen instaan en deze ook hoogte 100% gegeven. Echter wordt er dan van de laatste tabel een stukje tekst niet getoond.
- Verder heb ik overal geprobeerd height="100%" neer te zetten maar dit had niets tot gevolg, of zorgde ervoor dat de hele lay-out verkeerd werd.

Gezocht:
Jeps:
- Hier op tweakers, wel wat topics over hoe je een tabel 100% moest maken e.d. maar dat wist ik al.
- Thuis, in oude code waar ik dacht dat ik het al een keer toegepast had, maar dat was dus niet zo.

Tot slot:
Ik hoop dat ik een beetje duidelijk ben geweest in mijn post, en hoop dat er een oplossing voor mijn probleem is.
In ieder geval alvast bedankt.

zaterdag 8 februari 2003 14:59

Acties:
  • Blauw
  • Registratie: Januari 2001
  • Laatst online: 21-08 16:09

Blauw

De Schreeuw

Misschien leuk als je ook al een stukje code vast hier plakt?

zaterdag 8 februari 2003 15:02

Acties:
  • Super_ik
  • Registratie: Maart 2001
  • Laatst online: 09:29

Super_ik

haklust!

code:
1

<body LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

[ Voor 33% gewijzigd door Super_ik op 08-02-2003 15:08 ]

8<------------------------------------------------------------------------------------
Als ik zo door ga haal ik m'n dood niet. | ik hou van goeie muziek

zaterdag 8 februari 2003 15:03

Acties:

Verwijderd

Topicstarter
HTML:
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

<html>
    <head>
        <!-- Titel e.d. -->
    </head>
    <body bgcolor="#999999" height="100%" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
            <tr>
                <td height="38" width="197"></td>
            </tr>
        </table>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
            <tr> 
                <td width="263">
                </td>
            </tr>
        </table>
        <table width="100%" border="0" height="100%" cellspacing="0" cellpadding="0" align="center">
            <tr> 
                <td width="533" height="30" bgcolor="#FFFFFF">
                </td>
            </tr>
            <tr> 
                <td colspan="2" valign="top"> 
                    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="24" align="center">
                        <tr> 
                            <td valign="top" bgcolor="#FFFFFF">
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

Heb alles een beetje versimpeld en de helft eruit geknipt, anders werd het een beetje veel.

[ Voor 80% gewijzigd door Verwijderd op 08-02-2003 15:04 . Reden: leesbaarheid ]

zaterdag 8 februari 2003 15:04

Acties:
  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11-2025

OkkE

CSS influencer :+

Je kan het doen door 1 tabel met 3 cellen te gebruiken..
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html><head><title>Zoiets</title></head>
<body>
<table height="100%">
  <tr>
    <td height="100">plaatje van 100 px</td>
  </tr>
  <tr>
    <td height="80">plaatje van 80 px</td>
  </tr>
    <td>Tekst</td>
  </tr>
</table>
</body>
</html>


Edit:
En dan inderdaad in je BODY tag de margin op 0.
code:
1

<body style="margin:0px">

[ Voor 38% gewijzigd door OkkE op 08-02-2003 15:07 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

zaterdag 8 februari 2003 15:10

Acties:

Verwijderd

Topicstarter
Thx OkkE, werkt inderdaad.

zaterdag 8 februari 2003 15:11

Acties:
  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11-2025

OkkE

CSS influencer :+

Zo, ik heb mijn goede daad weer gedaan voor vandaag. :P

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

zaterdag 8 februari 2003 15:14

Acties:

Verwijderd

En als we dan ook nog valide code willen schrijven doen we het zo:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12

<div id="container">
 <div id="header">Plaatje hier</div>
 <div id="content">Inhoud hier</div>
 <div id="footer">Voettekst</div>
</div>

//en de CSS

html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; }
/* hier stond onzin 8)7 */
#container { height: 100%; }

een table kan namelijk helemaal geen height attribuut hebben volgens W3C :)

[ Voor 54% gewijzigd door Verwijderd op 08-02-2003 15:45 ]

zaterdag 8 februari 2003 15:38

Acties:

Verwijderd

Verwijderd schreef op 08 februari 2003 @ 15:14:

padding is de juiste selector, margin toegevoegd voor
backwards compatibility

padding is geen selector, maar dat terzijde...

Mag ik weten waarop jij baseert dat margin hier verkeerd gebruikt wordt? Ik vind het namelijk volledig correct om margin te gebruiken voor het body element.

Het html element is het documentElement, en niet de body. Zowel Mozilla als Internet Explorer zien de 'normale' rand rond een pagina als margin. Dat is niet verkeerd, en het is niet eens verplicht om er een rand omheen vrij te houden. Dat Opera het als padding ziet is ook niet verkeerd.

Wat Internet Explorer en Mozilla wél verkeerd doen, is dat de background-color van het html element wordt ge-inherit van zijn eigen childElement: het body element.

Geef het html element eens een eigen achtergrondkleur, en het body element ook. Dan gaat het (in ieder geval in Internet Explorer 6.0) wél goed. Ofwel, als je niet de body als viewport van het venster beschouwd, maar juist het html element, en dus html een background-color geeft, dan is er niets aan de hand.

Sterker nog, body kun je gebruiken zoals je een div of ander block-level element kunt gebruiken.

Maar goed, dit verhaal is helemaal offtopic, maar ik wilde wel even gezegd hebben dat een margin voor het body element géén onzin is. Voor het html element kun je natuurlijk géén hoogte, breedte of border opgeven. Die zijn afhankelijk van je browservenster.

[ Voor 1% gewijzigd door Verwijderd op 08-02-2003 15:46 . Reden: typo ]

zaterdag 8 februari 2003 15:45

Acties:

Verwijderd

Verwijderd schreef op 08 februari 2003 @ 15:38:

[...]

padding is geen selector, maar dat terzijde...
8)7 heb ik dat echt getypt 7(8)7
Mag ik weten waarop jij baseerd dat margin hier verkeerd gebruikt wordt? Ik vind het namelijk volledig correct om margin te gebruiken voor het body element.

Het html element is het documentElement, en niet de body. Zowel Mozilla als Internet Explorer zien de 'normale' rand rond een pagina als margin. Dat is niet verkeerd, en het is niet eens verplicht om er een rand omheen vrij te houden. Dat Opera het als padding ziet is ook niet verkeerd.

Wat Internet Explorer en Mozilla wél verkeerd doen, is dat de background-color van het html element wordt ge-inherit van zijn eigen childElement: het body element.

Geef het html element eens een eigen achtergrondkleur, en het body element ook. Dan gaat het (in ieder geval in Internet Explorer 6.0) wél goed. Ofwel, als je niet de body als viewport van het venster beschouwd, maar juist het html element, en dus html een background-color geeft, dan is er niets aan de hand.

Sterker nog, body kun je gebruiken zoals je een div of ander block-level element kunt gebruiken.

Maar goed, dit verhaal is helemaal offtopic, maar ik wilde wel even gezegd hebben dat een margin voor het body element géén onzin is. Voor het html element kun je natuurlijk géén hoogte, breedte of border opgeven. Die zijn afhankelijk van je browservenster.
klopt ja. Ik heb even gedacht dat het body element de volledige zichtbare content bevatte, maar dat is onjuist. Het html element zit daar nog omheen, zoals ik stom genoeg al aangaf in het voorbeeld 8)7

Om het even simpel te houden: ik zat er idd naast daar, jouw verhaal klopt als een bus :)
Pagina: 1
Reageer