« 1 2 »
Autor Zpráva
Dagon
Profil *
Ahoj,
mám problém, na který při tvorbách webů narážím často a pořád se mi nepodařilo najít řešení, které by mi opravdu pomohlo.
Chci jediné - aby když mám vedle sebe label a input, tak aby byly na řádku vertikálně vystředěné v prohlížečích Firefox, IE 6, 7, Opera a Safari.
Zkrátka, aby to vypadalo ve všech těchto prohlížečích stejně.
Zatím jsem to řešila kompromisním relativním pozicováním - v jednom prohlížeči byl label maličko výš než input, v jiném prohlížeči naopak.
Tento problém nastává zejména u inputů radio a checkbox.
Plaváček
Profil
Dagon

Co zkusit třeba tohle?

form * {vertical-align:middle}

P.S. funguje to, ale samozřejmě záleží na okolnostech a tvých požadavcích a bez ukázky zdrojového kódu jenom hádám.
Dagon
Profil *
Mě to bohužel nefunguje.
Zjednodušená ukázka kódu:

XHTML:

  <form action="/" method="">
    <p><label>Jedna</label><input type="radio" name="" /></p>
    <div class="fix"></div>
    <p><label>Dva</label><input type="radio" name="" /></p>
    <div class="fix"></div>
    <p><label>Jaro</label><input type="checkbox" name="" /></p>
    <div class="fix"></div>
  </form>


CSS:

form {width: 70px}
form label {float: left; display: block; width: 40px;}
form input {float: right}
habendorf
Profil
Pokud to floatuješ, tak ti samozřejmě vertical-align bude na nic. Nicméně ti nic nebrání použít padding/margin.
Dagon
Profil *
Ano, můžu dát padding, margin, ale maximálně to bude mít stejný efekt jako pozicování, tzn. v každém prohlížeči jinak.
Vertical-align je na nic i tak - co když budu mít label na více řádků? Nemůžu mu proto dát výšku.
Railbot
Profil
Ano, můžu dát padding, margin, ale maximálně to bude mít stejný efekt jako pozicování, tzn. v každém prohlížeči jinak.
Na to jsi přišel jak? Margin a padding funguje všude stejně. To samé platí o pozicování, nejspíš máš na mysli relativní/absolutní.

Vertical-align je na nic i tak - co když budu mít label na více řádků? Nemůžu mu proto dát výšku.
Další nesmysl. Vertical-align nemá s výškou nic společného. I víceřádkový label bude stále zarovnán vertikálně doprostřed.
Dagon
Profil *
Takže trocha vysvětlení..
Ano, padding, margin fungují všude stejně, jenže jde o výchozí situaci - a ta je bohužel většinou různá - někde bych musela dát padding-bottom, zatímco jinde top, aby to bylo srovnané.
Vertical-align nemá s výškou nic společného? Tak to jsi lepší než já, mě se totiž nikdy (krom tabulky) nepovedlo vertikálně něco vystředit, aniž bych zadala i height. Ale možná jen něco neznám, nejsem žádný profík.
habendorf
Profil
nepovedlo vertikálně něco vystředit, aniž bych zadala i height

Nesmysl. To by nešly vyrovnat inline prvky (které height nemají).
Dagon
Profil *
Hmm, tak proč mě to nešlo, když jsem řádkovému prvku zadala line-height a vertical-align? Musela jsem zadat i height, aby se to vystředilo.. Co dělám špatně? Asi teď působím jako pěkná lama, co?
Railbot
Profil
Dagon
Zkusil bych to bez té line-height.
Dagon
Profil *
Nechci být nějaký šťoural nebo tak, ale všimla jsem si jedné věci zde na fóru. Která hezky znázorňuje můj problém. Podívejte se dole na této stránce, na checkbox Zakázat formátování. Pak si stránku otevřete v Opeře.
Railbot
Profil
Dagon
Dej pryč výšku, line-height, použij vertical-align. Je zbytečné to opakovat.
Dagon
Profil *
Sorry, ale mě to prostě nefunguje..
Plaváček
Profil
Dagon

V tomto konkrétním případě bych se nebál použít tabulku.
ITGuru
Profil *
V tomto konkrétním případě bych se nebál použít tabulku.
Já ano. Nemyslím že tabulka je dobré řešení. Kdybych měl formulář, kde bude 20 formulářových prvků a jeden, dva inputy tohoto typu (checkbox, radio), tak kvůli tomu mám dát celý formulář do tabulky nebo jen řádkovou tabulku po tyto prvky? Mě to přijde nečisté.
Tento problém je podle mě velmi častý a imho se v naprosté většině neřeší, protože jde o rozdíl asi 4-8 pixelů a nevypadá to tak hrozně. Nicméně ten problém tu je. Domnívám se, že rozdíl způsobuje různá výška těch inputů v různých prohlížečích.
Zkus tedy zadat těm inputům display:block (nebo inline-block) a fixní výšku. Nevím jak to bude vypadat, ale aspoň zjistíš jestli to je tím nebo ne.
Dagon
Profil *
Také si nemyslím, že tabulka by byla vhodná, obzvlášť když hledám univerzální řešení, právě i pro větší a různorodé formuláře.
Fixní výška daná inputům s vystředěním nepomůže.
Plaváček
Profil
ITGuru
Dagon

Pokud zachováte lineární logiku formuláře, není problém použít tabulku.

Pro takové zlobivé prvky jako jsou checkboxy a radiobuttony po ní sáhnu raději, protože mi ušetří spoustu zbytečné práce. V okamžiku, kdy začneš formulářové prvky floatovat, narazíš na spoustu zajímavých problémů a potíží. Jakékoliv pokusy umravnit pomocí stylů (nastavení výšky, šířky, marginy a podobně) formulářové prvky se vám většinou vymstí a ztratíte spoustu drahocenného času, který můžete věnovat něčemu jinému.

Takže - v tomto konkrétním případě lze bez problémů použít tabulku ( viz http://www.plavacek.net/formulare/formular-a-tabulka.html ).
Dagon
Profil *
Dobře, takže myslíš, že bez tabulky toho vystředění ve všech prohlížečích nedosáhnu?
Plaváček
Profil
Dagon

Možná ano, pokud přehodíš pořadí (nejdřív input, pak label), což je i logičtější. Jukni semo: http://klient.plavacek.net/formular.html . Tabulka není žádný ďábelský vynález a jsou okamžiky, kdy její použití nemůže uškodit. Takže ještě naposled, v tomto konkrétním případě bych se tabulce nevyhýbal a ušetřil si práci.
Dagon
Profil *
Já teda hledám řešení univerzální, ale i tak díky!!
Plaváček
Profil
Dagon

To máš říct hned - viz http://latrine.dgx.cz/dokonale-stylovani-formularu
habendorf
Profil
Tahle debata je fakt o ničem. Máme tu tři dobré funkční možnosti, všechny mnohokrát vyzkoušené a bezproblémové. Tazateli se nelíbí ani jedna, co se dá dělat.
Dagon
Profil *
Jak se mě má líbit, když žádná nefunguje? Zřejmě nikdo z vás tento problém prostě neřeší a nechá to v každém prohlížeči trochu jinak nebo použije tabulku.
A pro Plaváčka - už z mého prvního příspěvku vyplývá, že hledám univerzální řešení.
Dagon
Profil *
Díky Plaváčkovi za ten odkaz..
habendorf
Profil
Zřejmě nikdo z vás tento problém prostě neřeší a nechá to v každém prohlížeči trochu jinak nebo použije tabulku.

Věř mi, že už jsem pár formů dělal, a někdy ne zrovna triviálních. Zarovnané byly vždycky všechny. Opravdu netuším, v čem máš stále problém.
Dagon
Profil *
Nevím, tak asi jsem blbá a dělám nějaký chyby celkově, co mi to pak rozhodí. Možná jsem se učila ze špatných zdrojů. Ale jak už jsem říkala, nejsem žádný profík, zabývám se tvorbou stránek asi půl roku a to rozhodně ne nějak intenzivně.
Takže chyba je asi ve mně, takže díky všem, jdu se víc učit..
Bubák
Profil
dělám nějaký chyby celkově, co mi to pak rozhodí
Kromě Plaváčkem výše zmíněného [#17] je problematické resetování všeho využítím univerzálního selektoru * (hvězdička).
http://latrine.dgx.cz/jeste-dokonalejsi-stylovani-formularu#toc-resetovani-css
Pokud chceš resetovat, udělej to výčtem elementů, které potřebují resetovat.
joe
Profil
Dagon
Neuč se zbytečně, univerzálním řešením pro případ, kdy chceš mít popisek - input je tabulka. Jak už je tu několikrát napsáno, ušetříš si hlavně spoustu práce a nebudeš mít žádné problémy.

Pokud máš zálusk na formuláře typu

popisek
input

Pak tabulka není potřeba a stačí použít klasické odřádkování - <br />

Plaváček
Nevím proč u druhého příkladu máš prohozený popisek s inputem. Je to jak proti srsti.
Plaváček
Profil
joe

Nevím proč u druhého příkladu máš prohozený popisek s inputem.

Protože to tak chtěla Dagon, viz její ukázka kódu.
MAto
Profil *
Pouzil jsem nasledujici hover menu v XHTML http://css.interval.cz/clanky/hover-menu/ ale mam jeden problem. To menu je zarovnane do leva a ja bych ho potreboval zarovnat na stred. poradte mi prosim jak to udelat?
Diky Mato
« 1 2 »

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: