Ga naar inhoud

Positie tabel


Aanbevolen berichten

ik wil mijn tabellen krijgen zoals bij plaatje 1 [img:731b3ddd57]http://www.graafschap.net/img/1.gif[/img:731b3ddd57] maar het word zoals plaatje 2 [img:731b3ddd57]http://www.graafschap.net/img/2.gif[/img:731b3ddd57] de stylesheet ziet er zo uit [code:1:731b3ddd57]<!-- #tabel-1 { position: relative; top: 3%; left: 3%; } #tabel-2 { position: relative; top: 3%; left: 60%; } -->[/code:1:731b3ddd57] ik kan geen position: absolute gebruiken want dan komt het nieuwsscript in de war hoe moet ik dit oplossen?? [ Dit Bericht is bewerkt door: martijn.S op 2002-03-23 19:38 ] [ Dit Bericht is bewerkt door: martijn.S op 2002-03-23 19:39 ]
Link naar reactie
[code:1:4a258cf574] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Voorbeeld</title> <style> h1 { background: #000000; color: #FFFFFF; } h2 { clear: both; background: #000000; color: #FFFFFF; } table.tabel { float: left; margin: 10px; border: 1px solid #000000; } table.tabel td { border: 1px solid #CCCCCC; background: #EEEEEE; margin: 0px; padding: 2px; } table.tabel th { border: 1px solid #000000; background: #CCCCCC; margin: 0px; padding: 2px; } </style> </head> <body> <h1>Header</h1> <table class="tabel"> <thead> <tr> <th>Header Cell 1</th> <th>Header Cell 2</th> <th>Header Cell 3</th> </tr> </thead> <tbody> <tr> <td>Data Cell 1</td> <td>Data Cell 2</td> <td>Data Cell 3</td> </tr> </tbody> </table> <table class="tabel"> <thead> <tr> <th>Header Cell 1</th> <th>Header Cell 2</th> <th>Header Cell 3</th> </tr> </thead> <tbody> <tr> <td>Data Cell 1</td> <td>Data Cell 2</td> <td>Data Cell 3</td> </tr> </tbody> </table> <h2>Footer</h2> </body> </html> [/code:1:4a258cf574] [quote:4a258cf574] Waarom stylesheets gebruiken als het ook makkelijk kan? [/quote:4a258cf574] 1) Goed geschreven html + css = makkelijker 2) Scheiding van presentatie en informatie 3) Streven naar semantisch correcte en eenduidige html (m.a.w. geen tables voor layout) 4) Code schrijven die aan de standaards voldoet([url]www.w3.org[/url]) 5) De lol en de voldoening die het werken met nieuwe technieken geeft. En de bereidheid te leren en je kennis te vergroten Verder zou ik graag even in willen gaan op het eigengereide gelul van de heren 'Gates' & 'Toeter84'. Zou het kunnen dat de jongen cross-post omdat z'n vraag niet serieus wordt genomen? En ben ik als lezer van dit forum echt geintresseert in jullie gelul over de woonplaats van een ander lid van dit forum? Als men dan ook nog beseft dat de heer 'Gates' notabene een moderator is. Ik kan het mis hebben hoor, maar hoort een moderator niet een positieve rol te hebben in een forum? Kom op meneer 'Gates' doe uw werk als moderator goed en neem de vragen van forum leden serieus en stimuleer deze om zich verder te ontwikkelen. /E (standaard-fundamentalist) 'Bring it on, FLAME ME!!!'
Link naar reactie
Smeenk, bedankt dat je me even op m'n vergissing wees. Heidi(alias toeter84), sorry voor de verwarring over je sexe. Martijn, ik zal de code nog even toelichten. Html is op te delen in twee soorten elementen: 1) Block level elementen 2) Inline elementen Een block element, zoals een table, een div of een h1 element, krijgt een eigen 'regel' in het document. Een inline element, zoals een a of een span element volgt het vorige element in de zelfde 'regel'. Jouw oplossing werkte niet omdat een table een block element is en position: relative, de positie is ten opzichte van het moeder element(in dit geval de body van het document) en het vorige element(de eerste tabel). In mijn oplossing maak je van de tables zwevende block elementen (float: left). Een zwevend block element wordt uit de normale 'flow' van het document gehaald en krijgt z'n plaats linker of rechter kantlijn van het moeder element. Als er meerdere zwevende elementen zijn dan worden deze naast elkaar geplaatst. Een laatste maar belangrijk ingredient is de clear: both; stijl regel. Deze regel voorkomt dat het volgende element naast de zwevende tables wordt geplaatst (het volgende element komt dus weer op een eigen 'regel'. /E
Link naar reactie
[quote:b78aa71b36]1) Goed geschreven html + css = makkelijker 2) Scheiding van presentatie en informatie 3) Streven naar semantisch correcte en eenduidige html (m.a.w. geen tables voor layout) 4) Code schrijven die aan de standaards voldoet([url]www.w3.org[/url]) 5) De lol en de voldoening die het werken met nieuwe technieken geeft. En de bereidheid te leren en je kennis te vergroten[/quote:b78aa71b36]Klopt absoluut, maar ik doelde op de layout van die tabellen, waarom zou je "postion ... etc" gebruiken als je ook gewoon een tabel met daarin een tabel kan gebruiken? Daarnaast zal een good old tabelletje veel eerder aan de standaarden voldoen (en nog belangrijker: eerder in alle browsers werken) dan wat vage css code. En als je dan zo de standaarden heilig wilt verdedigen, doe het dan goed, <style> is geen correcte HTML, daar hoort minimaal type="text/css" bij. [quote:b78aa71b36]Een heel verhaal wat er allemaal met mij en Toeter mis is.[/quote:b78aa71b36]Ik ga hier verder niet op in, maar 2 dingen: ik heb een oplossing aangedragen, dus dat zit wel goed. Ten tweede zit ik hier voor mijn [b:b78aa71b36]plezier[/b:b78aa71b36] en niet als een nerd die nooit eens even een humoristische posts mag plaatsen. Een moderator is ook maar een mens hoor...
Link naar reactie
[quote:16e02f392f] "Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables." [url] http://www.w3.org/TR/REC-html40/struct/tables.html [/url] [/quote:16e02f392f] [quote:16e02f392f] En als je dan zo de standaarden heilig wilt verdedigen, doe het dan goed, <style> is geen correcte HTML, daar hoort minimaal type="text/css" bij. [/quote:16e02f392f] Helemaal gelijk, stom. /E
Link naar reactie
Ik vraag me af waarom er over zo iets makkelijks zo'n lang topic kan lopen. Men neme 1 tabel met 2 cellen naast elkaar. Dus gewoon [code:1:a62f18131d] <table> <tr> <td></td> <td></td> </tr> </table> [/code:1:a62f18131d] En hierin zet men: [code:1:a62f18131d] <table> <tr> <td> <table> <tr> <td></td> </tr> </table> </td> <td> <table> <tr> <td></td> </tr> </table> </td> </tr> </table> [/code:1:a62f18131d] Dan ben je toch klaar? Een beetje bemating en uitlijning aan de hele boel meegeven en je bent er. En diegene hierboven die zegt dat wij onzin posten... heel leuk dat je zo goed met een oplossing aan komt dragen en ons niksnutten noemt, maar weet wel over wie je het hebt! Ik had een uitgebreide reply kunnen geven zoals jij dat doet, maar als ik al weet dat die martijn.S ook op een ander forum dit heeft gepost en daar zijn antwoord al binnen heeft, dan is dit een beetje mosterd na de maaltijd, niet? En om het nou niet te laten lijken of de C!Tforummers in tegenstelling tot GoTTers niets doen, heb ik die reactie er neer gezet.
Link naar reactie
Kennelijk ziet iedereen mijn compleet op maat gemaakte pagina niet. Even de link volgen en de code uit de bron halen. [quote:4c4ad598a3] Op 24-03-2002 18:51, schreef Toeter84: [/quote:4c4ad598a3] Aardig dat je alsnog een code plaatst, maar dit had ik een aantal uren geleden óók al gedaan. Beetje mosterd na de maaltijd niet :???:
Link naar reactie
[quote:d746c71b4f] Op 24-03-2002 19:43, schreef Bill Gates: En wat is nu je punt victor? Ik had gisteren al de code geplaatst. Ik wordt hier allemaal een beetje moe van, iemand die compleet flipt op wat humor, nu dit gezeur weer... Keep it ontopic! [/quote:d746c71b4f] Mijn punt? Ik zag dat jouw code niet helemaal goed was. De code van Eelco Osseweijer was wel helemaal goed, maar op basis van style sheets. Ik wou alleen laten zien hoe het gewoon via html code kan. (dus zonder style sheets) Dat daarna iemand anders dat nog eens over gaat doen, lijkt mij een beetje overbodig.
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

×
×
  • Nieuwe aanmaken...