[xhtml + css] uitlijnen td / input

[Zoolander]

als ik de deze code heb:

code:

<form>
<table>
<tr>
<td>
bla bla
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
</form>

krijg ik het niet voor elkaar dat alle elementen, dus de input en de text bla bla allemaal aan de onderste rand van de td zitten.
Komt dit omdat de input->text veel groter is dan de text bla bla?
Kan ik dit oplossen?
De text zweeft bla bla zweeft nu in het midden van het input element.

valign="bottom"

of css

vertical-align: bottom;

doen niks...

[Willem]

Wat heb je al geprobeerd?
Probeer eens wat te spelen met margin en padding

[Verwijderd]

waarom in een tabel? als je gewoon met normale (inline) elementen werkt, wordt alles per default op de bottomline uitgelijnd

[ Voor 10% gewijzigd door Verwijderd op 18-06-2005 16:24 ]

[Puck]

En op deze manier kan je dezelfde opbouw gebruiken als een tabel, maar dan via css:

http://www.quirksmode.org/css/forms.html

[Zoolander]

PuCK schreef op zaterdag 18 juni 2005 @ 16:28:
En op deze manier kan je dezelfde opbouw gebruiken als een tabel, maar dan via css:

http://www.quirksmode.org/css/forms.html

really nice

maar nog steeds staat niet alles op de onderste lijn.
Alleen het input element.

Nou moet ik zeggen: ik heb andere forms bekeken, en deze hebben het ook allemaal.
Ik kan er nu wel mee leven, maar is er geen of wel een oplossingen? (denken jullie)

[Willem]

Geloof niet echt dat je mijn vraag hebt beantwoord dan wel begrepen:

Wat heb je al geprobeerd? Laat eens wat voorbeelden zien.
Mijn suggesties van onder andere klooien met margin, heb je daar wat mee gedaan?

Als je er vanuit blijft gaan dat wij het wel even oplossen komt hier binnen de kortste keren een hangslot op waar de honden geen brood van lusten.

[Zoolander]

willem169 schreef op zaterdag 18 juni 2005 @ 18:08:
Geloof niet echt dat je mijn vraag hebt beantwoord dan wel begrepen:

Wat heb je al geprobeerd? Laat eens wat voorbeelden zien.
Mijn suggesties van onder andere klooien met margin, heb je daar wat mee gedaan?

Als je er vanuit blijft gaan dat wij het wel even oplossen komt hier binnen de kortste keren een hangslot op waar de honden geen brood van lusten.

goed, ik ben het niet helemaal met je eens omdat ik hoopte op wat kennis over dit probleem en geen hapklare code oplossing.
Dat type poster ben ik helemaal niet.

Ik heb margin en padding geprobeerd, maar deze beschrijven een gedrag waar het probleem denk ik niet ligt.

dus wat geprobeerd is: (niet allemaal tegelijk, maar wel meeste/ alle zinnige combo's)
Ook de waarde heb ik aangepast van 0px tot 10px of 20px alle kanten op.

code:

td {

margin: 0px;
padding: 0px;
vertical-align: bottom;
line-height: 0px 

}

Andere elementen werkt het ook niet bij.
Bijvoorbeeld het (hele mooie) label systeem. Het inputveld is veel groter dan de text,
en daarom krijg je het verschil mbt de onderste rand.
Het inputveld veel kleiner maken lijkt me niet mooi.

[Willem]

Als je dit soort informatie voortaan in je startpost verwerkt zou ik al een stuk minder moeite hebben gehad met dit topic. Maar dit even terzijde.

Wat je wel kunt doen is het invulveld geen border geven, en -eventueel- de tekst in de td ernaast een margin aan de onderkant.

[Vinzzz243]

probeer eens line-height

[Puck]

En probeer eens het lettertype op 1px grootte te zetten. van het element waar je input in staat.