html css trikovi ubacivanje call button u mobil verziju


Besplatni online kurs web dizajna

Nastavna jedinica: Trick 22 - Call button - samo za mobil verzije


Nazad


Call button - samo za mobil verzije


Danas se podrazumeva da svaki web sajt bude full resposne prilagodjen za mobilne uredjaje. Zato se preporučuje da se u mobil verziji u footeru pojavi div tag koji ima standarnu formu linka ali ne ka web strani nego ka broju. Na taj način, ako korisnik pregleda web stranicu preko mobilnog telefona klikom na div tag klase "call-button" poziva broj. Div tag klase "call-button" se pojavljjuje ako je širina ekrana manja od 414 px (standard kod mobilnih telefona), ima jednostavan dizajn i fiksiranu poziciju na dnu ekrana mobilnog telefona (vidite stilove klase "call-button"). Pretpostavlja se da imate div tag klase "footer" na postojećoj web stranici koji se u tom slučaju mora za nekih 45-50 px pomeriti na gore (preko stila margin-bottom: 45px;) da bi se ovaj div tag implementirao - samo u slučaju ako je ekran manji od 414 px (ovaj parametar možete i izmeniti).

U CSS fajl idu stilovi

    
        @media (max-width:414px){
        .call-button {
            width:100%;                                        /* širina div taga ide celom širinom ekrana */
            background-color:#3552A3;                          /* boja div taga - po želji */
            padding:10px;                                      /* unutrašnja margina */
            text-align:center;                                 /* tekst da ide po sredini - opcija */ 
            bottom:0px;                                        /* pozicija div taga je u dnu ekrana */ 
            position:fixed;                                    /* pozicija fiksirana scroll-ovanjem */ 
            height:50px;            /* visina div taga oko 45-50 px */
            background-image:url(images/phone-icon.png);    /* sličica telefona iz foldera images */
            background-position:center center;       
            background-repeat:no-repeat;
            background-size:cover;
            cursor:pointer;
        }
        .footer {
            margin-bottom:45px;
        }    
        }    
    
    

U odeljak BODY

     
        <div class="call-button" onClick="location.href='tel://0601234567'"></div>
    
    

Prikaz web strane preko mobilnog uredjaja

 

 

NOVO - DOPUNITE ZNANJE - WEB PROGRAMIRANJE (PHP, SQL)

Posle pređenih svih nastavnih jedinica u okviru Besplatne online obuke za web dizajn, obuku možete nadograditi odnosno dopuniti svoje znanje tako što će naučiti i web programiranje - PHP, SQL - izrada dinamičkih sajtova, online prodavnica. Kurs prati napisana skripta, izvorni kodovi i nekoliko desetina video nastavnih jedinica gde polaznik hronološki uči pisanje koda u PHP-u, testiranje skripti, korišćenje i rad sa Local serverom.

Cena obuke