Autor Zpráva
CS
Profil *
#1 · Zasláno: 1. 3. 2007, 14:55:06
Odpovědět Citovat
Bude to něco primitivního, ale momentálně jsem úplně v koncích. Chci mít vyhledávací políčko jako je třeba na lupa.cz, akorát že se má [input type=text] natahovat podle potřeby. Zde je HTML kód: 


<form action="#">

  <div style="border: 1px solid green; padding: 3px 10px; width: 50%">

    <input type="text" style="" />

    <input type="submit" value="Search" style="" />

  </div>

</form>


Umíte někdo doplnit atributy "style" tak, aby mělo tlačítko fixní šířku (třeba 40px) a aby textové políčko vyplňovalo zbytek nadřazeného DIVu?
PP
Profil *
#2 · Zasláno: 1. 3. 2007, 16:15:22
Odpovědět Citovat
<input type="text" style="width:99%" /><input type="submit" value="Search" style="width:40px" />

netestované, pokiaľ by to nešlo daj to do tabuľky a nastav obdobne style pre td
CS
Profil *
#3 · Zasláno: 1. 3. 2007, 17:14:49
Odpovědět Citovat
Testované, nefunguje. Tabulka je evidentním řešením, jen jsem se chtěl zeptat, jestli to CSS nezvládne. Asi bohužel nezvládne.
habendorf
Profil
#4 · Zasláno: 1. 3. 2007, 17:29:22
Odpovědět Citovat
css to samozřejmě zvládne, ale musel bys to krapet rozfloatovat
CS
Profil *
#5 · Zasláno: 1. 3. 2007, 17:44:50
Odpovědět Citovat
Můžeš mě popostrčit správným směrem? Nebo v ideálním případě uvést hodnoty atributů style?

Už jsem to předělal do tabulky, kde je pokyn "vyplň zbytek místa" docela triviální záležitostí (když člověk zná vlastnost table-layout; jinak si taky pěkně zanadává). Ale stejně bych rád jen tak pro zajímavost viděl, jak se toho docílí v CSS.
habendorf
Profil
#6 · Zasláno: 1. 3. 2007, 18:08:02 · Upravil/a: habendorf
Odpovědět Citovat
1) submit floatneš doprava
2) první input obalíš něčím blokovým, pro příklad třeba divem
3) tomu divu nastavíš margin-right na (šířka submitu + mezera mezi inputem a submitem)
4) inputu dáš width:100%; (nevím jestli máš quirk nebo standard a jestli má input border, mohlo by se to krapet tlouct)
5) vyclearuješ
6) spokojeně si pochrochtáváš :o)
CS
Profil *
#7 · Zasláno: 1. 3. 2007, 18:33:01
Odpovědět Citovat
Zaprvé díky, byl jsem dost blízko - input obalený divem, nastavená šířka na 100%, akorát jsem blbec místo marginu nastavoval padding.

Zadruhé, stejně se mi nepodařilo docílit úplného výsledku. Tohle je docela blízko: 



    <form action="#">

    

      <div style="border: 1px solid green; padding: 3px 10px; width: 50%">

    

        <div style="margin-right: 55px;"><input type="text" style="width: 100%" /></div>

        <input type="submit" value="Search" style="display: block; float: right; width: 50px; position: relative; top: -22px; left: 0px;" />

    

        <div style="clear: both;"></div>

    

      </div>

    

    </form>


Ale to, že je v HTML tlačítko definováno až jako druhé vidím jako docela zásadní problém. Určitě mi zase uniká nějaký trik. Už chybí tak málo... :)
habendorf
Profil
#8 · Zasláno: 1. 3. 2007, 18:40:56
Odpovědět Citovat
Jo promiň, to jsem zapomněl. Submit samozřejmě musí být v html první.
CS
Profil *
#9 · Zasláno: 2. 3. 2007, 10:57:59
Odpovědět Citovat
Takže pokud se vrátím k úplně první otázce, existují takové hodnoty atributů 'style', aby se zadaný úryvek HTML kódu dal nastylovat podle zadání?
habendorf
Profil
#10 · Zasláno: 2. 3. 2007, 11:01:00
Odpovědět Citovat
Beze změny html ne.
habendorf
Profil
#11 · Zasláno: 2. 3. 2007, 11:02:52
Odpovědět Citovat
Šlo by to přibližně s %, ale přesně ne.
CS
Profil *
#12 · Zasláno: 2. 3. 2007, 11:26:41
Odpovědět Citovat
Díky za názor odborníka. Ještě mě napadá, že by se možná dalo změnit display: na tabulku a pak to nastylovat jako tabulku, ale tak si autoři CSS asi jeho užití nepředstavovali.

Ve svém projektu už jsem kód bez zábran nahradil tabulkou, akorát mě vždycky trochu štve, kolik času strávím nad hledáním CSS řešení, abych se nakonec dozvěděl, že dost možná žádné neexistuje. To je holt život.
Časová prodleva: 17 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0