| Autor | Zpráva | ||
|---|---|---|---|
| Dagon Profil * |
#1 · Zasláno: 26. 2. 2009, 16:51:57
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 |
#2 · Zasláno: 26. 2. 2009, 16:59:23 · Upravil/a: Plaváček
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 * |
#3 · Zasláno: 26. 2. 2009, 17:29:49
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 |
#4 · Zasláno: 26. 2. 2009, 17:52:39
Pokud to floatuješ, tak ti samozřejmě vertical-align bude na nic. Nicméně ti nic nebrání použít padding/margin.
|
||
| Dagon Profil * |
#5 · Zasláno: 26. 2. 2009, 19:27:17
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 |
#6 · Zasláno: 26. 2. 2009, 19:30:43 · Upravil/a: Railbot
„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 * |
#7 · Zasláno: 26. 2. 2009, 19:54:25
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 |
#8 · Zasláno: 26. 2. 2009, 22:40:13
„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 * |
#9 · Zasláno: 26. 2. 2009, 23:10:23
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 |
#10 · Zasláno: 26. 2. 2009, 23:19:15
Dagon
Zkusil bych to bez té line-height. |
||
| Dagon Profil * |
#11 · Zasláno: 26. 2. 2009, 23:19:56
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 |
#12 · Zasláno: 26. 2. 2009, 23:53:56
Dagon
Dej pryč výšku, line-height, použij vertical-align. Je zbytečné to opakovat. |
||
| Dagon Profil * |
#13 · Zasláno: 27. 2. 2009, 00:00:17
Sorry, ale mě to prostě nefunguje..
|
||
| Plaváček Profil |
#14 · Zasláno: 27. 2. 2009, 07:10:24
Dagon
V tomto konkrétním případě bych se nebál použít tabulku. |
||
| ITGuru Profil * |
#15 · Zasláno: 27. 2. 2009, 10:01:55
„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 * |
#16 · Zasláno: 27. 2. 2009, 12:18:11
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 |
#17 · Zasláno: 27. 2. 2009, 12:29:00 · Upravil/a: Plaváček
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 * |
#18 · Zasláno: 27. 2. 2009, 12:38:15
Dobře, takže myslíš, že bez tabulky toho vystředění ve všech prohlížečích nedosáhnu?
|
||
| Plaváček Profil |
#19 · Zasláno: 27. 2. 2009, 12:59:12
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 * |
#20 · Zasláno: 27. 2. 2009, 14:23:22
Já teda hledám řešení univerzální, ale i tak díky!!
|
||
| Plaváček Profil |
#21 · Zasláno: 27. 2. 2009, 14:27:47
|
||
| habendorf Profil |
#22 · Zasláno: 27. 2. 2009, 14:44:03
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 * |
#23 · Zasláno: 27. 2. 2009, 15:38:20
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 |
#25 · Zasláno: 27. 2. 2009, 15:51:07
„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 * |
#26 · Zasláno: 27. 2. 2009, 18:25:12
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 |
#27 · Zasláno: 27. 2. 2009, 23:15:40
„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 |
#28 · Zasláno: 28. 2. 2009, 00:08:48
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 |
#29 · Zasláno: 28. 2. 2009, 06:35:59
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 * |
#30 · Zasláno: 2. 3. 2009, 09:42:21
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 |
||
|
Téma pokračuje na další straně.
|
|||
0