een break bij een &lt;/table&gt;&lt;form&gt;&lt;table&gt;

woensdag 12 maart 2003 09:28

Topicstarter

Ik ben nu met een site bezig, leuk en aardig, maar als ik nu een form heb, waar je dus n mail kan sturen. Dan komt er bij dit gedeelte :

code:

<table width="480" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
  <tr>
    <td><div align="center"><font class=text_small><b>
        // <a href="content.php?id=home">home</a> 
        // <a href="content.php?id=biography">biography</a> 
        // <a href="content.php?id=agenda">agenda</a> 
        // <a href="content.php?id=discography">discography</a>
        // <a href="content.php?id=booking">booking</a> 
        // <a href="content.php?id=guestbook">guestbook</a> 
        // <a href="content.php?id=contact">contact</a> 
        //</b></font></div></td>
  </tr>
</table><form action='content.php?id=contact_s' method='post'>
  <table width='480' border='1' cellpadding='0' cellspacing='0' bordercolor='#FFFFFF' align='center'>
    <tr> 
      <td height='21' ><font class=text_normal><b>&nbsp;// Contact</b></font></td>
      <td width="302">&nbsp;</td>
      <td width="102" background="images/table_right.jpg">&nbsp;</td>
  </tr>
  <tr> 
    <td height='8' width='68' align='right'><font class=text_normal>Name :</font></td>
    <td height='8' width='412' colspan="2">&nbsp;&nbsp;<input style='BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid' size=62 name='from'></td>
  </tr>
    <tr> 
    <td height='8' width='68' align='right'><font class=text_normal>Subject :</font></td>
    <td height='8' width='412' colspan="2">&nbsp;&nbsp;<input style='BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid' size=62 name='sub'></td>
  </tr>
  <tr> 
    <td height='8' width='68' align='right'><font class=text_normal>E-Mail :</font></td>
    <td height='8' width='412' colspan="2">&nbsp;&nbsp;<input style='BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid' size=62 name='mail'></td>
  </tr>
  <tr> 
    <td align='right' valign='top' width='68'><font class=text_normal>Message :</font></td>
    <td width='412' colspan="2">&nbsp;&nbsp;<textarea style='BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid' name='msg' rows=4 cols=47></textarea></td>
  </tr>
  <tr>
    <td width='68'>&nbsp;</td>
    <td width='412' colspan="2">&nbsp;&nbsp;<INPUT style='BORDER-RIGHT: rgb(0,0,0) 1px solid; BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; COLOR: rgb(120,120,120); BORDER-BOTTOM: rgb(0,0,0) 1px solid; FONT-FAMILY: Verdana,Arial,Helvetica; BACKGROUND-COLOR: rgb(255,255,255)' type='submit' name='Submit' value='Submit'></td>
  </tr>
</table>
</form>

een break tussen de 2 tabellen, en dit moet niet. Als ik de form tags in de tabel zet, dan ziet het er goed uit, maar klopt het niet meer volgens de html norm

is er een manier om te zorgen dat deze break weggaat/kleiner wordt ?

ik heb gezocht met de search, maar kwam niks uit, google kon me ook niet echt helpen

Acties:

dominic

will code for food

Je kunt d.m.v. styles de margins en padding van de form aanpassen.. Ik heb vaker met deze nare eigenschap van forms te maken gehad.

Een truukje (Niet w3-conform maar het werkt):

code:

<table blaaaat=blaat blaat>
<form action="blaat" blaat>
<tr>
<td>
</td>
</tr>
</form>
</table>

Dit moet je ook van de lege ruimte afbrengen.

Download my music on SoundCloud

woensdag 12 maart 2003 09:28

Acties:

Jasper

Klopt en dat is echt vreselijk irritant.

Wat je kan doen bij het form is het toevoegen van een stijl element:

code:

1	<form .. style='style="display: inline;'>

Ook kan je de form-tag verhuizen tussen een </td> en </tr>, alhoewel ik nu waarschijnlijk de gehele devschuur posse achter me aan ga krijgen

(net te laat)

[ Voor 10% gewijzigd door Jasper op 12-03-2003 09:29 ]

woensdag 12 maart 2003 09:31

Acties:

woensdag 12 maart 2003 09:32

Topicstarter

dominic schreef op 12 March 2003 @ 09:28:
Je kunt d.m.v. styles de margins en padding van de form aanpassen.. Ik heb vaker met deze nare eigenschap van forms te maken gehad.

Een truukje (Niet w3-conform maar het werkt):
code:
1
2
3
4
5
6
7
8
<table blaaaat=blaat blaat>
<form action="blaat" blaat>
<tr>
<td>
</td>
</tr>
</form>
</table>
Dit moet je ook van de lege ruimte afbrengen.

zoals ik zei : dat werkt, maar ik wil graag een pagina maken die volgens de w3 norm is, en dat is dit niet omdat de hele tabel nu de zeik in loopt volgens de regels.

Ik zal eens kijken naar de style sheet ervoor.

Acties:

dominic

will code for food

g00fy schreef op 12 maart 2003 @ 09:31:
[...]

zoals ik zei : dat werkt, maar ik wil graag een pagina maken die volgens de w3 norm is, en dat is dit niet omdat de hele tabel nu de zeik in loopt volgens de regels.

Ik zal eens kijken naar de style sheet ervoor.

Dan is dat laatste je enige redding idd.

Download my music on SoundCloud

woensdag 12 maart 2003 09:33

Acties:

woensdag 12 maart 2003 09:33

Topicstarter

En het werkt! maar is t volgens de standaart?

Acties:

g00fy:
zoals ik zei : dat werkt, maar ik wil graag een pagina maken die volgens de w3 norm is, en dat is dit niet omdat de hele tabel nu de zeik in loopt volgens de regels.

zucht.

Waarom nou. Waarom zou je dat in vredesnaam willen? Welk doel bereik je ermee? Probeer dat nou eens te omschrijven...

_{Verder kun je de table's in een div zetten en die een margin-top van -20px meegeven, dan kun je ze 'recht' onder elkaar laten lijnen}

[ Voor 17% gewijzigd door Willem op 12-03-2003 09:35 ]

woensdag 12 maart 2003 09:37

Acties:

evaarties

Powerball @ 12.582

Werkt het niet als je het als volgt doet:

<form>
<table>
<tr><td></td></tr>
</table>
</form>

??

Weet alleen niet of het zo wel volgens de W3C norm is.

woensdag 12 maart 2003 09:38

Acties:

woensdag 12 maart 2003 09:41

Topicstarter

willem169 schreef op 12 March 2003 @ 09:33:

[...]

zucht.

Waarom nou. Waarom zou je dat in vredesnaam willen? Welk doel bereik je ermee? Probeer dat nou eens te omschrijven...

_{Verder kun je de table's in een div zetten en die een margin-top van -20px meegeven, dan kun je ze 'recht' onder elkaar laten lijnen}

omdat ie dan toch in elke browser gegarandeerd werkt...?

Acties:

dominic

will code for food

evaarties schreef op 12 maart 2003 @ 09:37:
Werkt het niet als je het als volgt doet:

<form>
<table>
<tr><td></td></tr>
</table>
</form>

??

Weet alleen niet of het zo wel volgens de W3C norm is.

Zo had hij het al..

Download my music on SoundCloud

woensdag 12 maart 2003 09:44

Acties:

Verwijderd

weet iemand hier toevallig hoe je een table op een webpage een hoeveelheid transparancy kan geven.

woensdag 12 maart 2003 09:46

Acties:

evaarties

Powerball @ 12.582

dominic schreef op 12 March 2003 @ 09:41:
[...]

Zo had hij het al..

Stom ja, je hebt gelijk... had de </table> aangezien voor <table>.

Nog even gekeken:

Is het een optie om de <form> ook al voor de 1e tabel te zetten? Voor het form geeft dit in principe geen problemen.

[ Voor 29% gewijzigd door evaarties op 12-03-2003 09:48 ]

woensdag 12 maart 2003 09:47

Acties:

g00fy:
omdat ie dan toch in elke browser gegarandeerd werkt...?

Kijk nu hebben we dus exact een punt bij de kiewen wat we even moeten rechtzetten. Dit is namelijk onwaarheid als een koe. Al zijn al je pagina's 1000x goed validated en W3c (x)html strict is dat geen garantie voor de perfecte weergave van je website in elke browser.

Daarom vroeg ik het

[ Voor 3% gewijzigd door Willem op 12-03-2003 09:47 ]

woensdag 12 maart 2003 09:48

Acties:

woensdag 12 maart 2003 09:49

Topicstarter

Verwijderd schreef op 12 maart 2003 @ 09:44:
weet iemand hier toevallig hoe je een table op een webpage een hoeveelheid transparancy kan geven.

dat kan met CSS, maar werkt voor zover ik weet alleen in IE browsers....alpha oid heet het, pas op dat je je site er niet vanaf laat hangen. In een andere browser is je tabel anders spierwit.

Acties:

woensdag 12 maart 2003 09:49

Topicstarter

willem169 schreef op 12 March 2003 @ 09:47:

[...]

Kijk nu hebben we dus exact een punt bij de kiewen wat we even moeten rechtzetten. Dit is namelijk onwaarheid als een koe. Al zijn al je pagina's 1000x goed validated en W3c (x)html strict is dat geen garantie voor de perfecte weergave van je website in elke browser.

Daarom vroeg ik het

dat ben ik zeker met je eens, maar als hij al barst van de fouten volgens de html 4.01 norm dan ben ik meer zeker van dat het werkt dan als ik een error list heb van 25 fouten....eens?

evaarties : bedankt voor het meedenken

maar t was al gopgelost dmv css style="display: inline;"

[ Voor 9% gewijzigd door Cartman! op 12-03-2003 09:50 ]

Acties:

php dude:
weet iemand hier toevallig hoe je een table op een webpage een hoeveelheid transparancy kan geven.

1) Ja.
2) Ga eens zoeken met Google op CSS transparency
3) Dit is niet de juiste thread

woensdag 12 maart 2003 09:50

Acties:

drm

f0pc0dert

Ga eens na wat er precies gebeurt...

Het enige wat er gebeurt is dat je formulier een marge meekrijgt, die default bij de browser zit. Wat je moet doen om dit te voorkomen (te overriden) is of de marge op 0 zetten, of de display op inline zetten, zoals Jasper aangeeft.

Het is dus geen structuurprobleem, maar een stijlprobleem. Los 't dan dus in je stylesheet op, en niet in je html

_stylesheet:

code:

form {
   margin:0;
   padding:0;
}
/* of */
form {
   display:inline;
}

offtopic:
Ik geef zelf de voorkeur aan de eerste, omdat je dan ook nog de width, en evt. een border op mag geven voor je form. Maar dat kan je natuurlijk ook doen bij je table

De vraag is dan eigenlijk: wil ik wel de table een border geven, of het formulier? Wat is de tabel eigenlijk? Mag ik eigenlijk wel een tabel gebruiken, want bedoel ik hier wel een tabel? Moet ik niet op zoek naar elementen die de content beter beschrijven dan 'table' ? Maar dat gaat redelijk ver.

Vervolgens in je html gewoon keurig de form buiten de table zetten:

code:

<form method="post" action="sjaak.php">
   <table>
       <tr>
          <td>... etcetera ...</td>
       </tr>
   </table> 
</form>

Let wel op dat de marge ook nog in je tabel kan zitten. Om naadloos aan te sluiten met tabellen (wat soms wel handig is

) kun je het beste de volgende stylesheet gebruiken:

code:

table, td {
   margin:0;
   padding:0;
   border-collapse:collapse;
   border-width:0;
   border-style:none;
}

Kortom, de algemene tip: als je een probleem hebt met je layout, zoek eerst uit of het met stylesheets op te lossen is, want een stylesheet geeft de stijl van je document aan en de html de structuur

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

woensdag 12 maart 2003 09:54

Acties:

woensdag 12 maart 2003 09:54

Topicstarter

[quote][b][message=17245322,noline]drm schreef op 12 maart 2003 @ 09:50
verhaal
[quote]
ja, dat is idd. erg logisch ook. En zal ik zeker volgende keer doen.

maar ff iets anders nog (kan wel in dit topic).

background="images/table_right.jpg"

dat mag niet in een td volgens de validator, terwijl op w3schools.org dit zelfs zo als voorbeeld gegeven wordt. Waarom spreekt w3 zichzelf tegen ?

Acties:

g00fy:
dat ben ik zeker met je eens, maar als hij al barst van de fouten volgens de html 4.01 norm dan ben ik meer zeker van dat het werkt dan als ik een error list heb van 25 fouten....eens?

Ja, dat ben ik wel met je eens maar dat is nog steeds geen enkele garantie voor een goede weergave in alle browsers.. Het is niet erg om te perfectioneren, maar je kunt je afvragen waarom je het doet.

Nesting errors zijn not-done, en als je die niet (meer) hebt is het in ieder geval al een eind op weg. Je kunt dat voorkomen door je (X)HTML goed op te zetten.

woensdag 12 maart 2003 09:55

Acties:

g00fy:
maar ff iets anders nog (kan wel in dit topic).

background="images/table_right.jpg"

dat mag niet in een td volgens de validator, terwijl op w3schools.org dit zelfs zo als voorbeeld gegeven wordt. Waarom spreekt w3 zichzelf tegen ?

Ehm, background van een table? Of van de body?

woensdag 12 maart 2003 09:56

Acties:

woensdag 12 maart 2003 10:01

Topicstarter

willem169 schreef op 12 March 2003 @ 09:55:

[...]

Ehm, background van een table? Of van de body?

td, sorry

ow, had ik er wel bijgezet.....

[ Voor 9% gewijzigd door Cartman! op 12-03-2003 09:57 ]

Acties:

Verwijderd

g00fy schreef op 12 maart 2003 @ 09:54:

dat mag niet in een td volgens de validator, terwijl op w3schools.org dit zelfs zo als voorbeeld gegeven wordt. Waarom spreekt w3 zichzelf tegen ?

w3.org is niet hetzelfde als w3schools.org. De laatste is een leuk opstapje voor beginnende gebruikers, de eerste is een bron van technische informatie voor zowel gebruikers (de webdesigners/webdevelopers) als de ontwikkelaars (de lui bij organisaties als mozilla.org, en bij bedrijven als Microsoft die user agents maken)

Volgens de [url="http://www/w3/org/TR/CSS2/propidx.html"]CSS2 property index[/url] zijn er meerdere properties voor de achtergrond van vele HTML elementen beschikbaar. Wil je gegevens die écht kloppen, dan ga je naar w3.org, en niet naar een relatief onafhankelijke website als w3schools.com

woensdag 12 maart 2003 10:01

Acties:

drm

f0pc0dert

g00fy:
ja, dat is idd. erg logisch ook. En zal ik zeker volgende keer doen.

maar ff iets anders nog (kan wel in dit topic).

background="images/table_right.jpg"

dat mag niet in een td volgens de validator, terwijl op w3schools.org dit zelfs zo als voorbeeld gegeven wordt. Waarom spreekt w3 zichzelf tegen ?

Je zegt dat je het de volgende keer zal doen en prompt maak je dezelfde fout

Ook background images kun je in de stylesheets opgeven. Probeer aan de hand van de content van je td een classname te verzinnen die de inhoud beschrijft
_{pas op dat je niet in stijlnamen vervalt, want dan is het idee van stylesheets zinloos: <td class="background-blue"> is dus onzin, want als je je stylesheet aanpast is de naam niet meer van toepassing Ook class="left" of dergelijke dingen zijn feitelijk onzin. class="first-row" of class="first-column" kan al beter kloppen}
Probeer dus iets als <td class="ieps">

en in je stylesheet:

code:

1
2
3

td.ieps {
   background-image:url('./sjaak.jpg');
}

Dit is over het algemeen de manier om dingen te beschrijven in html en css, en om je aan de regels te houden

Aan de andere kant moet je ook niet vervallen in het probleem van content-beschrijven van html naar css te verplaatsen.

Een rij van 12 td's die allemaal pixelprecies zijn, en vervolgens voor elke td een andere class opgeven is ook weer onzin. Dan moet je gaan bedenken of je niet toevallig een betere structuur van je document moet gaan verzinnen.

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

woensdag 12 maart 2003 10:05

Acties:

Kama

Aritifical Intelligenticus

[quote]g00fy schreef op 12 maart 2003 @ 09:54:
[quote][b][message=17245322,noline]drm schreef op 12 maart 2003 @ 09:50
verhaal

ja, dat is idd. erg logisch ook. En zal ik zeker volgende keer doen.

maar ff iets anders nog (kan wel in dit topic).

background="images/table_right.jpg"

dat mag niet in een td volgens de validator, terwijl op w3schools.org dit zelfs zo als voorbeeld gegeven wordt. Waarom spreekt w3 zichzelf tegen ?

Gebruik van background is deprecated. Dat moet tegenwoordig in de CSS.

Overigens snap ik het nut van een pagina w3c compliant maken ook niet geheel. Er zijn allerlei variaties op de w3c standaard die door iedere browser (ok, Konqueror dan niet) worden begrepen, maar niet in de w3c standaard zitten (bijv HEIGHT bij TABLE). En w3c heeft weer eisen waar ik m'n vraagtekens bij heb (zoals verplichte ALT bij IMG - wat op zich een aardig idee is, maar er zit tegenwoordig zoveel beeldwerk in layout, toch zinloos om dat te gaan annoteren?) Mja w3c gaat niet al te pragmatisch om met hun de standaarden, mgoed dat is natuurlijk ook wel weer de eigenschap van een standaard.

Niels

woensdag 12 maart 2003 10:05

Acties: