[CSS + XHTML] valign="middle"

[DeFeCt]

IK probeer op een nette manier een invulbox en een button netjes naast elkaar uit te lijnen maar het lijkt me niet echt te lukken.

in de old skool way ging het zo:

code:

   <table>
    <tr>
     <td valign="middle"><input type="text" name="fitlerBox" size="40" tabindex="6" /></td>
     <td valign="middle"><input type="Image" name="filter" value="filter" src="images/buttonFilter.gif" alt="Filteren die hap!" style="border: 0px;" tabindex="7" /> </td>     
    </tr>
   </table>

Nu probeer ik het in een span te gooien, maar ik krijg het gewoon niet netjes uitgelijnt..

code:

   <span style="vertical-align: middle;"><input type="text" name="fitlerBox" size="40" tabindex="6" />&nbsp;&nbsp;<input type="Image" name="filter" value="filter" src="images/buttonFilter.gif" alt="Filteren die hap!" style="border: 0px;" tabindex="7" /> </span>

en voor de input heb ik in de css staan..

code:

input, select{
    font-size: 1.0em;
    border: 1px solid #610000;
    }

de image voor de button heeft een hoogte van 22 pixels.

Iemand enig idee wat ik fout doe?

[Willem]

& nbsp; is redelijk not-done in xhtml, zou een margin-left:4px; opgeven...
_{maar dit terzijde}

Daarnaast zou ik een div gebruiken waar je de elementen in zet, en niet een span (inline) element. Vervolgens de input velden een class meegeven en deze positioneren in CSS.

[ Voor 7% gewijzigd door Willem op 19-09-2003 13:00 ]

[Verwijderd]

Je kan volgens mij ook de vertical-align property toekennen aan de input en select tags, bijv:

code:

input, select {
    font-size: 1.0em;
    border: 1px solid #610000;
    vertical-align: middle;
}

[ Voor 21% gewijzigd door Verwijderd op 19-09-2003 13:04 ]

[CH4OS]

Maak van middle is center... Misschien dat ie dan meer wil doen?

[Rickets]

ThePerfectCell schreef op 19 September 2003 @ 13:08:
Maak van middle is center... Misschien dat ie dan meer wil doen?

Ja hoor, vertical-align: center;
Ga lezen http://www.w3.org/TR/CSS2...ml#propdef-vertical-align

[DeFeCt]

willem169 schreef op 19 september 2003 @ 12:59:
& nbsp; is redelijk not-done in xhtml, zou een margin-left:4px; opgeven...
[sub]maar dit terzijde

klopt, helemaal mee eens!

willem169 schreef op 19 september 2003 @ 12:59:
Daarnaast zou ik een div gebruiken waar je de elementen in zet, en niet een span (inline) element. Vervolgens de input velden een class meegeven en deze positioneren in CSS.

Ik hou het graag zo generiek mogelijk en wil niet voor elk veld classes gaan maken..

Verwijderd schreef op 19 september 2003 @ 13:03:
Je kan volgens mij ook de vertical-align property toekennen aan de input en select tags

klopt, and guess what?... het werkt! dank je.

[CH4OS]

Rickets schreef op 19 September 2003 @ 13:11:
[...]

Ja hoor, vertical-align: center;
Ga lezen http://www.w3.org/TR/CSS2...ml#propdef-vertical-align

Nee die niet!! Die van de TS-er!!
Zo dus:

code:

   <table>
    <tr>
     <td valign="center"><input type="text" name="fitlerBox" size="40" tabindex="6" /></td>
     <td valign="center"><input type="Image" name="filter" value="filter" src="images/buttonFilter.gif" alt="Filteren die hap!" style="border: 0px;" tabindex="7" /> </td>     
    </tr>
   </table>

[Willem]

DeFeCt:
Ik hou het graag zo generiek mogelijk en wil niet voor elk veld classes gaan maken..

Als je een element binnen een element geen class wilt geven maar wel wilt stylen is geen probleem...

Cascading Stylesheet:

div#idName input {
  /* ... */
}

Daarmee geef je aan dat alle elementen input binnen een div of span/whatever met een bepaalde class of Id-naam een bepaalde style hebben.

Maar eh, als het al werkt, prima

[wicher|IA]

willem169 schreef op 19 September 2003 @ 12:59:
& nbsp; is redelijk not-done in xhtml, zou een margin-left:4px; opgeven...
_{maar dit terzijde}

Hoezo is   eigenlijk ineens not done in xhtml?

  is net zo goed een normaal teken als & of ©.
Functie: een non breaking space. In die functie lijkt het met ook altijd prima, in xhtml evengoed als in eerdere html-versies.

  gebruiken als marge e.d. is inderdaad niet netjes, maar dit was toch op zich in html 4 ook al zo? Waarom zou het ineens in xhtml not done zijn?

<sub>Pfrt... React laat &nbsp;, &amp; en &copy; blijkbaar gewoon staan in de code, met als resultaat  , & en ©, ipv de & hierin door &amp; te vervangen.

Ik ken trouwens een site waarin ze dit heel dom hebben gedaan: www.gvu.nl.
Hierin maken ze marges met &nbsp. IE pakt die op als spatie, maar Mozilla niet, omdat die er een ; achter wil hebben, met als resultaat dat je daarin gewoon &nbsp blijft zien.
Sowieso is het GVU heel erg slecht met websites.</sub>

[ Voor 49% gewijzigd door wicher|IA op 19-09-2003 13:38 ]

[DeFeCt]

Rickets schreef op 19 September 2003 @ 13:11:
[...]
Ja hoor, vertical-align: center;
Ga lezen http://www.w3.org/TR/CSS2...ml#propdef-vertical-align

Tut tut niet zo onvriendelijk

ThePerfectCell schreef op 19 September 2003 @ 13:18:
[...]
Nee die niet!! Die van de TS-er!!
Zo dus:

ook dan klopt het niet TPC.. valign heeft geen property die center heet.. en daarnaast wou ik juist van die tables af...

[Willem]

@wicher: als marge-makende tekens is het crapp
Daar heb je nou juist CSS voor...