Autor | Zpráva | ||
---|---|---|---|
robbie Profil * |
#1 · Zasláno: 16. 3. 2016, 10:40:47
Ahoj,
vyvíjím opravdu malou mobilní dražbu s responsivním designem, v mobilní opeře a na mozille v aplikaci pro vývojáře-responsivní design zobrazuje stránka v pořádku, nicméně mobilní chrome a mozilla mi odesilací formulář uplně znetvořují a už nevím, co s tím. Poradí prosím někdo, když přiložím css kod? <style type="text/css"> body { background-image: url('../images/obr.jpg'); /* obrázek na pozadí */ background-attachment:fixed; background-size: 100% 100%; background-repeat:no-repeat; } #wrapper{ margin:0 auto; margin-top:100px; background-color: #999; width:960px; height:400px; } #left{color:white; margin-right:5px; padding-top:5px; padding-left:5px; float:left; width:50%; height:162px; background:darkgrey; opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; } #right{ color:white; margin-left:5px; float:left; width:47%; height:162px; background:#dcdcdc; opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; } #footer{ color:white; float:left; width:100%; height:50px; margin:40px auto 0px auto; background:#d3d3d3; opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; height:80px; } H1,.up{color:white; text-align: center;} .label{width:100px; float:left;} .odeslat{float:left; margin-left:20px; } /*responsive css 320-640px*/ @media screen and (min-width:319px) and (max-width:640px){/*vše s šířkou mezi 320px a 640px */ body { background-image: url('../images/obr.jpg'); /* obrázek na pozadí */ background-attachment:fixed; background-size: 100% 100%; background-repeat: no-repeat; } #wrapper{margin:0 auto; width:100%; background-color: #999; height:auto; } #left{margin:0px; /* zde je umisten formular */ float: left; width:100%;} #right{margin:5px 0px; float: left; width:100%;} #footer{margin:5px 0px; float: left; width:100%; } .label{width:150px; float:left;} .odeslat{margin-left:165px} </style> |
||
Tomáš123 Profil |
#2 · Zasláno: 16. 3. 2016, 10:49:02
robbie:
Hodila by sa konkrétna ukážka... Kód s triedami a identifikátormi je dosť nepoužiteľný. |
||
robbie Profil * |
Tomáš123:
Myslis celkový html kod? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <Title>........................</Title> <style type="text/css"> body { background-image: url('../images/obr.jpg'); /* obrázek na pozadí */ background-attachment:fixed; background-size: 100% 100%; background-repeat:no-repeat; } #wrapper{ margin:0 auto; margin-top:100px; background-color: #999; width:960px; height:400px; } #left{color:white; margin-right:5px; padding-top:5px; padding-left:5px; float:left; width:50%; height:162px; background:darkgrey; opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; } #right{ color:white; margin-left:5px; float:left; width:47%; height:162px; background:#dcdcdc; opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; } #footer{ color:white; float:left; width:100%; height:50px; margin:40px auto 0px auto; background:#d3d3d3; opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; height:80px; } H1,.up{color:white; text-align: center;} .label{width:100px; float:left;} .odeslat{float:left; margin-left:20px; } .img{margin-left:300px;} /*responsive css 320-640px*/ @media screen and (min-width:319px) and (max-width:640px){/*vše s šířkou mezi 480px a 640px */ body { background-image: url('../images/obr.jpg'); /* obrázek na pozadí */ background-attachment:fixed; background-size: 100% 100%; background-repeat: no-repeat; } #wrapper{margin:0 auto; width:100%; background-color: #999; height:auto; } #left{margin:0px; float: left; width:100%;} #right{margin:5px 0px; float: left; width:100%;} #footer{margin:5px 0px; float: left; width:100%; } .label{width:150px; float:left;} .odeslat{margin-left:165px} .img{margin-left:0px; float:left;} </style> </head> <body> <div id="wrapper"> <H1>.........................</H1> <p class="up"> ........................</p> <p class="up"> ........................</p> <div id="left"> <form action="send.php" method="POST"> <label class="label">Jméno:</label> <input type="text" name="jmeno"><br/> <label class="label">Příjmení:</label> <input type="text" name="prijmeni"><br/> <label class="label">E-mail:</label> <input type="text" name="email"><br/> <label class="label">Vyber</label> 1.<input type="checkbox" name="one"> 2.<input type="checkbox" name="one"> 3.<input type="checkbox" name="one"> 4.<input type="checkbox" name="one"> <br/> <label class="label">Nabízíte</label> <input class="castka" type="text" name="castka"><br/> <div class="odeslat" ><input type="submit" name="submit" value="Odeslat"> <input type="reset" name="reset" value="Reset"></div><br/> </form> </div> <div id="right"> ........................</br> </br> </div> <div id="footer"> </div> </div> </body> |
||
Tomáš123 Profil |
#4 · Zasláno: 16. 3. 2016, 11:37:08
robbie:
Zrejme ti vadí, že sa ten formulár rozpadne pri zobrazovacej ploche menšej ako 319px. Je to preto, že si to tak nastavil. Medzi 320px a 640px sa zobrazuje užšia podoba stránky, mimo tento interval sa zobrazuje pôvodná desktopová verzia. Ak som sa netrafil, popíš, prosím, požadované správanie a čo ti vadí na tom súčasnom. |
||
robbie Profil * |
#5 · Zasláno: 16. 3. 2016, 11:53:27
Ano presne tak, jak pises, a za nic na svete nejsem schopen prijit na to, jak to nastavit, aby to pri mensim rozliseni např 290x1024px zustalo stejne jako pri tom rozlišení 320-640px, fakt uz nevim. Děkuji
|
||
Tomáš123 Profil |
#6 · Zasláno: 16. 3. 2016, 12:21:36
robbie:
„a za nic na svete nejsem schopen prijit na to, jak to nastavit, aby to pri mensim rozliseni zustalo stejne jako pri tom rozlišení 320-640px“ No, tak, že tam nastavíš väčší rozsah napríklad 0 - 640px: @media screen and (max-width:640px) Nastavenie konkrétneho rozsahu je prospešné málokedy, zoberme si príklad: div {float: left; width: 150px} @media screen and (max-width: 640px) { div {width: 75%; /*float: left stále platí*/} } @media screen and (max-width: 480px) { div {float: none; margin: auto; /*width: 75% platí*/} } @media screen and (max-width: 320px) { div {width: auto; /*float: none a margin: auto stále platia*/} } Pozor však na to, že zápisy musia ísť po poradí, inak by pravidlá priority spôsobili, že zvíťazí nechcená deklarácia. Ak by sme využívali rozsahov, ako v tvojom pôvodnom zápise, vyššie uvedený príklad by musel byť o niečo ukecanejší: div {float: left; width: 150px} @media screen and (min-width: 481px) and (max-width: 640px) { div {width: 75%; /*float: left stále platí*/} } @media screen and (min-width: 321px) and (max-width: 480px) { div {float: none; width: 75%; margin: auto;} } @media screen and (min-width: 0) and (max-width: 320px) { div {float: none; width: auto; margin: auto;} } |
||
robbie Profil * |
#7 · Zasláno: 16. 3. 2016, 13:13:52
stejne kdyz nastavim rozsah
@media screen and (min-width: 0px) and (max-width: 640px) tak je formular ve smartphonu rozházený, proč to Opera zobrazí v pohode a jine prohlizece ne, takhle to nemohu uverejnit. |
||
Tomáš123 Profil |
#8 · Zasláno: 16. 3. 2016, 14:06:37
robbie:
„tak je formular ve smartphonu rozházený“ Ako rozhádzaný? Tak ako predtým, keď ešte nebol správne nastavený rozsah? Skúsil si vyčistiť keš? |
||
robbie Profil * |
#9 · Zasláno: 16. 3. 2016, 17:51:47
Tomáš123
Moc děkuju, měl sem tam v responisvním blbě pravidlo na upravu Labels. Už to je zhruba jak jsem chtěl |
||
Časová prodleva: 8 let
|
0