[XHTML/CSS] UItlijning tekst in tabellen klopt niet

Pagina: 1
Acties:
  • 482 views sinds 30-01-2008
  • Reageer

  • Glaanie
  • Registratie: Juni 2002
  • Nu online

Glaanie

Medewerker Product Content

All your spec are belong to us

Topicstarter
Goedemiddag allemaal,

Ik ben bezig met het (her)ontwerpen van mijn website, op http://glaanieboy.nl, helemaal in CSS en XHTML 1.1. Als jullie kunnen zien heb ik mijn site opgedeeld in grote tabel, met een linker-, midden- en rechterstuk. In het rechterstuk heb ik nog een tabel ondergebracht in de <td></td> elementen van de hoofdtabel, dit om de <input>'s en teksten voor de <input>'s mooi uitgelijnd te krijgen.
Maar nu is de tekst in de linker- en middenkolom een stuk naar beneden gebracht en aangezien deze afstand van paginarand tot de tekst (bijna) precies even groot is als de totale hoogte van de tabel in de rechterkolom, verdenk ik deze van de problemen. Ik heb alleen geen idee hoe dit op te lossen. Ik heb margin-top: 0px; in een style= tag gezet van de <td>'s van de linker en rechter kolom, maar dit hielp niet. In de 9de reply van dit topic op OSNN.net forums, zeiden ze dat het verhuizen van de <form> tags naar buiten de hoofdtabel een oplossing zou kunnen bieden (dus iets als: <body><form><table><bla...bla></table></form></body>), maar dit hielp niet.
Weet iemand van jullie een oplossing voor mijn irritante probleem?

Groeten,
Glenn.

  • CaptBiele
  • Registratie: Juni 2002
  • Laatst online: 27-08-2021

CaptBiele

No Worries!

Ten eerste is het niet de "netste" oplossing om met tabellen te werken. En ik krijg de indruk dat je wel een nette oplossing wilt met CSS en XHTML.
Tabellen zijn voor data en niet om de layout te creeeren.

Je moet dit gebruiken:
code:
1
  td {    vertical-align: top; }


En dus niet text-top

[ Voor 44% gewijzigd door CaptBiele op 04-03-2005 17:18 ]


  • Glaanie
  • Registratie: Juni 2002
  • Nu online

Glaanie

Medewerker Product Content

All your spec are belong to us

Topicstarter
Jeminee, vaak zijn op de moeilijkste vragen de makkelijkste antwoorden. Bedankt! Maar je zegt dat tabellen niet zijn bedoeld om een layout te creeeren. Hoe 'moet' het dan wel? (of kan ik beter een ander topic maken en/of zoeken)

[ Voor 8% gewijzigd door Glaanie op 04-03-2005 17:55 ]


  • CaptBiele
  • Registratie: Juni 2002
  • Laatst online: 27-08-2021

CaptBiele

No Worries!

Er is niet echt één juiste methode, maar de netste oplossing is om alles (dus de gehele vormgeving) met CSS te doen, en dus niet met tabellen. Divs en positioning zijn toch wel keywords :)

  • Glaanie
  • Registratie: Juni 2002
  • Nu online

Glaanie

Medewerker Product Content

All your spec are belong to us

Topicstarter
Dus toch DIV. Klinkt als een uitdaging (voor mij)! Webprogrammeren is spannend!

  • Glaanie
  • Registratie: Juni 2002
  • Nu online

Glaanie

Medewerker Product Content

All your spec are belong to us

Topicstarter
Fantastisch! Bedankt :) Hiermee kan ik aan de slag.

  • Superdeboer
  • Registratie: December 2002
  • Niet online

Superdeboer

Sa-weee-tah

Zo heb ik in een klein half uurtje even met CSS jouw layout min of meer nagebouwd. Zeer ruw opgezet natuurlijk... maar op basis van de door /me genoemde link.

* KLIK *

Verder nog een stukje uitleg over het hoe en waarom:

Tabellen zijn niet bedoeld om je pagina in te delen. De reden daarvan is 'semantiek', eigenlijk net zo belangrijk als de syntax. Tabellen zijn bedoeld om tabulaire data in neer te zetten: gegevens die dus echt vanwege hun inhoud ook in een tabel thuishoren (statistische gegevens over het algemeen). Dat is bij jouw pagina zo te zien niet het geval. ;)

Sinds de introducering van HTML 4.0 is het de bedoeling dat alle opmaak uit het HTML-document wordt gehaald en verplaatst wordt naar een stylesheet. Door op die manier een scheiding tussen structuur en opmaak te creëren, wordt je document veel beter onderhoudbaar. Door presentational elements niet meer in je HTML te hebben (tables voor opmaak van je pagina vallen daar ook onder), kun je de complete opmaak van je pagina wijzigen door alleen je CSS te veranderen. Dan hoef je helemaal niet aan je HTML te komen.

De HTML bevat dan als het goed is alleen nog markup, elementen die de structuur van het document aangeven. Of, nog iets concreter, elementen die hun inhoud zo goed mogelijk beschrijven. Voor tabulaire data is dat zoals gezegd een tabel, voor menu's (die vaak een opsomming zijn) is dat vaak het list-element, voor kopjes zijn dat de h1 t/m h6-elementen en ga zo maar door. Voor het indelen van je pagina hebben we divjes; dat zijn neutrale elementen, die niets zeggen over de inhoud ervan, maar ook geen opmaak hebben. Ze zijn heel goed bruikbaar om bepaalde coherente inhoud van elkaar te onderscheiden. Zo'n div is dan weer eindeloos te stylen (zoals je in mijn voorbeeld kunt zien). Dat kost even tijd om het onder de knie te krijgen, maar lukt dat eenmaal, dan is het veel minder bewerkelijk dan te moeten schuiven met tables. :)

When I write my code, only God and I know what it means. One week later, only God knows.
Hell yes it's a Cuban Cigar, but I'm not supporting their economy, I'm burning their fields.


  • Glaanie
  • Registratie: Juni 2002
  • Nu online

Glaanie

Medewerker Product Content

All your spec are belong to us

Topicstarter
Heel erg bedankt voor de uitleg. Zodra de Simpsons is afgelopen en ik Star Trek heb gekeken, zal ik de door jou geboden oplossing stelen jatten lenen :)

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Nu nog de juiste content-type of een DTD die toepasselijker is ;)

Intentionally left blank


  • Glaanie
  • Registratie: Juni 2002
  • Nu online

Glaanie

Medewerker Product Content

All your spec are belong to us

Topicstarter
crisp schreef op vrijdag 04 maart 2005 @ 23:55:
Nu nog de juiste content-type of een DTD die toepasselijker is ;)
Is
code:
1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
niet goed dan?

  • Superdeboer
  • Registratie: December 2002
  • Niet online

Superdeboer

Sa-weee-tah

Niet als je de server niet dwingt om die pagina's met het MIME-type application/xhtml te versturen. Een MIME-type geeft aan wat voor soort inhoud jouw pagina heeft. Raak niet in de war doordat je soms in de bron van een website een meta-element ziet staan dat een content-type aangeeft. Dat is namelijk min of meer overbodig als je écht een content-type meegeeft aan je pagina's.

Je zou dat kunnen instellen in Apache (AddType), of je laat je door PHP gegenereerde pagina's élke keer het juiste MIME-type meegeven:
PHP:
1
header("Content-type: application/xhtml+xml");

In den beginne was er HTML. Dat wordt normaliter verstuurd als text/html. Toen kwam er XHTML. XHTML is de herformulering van HTML 4.01 in XML. XML en de afgeleiden daarvan kennen hun eigen MIME-types. Zo heeft XHTML dus application/xhtml+xml. Zou je XHTML schrijven, maar het gewoon als text/html versturen... dan kun je dus net zo goed (of zelfs beter!) HTML 4.01 ervan maken.

XHTML 1.0 mag volgens sommigen met het text/html content-type verstuurd worden. Anderen zeggen dat dat onzinnig is, omdat het dan geen XML meer is, en dat is nu juist het belangrijkste verschil van XHTML ten opzichte van HTML als het goed is. Ik vind het ook onzinnig. XHTML 1.1 mág overigens niet eens als text/html verstuurd worden van het W3C (het kán wel, je krijgt geen cyberpolitie achter je aan... maar 't is wel fout :P).

Jij verstuurt nu waarschijnlijk je pagina's als text/html. Wat * crisp hierboven aan wil geven, is dat je dan beter HTML 4.01 Strict als doctype kunt gebruiken. Je moet voor jezelf afvragen waarom je XHTML gebruikt, nu je weet dat het in feite niets anders is dan HTML 4.01 in een XML-jasje. Gebruik je de XML-features? Zo ja, dat kán alleen als je 't als application/xhtml+xml verstuurt. Zo nee, verander dan de /> van je BR- en INPUT-elementen in > en voorzie je pagina's van het HTML 4.01 doctype, dat je dan bij elkaar verstuurt als text/html.

Neem bij dit alles in aanmerking dat wanneer je XHTML schrijft en dat met het juiste MIME-type verstuurt, Internet Explorer deze pagina's niet herkent en dus niet opent. Firefox / Mozilla en dergelijke kunnen wel XHTML lezen, maar... als je één keer een & in plaats van een & neer zet (bijvoorbeeld) of je vergeet dat <img src="bla"> <img src="bla" /> moet zijn, dan krijg je een parse error van de XML-parser in die browsers en kun je je hele pagina niet meer zien tot je dat fixt.

When I write my code, only God and I know what it means. One week later, only God knows.
Hell yes it's a Cuban Cigar, but I'm not supporting their economy, I'm burning their fields.


  • CaptBiele
  • Registratie: Juni 2002
  • Laatst online: 27-08-2021

CaptBiele

No Worries!

Potverdikkie... dat is een hele goede uitleg Superdeboer! _/-\o_
Nu weet ik ook precies hoe het zit ....

  • Glaanie
  • Registratie: Juni 2002
  • Nu online

Glaanie

Medewerker Product Content

All your spec are belong to us

Topicstarter
Zeer zeker interessant. De reden waarom ik XHTML gebruik is omdat ik door verscheidene mensen ben 'gepushed' om XHTML te gebruiken, omdat dat de toekomst zou zijn. En, een slimme jongen is op zijn toekomst voorberongen (of zoiets). Anyway, jouw beweegredenen om XHTML niet te gebruiken wegen toch iets meer dan 'op de toekomst voorbereid zijn', dus terug naar HTML 4.x voor mij :)

Heel erg bedankt! Echt super :)

  • CaptBiele
  • Registratie: Juni 2002
  • Laatst online: 27-08-2021

CaptBiele

No Worries!

nu vraag ik me toch weer af of dit nu de bedoeling is... XHTML scheelt weinig van HTML 4.01, zeker in jouw geval. Maar het is een opstapje om volledig xml te gaan gebruiken. En dat is zeer zeker de toekomst....

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

CaptBiele schreef op zondag 06 maart 2005 @ 22:22:
nu vraag ik me toch weer af of dit nu de bedoeling is... XHTML scheelt weinig van HTML 4.01, zeker in jouw geval. Maar het is een opstapje om volledig xml te gaan gebruiken. En dat is zeer zeker de toekomst....
Toekomst als in 'over 10 jaar' denk ik dan maar. De kans is zeer klein dat er op dit punt daadwerkelijk verbeteringen gaan komen in bijvoorbeeld een Internet Explorer versie 7, dus we zitten nog wel wat jaartjes vast aan HTML 4...

Intentionally left blank


  • CaptBiele
  • Registratie: Juni 2002
  • Laatst online: 27-08-2021

CaptBiele

No Worries!

crisp schreef op zondag 06 maart 2005 @ 22:24:
[...]

Toekomst als in 'over 10 jaar' denk ik dan maar. De kans is zeer klein dat er op dit punt daadwerkelijk verbeteringen gaan komen in bijvoorbeeld een Internet Explorer versie 7, dus we zitten nog wel wat jaartjes vast aan HTML 4...
maar duurt het ook niet gewoon zo lang omdat we allemaal wachten en terughoudend zijn? zouden het niet maar 8 jaartjes zijn als we sneller "meegaan"? aan de andere kant, waarom zou je het doen als het niets toevoegd....
maar goed, dit is een lastige en al veel gevoerde discussie, en niet eens echt ontopic.

[ Voor 3% gewijzigd door CaptBiele op 07-03-2005 09:47 . Reden: typo ]


Verwijderd

Het opslagformaat kun je het beste in XML doen (wel alleen als je kunt garanderen dat het altijd well-formed is). Het formaat wat je aan de browser teruggeeft houd je het beste op HTML tenzij je dingen nodig hebt die alleen in XML kunnen. (MathML, SVG; maar ook die zou je kunnen embedden in HTML door middel van het OBJECT element.)
Pagina: 1