Table nélkül 3 dinamikus szélességű elem?
Table nélkül szeretnék egymás mellett elhelyezni
A csoport meghatározott szélességű, de az egyes elemek szélessége változó (többnyelvűséget támogatni kell).
A cél az lenne, hogy a select vízszintesen kitöltse a label és a button közti területet.
Próbálkoztam, de a select szélességének megadása nem sikerült, mert túllóg.
Ezt szeretném elérni, csak table nélkül:Milyen megoldást javasoltok?
■ - egy label
- egy select
- és egy button
A csoport meghatározott szélességű, de az egyes elemek szélessége változó (többnyelvűséget támogatni kell).
A cél az lenne, hogy a select vízszintesen kitöltse a label és a button közti területet.
Próbálkoztam, de a select szélességének megadása nem sikerült, mert túllóg.
Ezt szeretném elérni, csak table nélkül:
<table width="500"><tbody>
<tr>
<td><label>Topic</label></td>
<td width="100%">
<select style="width:100%">
<option>Whatever</option>
</select>
</td>
<td><input type="button" value="Go!" /></td>
</tr>
</tbody></table>
Toleráns tervezés
Toleráns tervezéssel el lehet érni, hogy fix szélességnél se legyen baj. Csak egy kicsivel több helyet kell hagyni. Ez azért is jó, mert konzisztens képet ad az egész a több nyelven keresztül.
J
I have a cunning plan!
Esetemben a tolerancia sajnos nem járható út ;), és ha már kompromisszumra kényszerülök, akkor a table mellett fogok dönteni.
Kár, hogy a CSS float "kiemeli" az adott elemet a flow-ból. Hasznosabb lenne, ha tényleg csak a körülfolyást vezérelné, de a jelölt elem megtartaná a "jelenlétét" és a méreteit, így a 100% szélességű select nem folyna rá a nyomógombra és nem csúszna ki a három elemet tartalmazó divből.
Jelenleg úgy látom, hogy a tiszta CSS tervezés esetenként indokolatlanul több megalkuvással és ügyeskedéssel, hackelgetéssel jár, mintha az ember egyszerűen csak a bevált table-t használná.
Hm... Esetleg ha az elemek display értékeit megpróbálnám table-szerűvé tenni, akár működhetne is, legföljebb a Föld letér a pályájáról. Egy próbát megér. Ha nemsokára itt a világvége, akkor elnézést kérek mindenkitől. :)
Nem nyert
További ötleteket szívesen fogadok, mert egyelőre a table áll nyerésre.
CSS
A flow-t meg úgy tudod megoldani, hogy:
Nem lehet meghatározott méret
Sajnos nincs rá lehetőségem, hogy akár a label, akár a button méretét megadhassam.
Ha az egyik nyelven a label szövege mondjuk 30px széles lenne, egy másik nyelven pedig mondjuk 120px, akkor nem tehetem meg, hogy 120px szélesre állítom be a labelt, mert lesznek olyan szövegek, ahol óriási lyuk maradna, és azt sem garantálhatom, hogy a felirat tördelhető vagy elválasztható. Arról nem is beszélve, hogy ha bevezetünk egy újabb nyelvet, ami még "dagályosabb", akkor hozzá kell nyúlni a CSS-hez, és még nagyobb hézag maradna a kompaktabb nyelvek esetében.
A 100% szélességű select továbbra is rálógott szegény nyomógombra, mintha az ott se volna.
Nyilván JavaScripttel meg lehetne oldani, hogy onload eseménynél számítsam ki az elemek méreteit, de ennél a table megoldás biztonságosabb, még ha nehézkesebb is.
Float a formcontrolt
Részeredmény: csak MSIE
Hurrá
akkor is float
Ha több ilyen cuccot szeretnél egymás alá, áés szeretnéd, hogy stimmeljenek, ugyanakkor nem tudsz fix méretet, akkor csak a table.
Amúgy mi a jóég az a 100% a selectnek?
Nem float -- table
> "Amúgy mi a jóég az a 100% a selectnek?"
Ez volt a megrendelő kívánsága. :)
Nem csalás, ámítás
nézd meg ezt: http://www.websiteoptimization.com/speed/tweak/forms/
Nem tudom, egészen jó lesz-e Neked, de elinduláshoz talán nem rossz.
P.