[HTML] Height en W3 Valid

Ik heb mij eens verdiept in de W3 standards, en nu ben ik erachter gekomen dat "height" niet als attribute bij de Table-tag mag worden gebruikt. Nu heb ik ook gelezen dat dit een veel voorkomend probleem is en dat de enige oplossing (die overigens niet eens in alle browsers werkt) is dat je CSS moet gebruiken.

Nu heb ik op www.bedrijfhandel.nl/test/test.html geprobeerd een W3 valid pagina te maken. Dat is gelukt, maar zoals jullie zien is in IE de pagina veel te lang en loopt het linker menu alsnog niet door tot onder. En dat terwijl ik al verschillende combinaties heb geprobeerd met styles.


Cascading Stylesheet:

1	html, body {height: 100%;}

HTML:

1	<table style="height: 100%;">

Als je naar beneden scrollt dan kan je zien dat in IE de pagina precies 84 pixels te hoog is, en dat is precies de hoogte van de header cell.

Kan iemand mij hierbij helpen? Hoe krijg ik het menu dus zo hoog als de browser is?

P.S.: Denk dat dit overigens een handig topic is om ergens aan toe te voegen want het is een veel vorkomend probleem...

vreeke1 wijzigde dit bericht 29-12-2005 21:47 (11%)

Als je je dan toch in standaarden aan het verdiepen bent: begrijp dat CSS niet een oplossing is om aan de standaard te voldoen, maar dat het met semantiek te maken heeft, en nog wat van die leuke dingen. Lees dan gelijk even dit en vooral dit

In Firefox is de table ook echt 100% hoog, en in míjn IE (6.0) is de pagina flink wat hoger dan 84px, op het oog 100% + wat er boven de table zit: de header. Dus volgens mij is 'ie in IE wel degelijk 100% hoog. Dus volgens mij is je probleem non-existent?

JHS wijzigde dit bericht 29-12-2005 21:59 (4%)

wat de TS bedoelt, is dat de pagina in zn totaal 100% moet zijn, en niet 100% + 84px.

Wat je moet doen is je content cel geen hoogte geven (geen height: 100%) en je tabel op 100% hoogte laten staan. Je geeft dan alleen je header cel een hoogte en de rest wordt automatisch opgevuld door je content cel.

Maar je moet natuurlijk zowiezo geen tabellen voor layout gebruiken:

quote:

JHS schreef op donderdag 29 december 2005 @ 21:58:
Als je je dan toch in standaarden aan het verdiepen bent: begrijp dat CSS niet een oplossing is om aan de standaard te voldoen, maar dat het met semantiek te maken heeft, en nog wat van die leuke dingen. Lees dan gelijk even dit en vooral dit

quote:

MueR schreef op donderdag 29 december 2005 @ 22:00:
wat de TS bedoelt, is dat de pagina in zn totaal 100% moet zijn, en niet 100% + 84px.

Dit bedoel ik inderdaad!

quote:

Borizz schreef op donderdag 29 december 2005 @ 22:05:
Wat je moet doen is je content cel geen hoogte geven (geen height: 100%) en je tabel op 100% hoogte laten staan. Je geeft dan alleen je header cel een hoogte en de rest wordt automatisch opgevuld door je content cel.

Maar je moet natuurlijk zowiezo geen tabellen voor layout gebruiken:

[...]

Ik heb alle height="100%" weggehaald uit het bestand en nu werkt het nog niet, ondanks dat de tabel wel op height: 100% staat. Hij maakt de pagina iig niet meer veels te hoog. Nu het linker menu nog

vreeke1 wijzigde dit bericht 29-12-2005 22:16 (8%)

quote:

vreeke1 schreef op donderdag 29 december 2005 @ 22:12:
[...] Ik heb alle height="100%" weggehaald uit het bestand en nu werkt het nog niet, ondanks dat de tabel wel op height: 100% staat

Het kan niet op een eenvoudige manier, behalve dan door je design liquid te maken, volgens mij, of daar met javascript te vogelen. Zonder javascript kan je je header in een container doen met bijvoorbeeld height: 20%; en je table in een container met height: 80%;, waarna je de table binnen die container 100%; laat zijn. Als je 100%-84px wil bereiken moet je aan de slag met javascript .

[CSS] Lange kolom duwt in FF footer niet naar beneden

quote:

JHS schreef op donderdag 29 december 2005 @ 22:18:
[...]
Het kan niet op een eenvoudige manier, behalve dan door je design liquid te maken, volgens mij, of daar met javascript te vogelen. Zonder javascript kan je je header in een container doen met bijvoorbeeld height: 20%; en je table in een container met height: 80%;, waarna je de table binnen die container 100%; laat zijn. Als je 100%-84px wil bereiken moet je aan de slag met javascript .

Ik had al zoiets gehoord ja, maar het lijkt mij toch te gek vol woorden dat HTML zoiets als dit niet goed kan

http://www.bedrijfhandel.nl/test/test2.html
Hierbij een overzichtelijker HTML bestand. Het is dus mijn bedoeling om in Internet Explorer de zwarte balk tot aan de onderkant van de browser te laten lopen. Dit wordt namelijk mijn menu. Maar zoals te zien is wordt hij te groot. Dit komt weer doordat ik <td height="100%"> heb gebruikt maar als ik dat niet gebruik krijg ik het brakke resultaat zoals in:
http://www.bedrijfhandel.nl/test/test3.html

quote:

vreeke1 schreef op donderdag 29 december 2005 @ 22:21:
[...]


Ik had al zoiets gehoord ja, maar het lijkt mij toch te gek vol woorden dat HTML zoiets als dit niet goed kan

HTML is ook niet bedoelt voor styling en positioning, daar is CSS voor.
Probleem met CSS is dat de ontwikkeling en adoptie daarvan nogal danig vertraagd is en wordt door een niet nader te noemen softwarebedrijf uit Redmond die toevallig jaren geleden een browser op de markt hebben gebracht die op dit moment nog steeds een dominate positie inneemt op de browsermarkt maar waar al jaren geen verbeteringen in zijn aangebracht...

Voor de rest kan ik dit topic ook maar in 1 zin samenvatten: tables zijn niet voor layout bedoelt. Er zijn op het web zat voorbeelden van goed gebruik van HTML en CSS waarin een dergelijke opzet als die jij voor ogen hebt eenvoudig crossbrowser te realiseren is...

quote:

crisp schreef op donderdag 29 december 2005 @ 22:31:
tables zijn niet voor layout bedoelt.

Daarom is de frontpage van tweakers.net ook zonder tabellen opgebouwd.

Ik begrijp dat HTML niet voor stylen is maar toch vind ik het allemaal maar raar.

quote:

Er zijn op het web zat voorbeelden van goed gebruik van HTML en CSS waarin een dergelijke opzet als die jij voor ogen hebt eenvoudig crossbrowser te realiseren is...

Zou je een voorbeeld kunnen geven want ik heb tervergeefs gezocht, en kreeg alleen maar websites die niet door de W3 Validator kwamen, helaas...

En zoals je ziet ben ik met een website bezig die op een breed publiek is gericht, dus om nu layers te gebruiken voor de layout zie ik niet zo zitten. Dit ivm de ondersteuning van browsers, of valt dit mee?

quote:

TheBorg schreef op donderdag 29 december 2005 @ 22:37:
[...]

Daarom is de frontpage van tweakers.net ook zonder tabellen opgebouwd.

De Tnet frontpage is code gemaakt ver voor mijn tijd. Delen zijn al aangepast (de updatetrackers en het menu bijvoorbeeld), maar de rest kan pas met een volledige overhaul echt goed aangepakt worden.
Kijk liever naar bijvoorbeeld de markup van dit forum welke een jaar geleden volledig op de schop is gegaan.

quote:

vreeke1 schreef op donderdag 29 december 2005 @ 22:39:
En zoals je ziet ben ik met een website bezig die op een breed publiek is gericht, dus om nu layers te gebruiken voor de layout zie ik niet zo zitten. Dit ivm de ondersteuning van browsers, of valt dit mee?

Ten eerste vind ik het woord 'layers' misleidend. De meeste mensen gebruiken het als een soort synoniem voor div-elementen (wat m.i. weer iets anders is dan het layer-element uit het NS4 tijdperk), maar een layer impliceerd iets als werken met lagen wat in de meeste gevallen gewoonweg niet zo is als je het over HTML/CSS-layout hebt.

Je hebt wel een punt mbt browser-ondersteuning (en dan specifiek als het gaat om 1 bepaalde, door mij eerder gerefereerde browser) - browser-quirks, bugs, en tekortkomingen maken de leercurve wel wat stijler als je af wilt stappen van de 20e-eeuwse manier van het opmaken van web-pagina's

Het is niet om te flamen hoor. Maar iedereen roept altijd keihard 'CSS, semantiek, bla, bla' terwijl een pixel perfecte layout (en dat in elke browser) m.b.v. tables heel wat minder hoofdpijn kost. En dat ligt niet aan CSS maar aan de browsers.

Just my opinion.

quote:

TheBorg schreef op donderdag 29 december 2005 @ 22:49:
Het is niet om te flamen hoor. Maar iedereen roept altijd keihard 'CSS, semantiek, bla, bla' terwijl een pixel perfecte layout (en dat in elke browser) m.b.v. tables heel wat minder hoofdpijn kost. En dat ligt niet aan CSS maar aan de browsers.

Just my opinion.

Niks kost hoofdpijn als je het meteen goed aanleert.

*Je moet proberen om met vragen te komen voordat je aan iets begint. Hierdoor begin je met een goede basis waardoor je niet met lastige problemen komt te zitten. Daarbij is je code zo schoon mogelijk houden daar ook heel handig bij.

Mediaconsument wijzigde dit bericht 29-12-2005 22:53 (23%)

quote:

vreeke1 schreef op donderdag 29 december 2005 @ 22:38:

Zou je een voorbeeld kunnen geven want ik heb tervergeefs gezocht, en kreeg alleen maar websites die niet door de W3 Validator kwamen, helaas...

Een voorbeeld:
http://www.w3.org/TR/WCAG10/
http://www.w3.org/TR/html401/
http://www.w3.org/TR/CSS21/

Ja, veel leesvoor dus. Van het kijken naar andere websites zul je in dit geval weinig leren. Je zult eerst de achterliggende gedachten en principes moeten begrijpen. Er zijn behalve mensen ook nog mensen met bepaalde handicaps (blind, slechtziend, woordblind, kleurenblind, doof, verlamd, ouderdom) en zoekmachines.

Het gaat voornamelijk om begrip en presentatie. Voor machines is het begrip het probleem, voor mensen is het de presentatie.

Jouw site moet zo goed mogelijk "werken", en dat betekent dat in gevallen die je wellicht niet helemaal kon voorzien, machines moeten proberen om er toch nog wat van te maken. En dat kunnen ze beter als je de juiste markup (HTML in dit geval) gebruikt.

quote:

vreeke1 schreef op donderdag 29 december 2005 @ 22:39:
En zoals je ziet ben ik met een website bezig die op een breed publiek is gericht, dus om nu layers te gebruiken voor de layout zie ik niet zo zitten. Dit ivm de ondersteuning van browsers, of valt dit mee?

De ondersteuning van CSS is in alle browsers tegenwoordig van dusdanig niveau dat het realiseren van zowat elke layout wel cross-browser mogelijk is (zij het soms met wat omwegen in bepaalde browsers). Sommige layouts echter zijn misschien (iets) eenvoudiger te bewerkstelligen door gebruik van tables voor de layout, maar dit blijft hoe dan ook fout.

Je zou denk ik het beste eens kunnen beginnen met wat te lezen over CSS en (semantische) HTML (en daarover is genoeg te vinden), want aan je site te zien ben je een tijdje in de website wereld stil blijven staan (nofi).

wat enigszins nuttige links die ik zo snel gevonden heb:

http://www.naarvoren.nl/artikel/structuur/
http://home.parse.nl/~michiel/semantiek.html (reeds eerder genoemd)
http://www.brainjar.com/css/positioning/
http://www.richinstyle.com/guides/css2.html

quote:

TheBorg schreef op donderdag 29 december 2005 @ 22:49:
Het is niet om te flamen hoor. Maar iedereen roept altijd keihard 'CSS, semantiek, bla, bla' terwijl een pixel perfecte layout (en dat in elke browser) m.b.v. tables heel wat minder hoofdpijn kost. En dat ligt niet aan CSS maar aan de browsers.

Ligt dat niet meer aan gebrek aan begrip en ervaring van de persoon die zich ermee bezig houdt?

Overigens is het natuurlijk ook de truc om websites te maken die niet per se pixel perfect hoeven te zijn. Sterker nog, de jaren 90 technieken maken dat juist ingewikkeld, en zorgen er meestal voor dat onderhoud plegen aan een website een hel is.

Ik wil me wel verdiepen in CSS maar ik vraag me sterk af of dit wel handig is voor mijn website, ivm met de compatibility dus.
Wat raden jullie aan voor een website die door een breed publiek wordt bezocht.
Is het bijvoorbeeld ook handig om XHTML te gaan gebruiken? Niet alleen met het oog op de toekomst maar juist op dit moment, is het nu ook al handig om te gebruiken?

vreeke1 wijzigde dit bericht 29-12-2005 23:00 (29%)

quote:

TheBorg schreef op donderdag 29 december 2005 @ 22:49:
Het is niet om te flamen hoor. Maar iedereen roept altijd keihard 'CSS, semantiek, bla, bla' terwijl een pixel perfecte layout (en dat in elke browser) m.b.v. tables heel wat minder hoofdpijn kost. En dat ligt niet aan CSS maar aan de browsers.

Just my opinion.

Ik sluit me aan bij Cheatah: misschien kan jij met je beperkte CSS-kennis sneller een layout in elkaar flansen met tabellen, maar ik weet uit ervaring dat latere aanpassingen van dergelijke code minstens 2x zoveel tijd kost dan wanneer het een layout is gebaseerd op CSS.
Daarbij, met de nodige ervaring (ja, ervaring opbouwen kost tijd), is het opzetten van een layout met CSS meestal niet eens tijdrovender dan met tabellen.

Het ligt niet aan de browsers, het ligt imho aan 1 specifieke browser. Als die browser vlak na de recommendation status van CSS2 (in 1998) deze recommendation had overgenomen als implementatie waren we hedentendage al veel verder geweest. De CSS3 recommendations en drafts pakken al veel issues aan waar designers tegenaanlopen doordat bepaalde zaken in CSS2 niet handig of makkelijk te realiseren zijn, maar dankzij eerdergenoemde browser kunnen we nu nog minstens 5 jaar wachten totdat dergelijke vernieuwingen gemeengoed worden...

quote:

vreeke1 schreef op donderdag 29 december 2005 @ 22:58:
Ik wil me wel verdiepen in CSS maar ik vraag me sterk af of dit wel handig is voor mijn website, ivm met de compatibility dus.
Wat raden jullie aan voor een website die door een breed publiek wordt bezocht.
Is het bijvoorbeeld ook handig om XHTML te gaan gebruiken? Niet alleen met het oog op de toekomst maar juist op dit moment, is het nu ook al handig om te gebruiken?

check cheatah's eerste post

en lees dit eens: http://home.parse.nl/~michiel/semantiek.html

dus dit is denk ik wat iedereen tegenwoordig aanraadt:

HTML voor de structuur
CSS voor de presentatie
en js voor evt gedrag

Verder gebruik je beter gewoon HTML4 ipv XHTML, zoek maar eens op google: http://www.google.nl/sear...nG=Google+zoeken&meta=

Sappie wijzigde dit bericht 29-12-2005 23:05 (41%)

XHTML is geen opvolger van HTML zoals veel mensen denken. XHTML is een XML-application van HTML (HTML is een SGML-application) bedoelt om het te kunnen gebruiken samen met andere XML-applications zoals SVG en MathML. Als je het niet als zodanig gebruikt kan je beter gewoon HTML gebruiken aangezien er nogal wat addertjes onder het gras zitten als je XHTML op een goede manier wilt toepassen (95% van de websites die XHTML gebruiken doen het verkeerd).

Er is trouwens een workgroup bezig met HTML5 (veel browser ondersteunen daar al gedeeltjes van zoals canvas - IE niet offcourse...)