Autor Zpráva
robbie
Profil *
#1 · Zasláno: 16. 3. 2016, 10:40:47
Odpovědět Citovat
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
Odpovědět Citovat
robbie:
Hodila by sa konkrétna ukážka... Kód s triedami a identifikátormi je dosť nepoužiteľný.
robbie
Profil *
#3 · Zasláno: 16. 3. 2016, 11:22:01 · Upravil/a: robbie o 5 minut později
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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*/}
}
Keďže každý nižší rozmer zobrazovacej plochy je obsiahnutý aj v predchádzajúcich zápisoch, uplatňuje sa dedičnosť. Ušetríme tak niekoľko znakov a nemusíme prebíjať to isté dookola.

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;}
}
Uvedenie pevného intervalu je prospešné snáď len v prípade, keď potrebujeme nastaviť úplne iný vzhľad a neoplatí sa nám prebíjať všetko predchádzajúce.
robbie
Profil *
#7 · Zasláno: 16. 3. 2016, 13:13:52
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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: 10 let

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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

0