Tabel height 100% vult niet het hele scherm.

Status
Niet open voor verdere reacties.
E

evertVB

Gebruiker
Lid geworden
6 apr 2009
Berichten
570
Ik heb als doel om, door middel van een tabel, een verticale strook aan de linkerkant een iets andere kleur te geven.
Die verticale strook moet wel verticaal het hele beeldscherm vullen.

Ik heb deze css:

Code: 
body                                  {background-color: #990000; text-align: center; margin: 0px}
table.main                            {width: 100%; height: 100%;}
table.main td.left,
table.main td.menu,
table.main td.right                   {height: 100%;}
table.main td.left                    {width: 75px;}
table.main td.menu                    {width: 250px;background: #991100;text-align: left; vertical-align: top; color: #220000;}
table.main td.right                   {width: 100px;}

En ik heb deze html:

Code: 
<body>

<table class="main">
<tr>
<td class="left"></td>
<td class="menu">

<br/>
<br/>
<br/>
<p><a href="../">Home</a></p>
<br/>


</td>
<td>


..... overige html .......

</td>
<td class="right"></td>
</tr>
</table>

</body>

De life locatie: http://www.dyitto.com

Maar de verticale strook (d.i. de menu-cel) loopt niet door tot onderaan het beeldscherm.
Daarvoor had ik nou juist height 100% in de css gezet.

Hoe krijg ik dit beter?
 
Hoe krijg ik dit beter?
Klik om te vergroten...
Ik zou zeggen: de tabel-opmaak verlaten, en er met een paar <div>'s en css een mooie kolommen-opmaak van maken. :)
Voor een ideetje: de Online Page Creator.
In de broncode staat wat je moet doen om de menukolom een paginahoog kleurtje te geven: je maakt er een nep-kolom ("faux column") van met een zich verticaal herhalende achtergrond-afbeelding die de juiste kleur heeft.

Met vriendelijke groet,
CSShunter
 
Bedankt voor de tip, ik ga ermee stoeien.
Ook wil ik toch nog wel weten hoe ik specifiek die tabel goed krijg zoals beschreven in mijn vraag.

Maar ik vind het een mooie tool:)
 
Hoi Evert,
Ook wil ik toch nog wel weten hoe ik specifiek die tabel goed krijg zoals beschreven in mijn vraag.
Klik om te vergroten...
Aha! Nou krijg ik door de <table class="main"> het angstige voorgevoel dat je van plan bent er nog meer tables in te gaan zetten voor de layout, en waarschijnlijk geneste tables. Of geneste tables in geneste tables...
Maar: tabellen voor de opmaak zijn "EVIL". :evil:

Waarom? Tabellen lijken makkelijk, omdat ze zich aanpassen aan de inhoud. Maar daarin zit meteen het grote gevaar: ze gaan een eigen leven leiden en je hebt niet meer in de hand wat ze gaan doen. Behalve dat, tabellen (en tabellen in tabellen, en tabellen in tabellen in tabellen) zorgen voor een knetterende milieuvervuiling in je html: overal <tr>'s en <td>'s, vaak lege <tr>'s en <td>'s om de tabel maar vol te krijgen, en je raakt kompleet de weg kwijt als je later ergens iets wilt veranderen. Als tabelcellen gevuld worden met een achtergrond-figuur, kan het erg fout gaan als de tabelcel "uit zichzelf" hoger of breder wordt. Het geeft ook nog echte milieuvervuiling. Al die extra html-code moet over internet geblazen worden, en dat kost energie voor de servers en voor je pc thuis die alles op het scherm moet zien te krijgen. Het kost ook nog extra tijd voor downloaden: je pagina wordt er trager door. Tabellen zijn ook star: als de ene kolom/rij hoger wordt, worden de andere dat ook, en het is maar de vraag of je dat wilt.

CSS voor de opmaak is veel flexibeler: door gebruik als apart stylesheet geeft CSS korte en zuivere html-code (in plaats van dat je in elke pagina opnieuw die tabel [in tabel [in tabel] enz.] moet hangen), en spaart aan alle kanten energie (ook die van jou als je later iets gaat veranderen). :love:

Na dit inleidend pleidooi (dat tegelijk ook mijn conclusie is :) ) gaan we eens kijken wat er nu met je tabel aan de hand is.
Ik heb exact je maatvoering aangehouden, maar de kleurtjes wat aangepast om alles duidelijker te kunnen zien, en er een maatlatje in gezet dat niets aan de opmaak verandert.
Eerst de breedte
De tabel heb je op 100% breed gezet, dus schermbreed-vullend. Daarmee loop je het risico dat er niets van je opgegeven kolombreedtes overblijft!
  • De kolommen worden smaller dan opgegeven, als de resolutie van de monitor die de bezoeker van de pagina gebruikt, te laag is voor de pagina-opmaak.
  • Bij 100% tabelbreedte gaat een tabel namelijk de ruimte in de kolommen "eerlijk verdelen", want dat is het kenmerk van een tabel
  • Bij minder totale breedte dan de optelsom van de kolombreedtes wordt alles wat geen "harde inhoud" heeft (zoals het paddenstoelplaatje met echte vaste breedte) ... afgeknaagd. Er komt géén horizontale scrollbar!
    Probeer maar eens testpagina 1 op een resolutie van 1024x768px (die nog heel veel gebruikt wordt) of lager.

  • Dit is testpagina 2.
  • Hier is het plaatje kleiner gemaakt, en nu gaat het wel goed. - Voor elke resolutie kan je een "kritische breedte" van het plaatje (=van de content-kolom) uitrekenen. Bij 1024x768 is het (rekening houdend met een rechter scrollbar) in de buurt van de 575px. Maar:

  • Dit is testpagina 3.
  • Als je de content deze 575px breedte geeft, is ie alleen op 1024x768px resolutie exact. Bij 1280x1024px wordt de resterende breedte (naar verhouding) uitgesmeerd over de 4 kolommen. En bij 800x600px wordt er weer afgekalfd.
Nu de hoogte
Volgens de css-regels is een hoogte in procenten: het opgegeven percentage ten opzichte van het omsluitend element. Heeft dat omsluitend element géén opgegeven hoogte, dan gebruikt een tabel het "auto"-mechanisme = dan wordt de hoogte net zo hoog als nodig is voor de inhoud van de hoogste cel van de tabel.

Eén niveau hoger in de html-hiërarchie dan de <table> zit de <body>, die geen opgegeven hoogte had. Dat moet dus worden: body { height: 100%; }.
Nu heeft wel de <body> een hoogte die doorwerkt op de tabelhoogte, maar ...
  • Dit is testpagina 4.
  • Er gebeurt nog steeds niets. De <body> heeft op zijn/haar beurt een hoogte in % t.o.v. het omsluitende element van de <body>. Dat is de <html>, die in hoogte onbepaald was. Die moet dus ook de 100% hoogte krijgen.
  • Dit is testpagina 5 met 100% height voor html, body en table.
Met vriendelijke groet,
CSShunter
 
Bedankt voor deze uitgebreide uitleg!:):)

csshunter zei:
Aha! Nou krijg ik door de <table class="main"> het angstige voorgevoel dat je van plan bent er nog meer tables in te gaan zetten voor de layout, en waarschijnlijk geneste tables. Of geneste tables in geneste tables...
Klik om te vergroten...

Hm,
Wat ik wilde is:
- op mijn todo lijstje zetten dat ik alle layout tables uit mijn website ga halen (iets langere termijn:confused:)
- op korte termijn die 'balk' verticaal laten aansluiten (Met de 100% op html-niveau is dat in elk geval gelukt:))

Ik zal eerst even wat moeten studeren op die faux column. Mijn doel is ook dat ik de html/css die ik gebruik ook goed begrijp.
 
Hoi Evert,
Dat todo-lijstje lijkt me een uitstekend voornemen! "Tables? Slopen die hap!" :D

Voor meer uitleg over het Faux Column principe is er bv. het originele artikel van Dan Cederholm in "A List Apart": www.alistapart.com/articles/fauxcolumns.

Ter illustratie van een layout zonder enige tabel heb ik nog dit voorbeeldje: "Elastico!"
- Rekken en trekken met vensters en sidebars, andere lettergroottes, andere resoluties: het kan allemaal, en de boxen passen zich steeds automatisch aan (met hun home-made borders). Zonder javascript ook: alleen CSS. :)

Met vriendelijke groet,
CSShunter
 
Ja, leuk! :thumb:

Je kunt nu bv. de {height: 500px;} van de #inhoud er uit halen, zodat bij veel tekst enz. die vastgeprikte hoogte er niet voor zorgt dat de tekst buiten boord van de achtergrondkleuren valt.
Of je kunt er een minimale hoogte van maken: zoals #inhoud {min-height: 500px;} zodat een korte pagina nog altijd een bepaalde hoogte krijgt.
In dat geval moet er voor IE6 (als je die wilt bedienen) nog een "Conditional Comment" bij in de <head>, want IE6 kent geen min-height, maar trekt zich aan de andere kant niets aan van een opgegeven hoogte, als de inhoud van een element daar overheen gaat. Voor IE6 geldt een opgegeven hoogte dus tegelijk als min-height! Dit CC moet onder de link naar het stylesheet komen te staan:
HTML: 
<link rel="stylesheet" type="text/css" href="fcmenu.css" />
<!--[if lte IE 6]>
	<style type="text/css">
		#inhoud { height: 500px; }
	</style>
<![endif]-->
</head>
Succes verder!
Met vriendelijke groet,
CSShunter

PS: waarom heb je gekozen voor een Transitional-variant voor het Doctype?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan