Autor Zpráva
Anonymní
Profil *
Ne!zarovnané řádky s LABEL,INPUT,BUTTON (px vs ex)(IE vs FF)
Petroff
Profil
Řádky(align=left) mají vizuálně tvořit blok [i když uživatel zmenší/zvětší velikost písma !!! ]
Vynechal jsem všechny bezproblémové řádky, zůstaly tyto:
>[LABEL width=A][INPUT width=B]
>[--- BUTTON width=A+B -------- ]
>[------- HR width=A+B ---------- ]
Sestavil jsem kód,toto jsou okleštěné tagy (jen atributy s vlivem na rozmístění):
—————————————————————————————————————————————
<style>
LABEL { width: 140px; float:left; display:block; }
INPUT { width: 210px; margin-bottom:10px }
BUTTON { width: 350px }
.sirka { width: 350px }
.mar0 { margin-left:0 }
.txtL { text-align:left }
</style>

<LABEL>Zadej...:</LABEL> <INPUT type=text><BR>
<LABEL>Zadej...:</LABEL> <INPUT type=text><BR>
<LABEL>Zadej...:</LABEL> <INPUT type=text><BR>
<BUTTON type=submit> Proveď...: </BUTTON><BR>
<HR align="left" class="sirka"> ......................není čistý CSS
<HR class="sirka mar0 txtL"> HR: CSS 1.způsob (IE+FF)
<div class="sirka"><HR></div> HR: CSS 2.způsob (IE+FF)
—————————————————————————————————————————————

Poraďte jak místo pixelů použít ex/em.
Po pouhé úpravě hodnot v tabulce stylů (a nastavení správné hodnoty font)
mám kód sice plně funkční ve Firefoxu, ale IE7 při zvětšení písma rozhází sestavené řádky a
při zmenšení písma se "pouze" ukáže disproporce šířky řádků [ Button | Hr ] a [ Label_Input ].
Doufám v nějakou fintu v CSS, ale v nejhorším bych sáhnul po ošetření JS kodem.

<html><!-- OK. in FF -->
<head>
<style>
DIV.obs{ width:50ex; font: 1em "MS Shell Dlg" }
LABEL { width: 20ex; float:left; display:block; font-size:1em }
INPUT { width: 30ex; font-size:1em }
BUTTON,.sirka {width: 100%}
HR {size: 1em}
</style>
</head><body>
<form>
<DIV class="obs">

<LABEL>Zadej...:</LABEL> <INPUT type=text><BR>
<LABEL>Zadej...:</LABEL> <INPUT type=text><BR>
<LABEL>Zadej...:</LABEL> <INPUT type=text><BR>
<div class="sirka"> <HR> </div>
<BUTTON type=submit> Provest...: </BUTTON><BR>

</DIV>
</form>
</body>
</html>
habendorf
Profil
Proč nefloatuješ i ten input?
Petroff
Profil
Díky.
Zkusil jsem:
INPUT { width: 30ex; float:left;.....}
- v FF přesně to samé jako předtím=OK.
-v IE malý pokrok: není nutné zvětšovat šířku řádku z 50ex na 50.5ex aby se řádky nelámaly při standardní velikosti písma (rád bych zjistil proč tomu tak je, ale IE Developer Toolbar nemá ty možnosti jako bohatší brácha z FF).
Tipuju že IE nevím proč "vyrobí" pravý okraj navíc: když dám
INPUT { width: 30ex; margin-right:-3px;....}
tak se taky řádek nezalomí. Bohužel se taky smaže pravá linka z INPUT rámečku.
Petroff
Profil
Bohužel - toto je maximum, ke kterému jsem dospěl.
Počkám ještě pár dnů - ale mám tuchy že s tím nikdo nehne, a to znamená použít javascript
(mám trochu obavy sic jsem s EXPRESSIONS zatím neměl tu čest).

<!--
Velikost písma: Výsledek:
___________________________Firefox:__________
standardní -- OK --
zvětšené -- OK --
zmenšené -- OK --
___________________________IExplorer:________
standardní -- OK --
zvětšené - ERROR => Řádky LABEL-INPUT se zalomí !!!
zmenšené -- OK -- (při velkém zmenšení leží LABEL o něco výše než INPUT)
-->
<html>
<head>
<style>
.obsah { width: 50ex; font: 1em "MS Shell Dlg" }
.label { width: 26ex; float:left }
INPUT { width: 24ex; float:left; font-size: 1em }
LABEL {position:relative;top:.3ex; font: 1em serif }
BUTTON,.sirka {width: 100%; font-size:1em; font-weight:bold; }
BR {clear:both}
</style>
</head><body>
<form>
<DIV class="obsah">

<DIV class="label"><LABEL>Zadej parametr pro funkci A</LABEL></DIV> <INPUT type=text><BR>
<DIV class="label"><LABEL>Zadej parametr pro funkci B</LABEL></DIV> <INPUT type=text><BR>
<DIV class="label"><LABEL>Zadej parametr pro funkci C</LABEL></DIV> <INPUT type=text><BR>

<div class="sirka"> <HR> </div>

<BUTTON type=submit> Provest funkci X </BUTTON><BR>

</DIV>
</form>
</body></html>
Toto téma je uzamčeno. Odpověď nelze zaslat.