ugrás a tartalomhoz

Table nélkül 3 dinamikus szélességű elem?

Anonymous · 2006. Júl. 26. (Sze), 10.46
Table nélkül szeretnék egymás mellett elhelyezni
  • egy label
  • egy select
  • és egy button
elemet.

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:
  1. <table width="500"><tbody>  
  2. <tr>  
  3.   <td><label>Topic</label></td>  
  4.   <td width="100%">  
  5.     <select style="width:100%">  
  6.       <option>Whatever</option>  
  7.     </select>  
  8.   </td>  
  9.   <td><input type="button" value="Go!" /></td>  
  10. </tr>  
  11. </tbody></table>  
Milyen megoldást javasoltok?
‹ Furcsaságok ékezetek helyett IE-ben és Operában LightboxPlus átalkítás ›
 ■
1

Toleráns tervezés

janoszen · 2006. Júl. 26. (Sze), 12.05
Üdv!

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
2

I have a cunning plan!

Anonymous · 2006. Júl. 26. (Sze), 12.36
Köszönöm a választ!

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. :)
3

Nem nyert

Anonymous · 2006. Júl. 26. (Sze), 12.59
Nem sikerült. Sem a CSS kísérlet, sem a Föld pályájának módosítása.

További ötleteket szívesen fogadok, mert egyelőre a table áll nyerésre.
4

CSS

janoszen · 2006. Júl. 26. (Sze), 13.04
Én úgy oldottam meg, hogy a label fix szélességű, pl. 200 px, azonban tördelhető és a form controlnak van egy bal marginja 200 px-re. Így szépen működik.

A flow-t meg úgy tudod megoldani, hogy:
  1. selector  
  2. {  
  3.  overflow:auto;  
  4.  /* IE hack */  
  5.  _height:1%;  
  6. }  
  7.   
  8. selector floatoltelem  
  9. {  
  10.  float:left;  
  11. }  
5

Nem lehet meghatározott méret

Anonymous · 2006. Júl. 26. (Sze), 13.17
Köszönöm a tippet.

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.
6

Float a formcontrolt

janoszen · 2006. Júl. 26. (Sze), 13.41
Akkor a formcontrolt floatold ki jobbra, a label körül fogja folyni.
7

Részeredmény: csak MSIE

Anonymous · 2006. Júl. 26. (Sze), 14.34
Sikerült egy részeredményt elérni, ami csak MSIE-ben működik. De úgy néz ki, marad a table.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
  5. <title>Untitled Document</title>  
  6. <style type="text/css">  
  7. #outer{ width:500px;}  
  8. input{float:right}  
  9. span{display:inline-block;}  
  10. label{float:left}  
  11. * html select{width:100%}  
  12. </style>  
  13. </head>  
  14. <body>  
  15. <form action="">  
  16.  <div id="outer">  
  17.   <label>Topic </label>  
  18.   <input type="button" value="Go!" />  
  19.   <span>  
  20.   <select>  
  21.    <option>Whatever</option>  
  22.   </select>  
  23.   </span> </div>  
  24. </form>  
  25. </body>  
  26. </html>  
8

Hurrá

janoszen · 2006. Júl. 26. (Sze), 14.57
Akkor jó, mert a többi böngésző támogatja a display:table-*; tulajdonságokat. Szétválasztással tedd bele úgy.
9

akkor is float

vbence · 2006. Júl. 26. (Sze), 15.22
Lehet, hogy nem értem a problémát. Szerintem flótolj ki mindent balra és jó lesz.

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?
10

Nem float -- table

Anonymous · 2006. Júl. 31. (H), 10.06
A float sajnos nem működik ebben az esetben.

> "Amúgy mi a jóég az a 100% a selectnek?"

Ez volt a megrendelő kívánsága. :)
11

Nem csalás, ámítás

Pal_ur · 2006. Júl. 31. (H), 10.16
Szia,

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.