Avko 16.04.2020 11:26
Predmet:Responsive web stranica

Responsive, prilagodljiva stranica kako za desctop tako i za ekrane mobilnih uredaja i tableta.

Trebao bih prilagoditi login formu mobilnim uredajima.
Procitao sam da prvo treba staviti ovo na pocetak web stranice:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

a onda u css ukljucimo medijski upit @media.

@media pravilo koristi za uključivanje bloka CSS svojstava samo ako je određeni uvjet istinit.

na kraju css stavimo ovo:
@media only screen and (max-width: 768px) {

-- ovdje jos jednom odredimo za pojedine dijelove kako ce se prikazati na mobilnom uredaju --
}

e sada ja sam to stavio i nikako nemogu razvuci login formu preko cijelog ekrana mobitela. Ostaje mi zakvacen u gornjem dijelu a dolje ekran mobitela prazan.

Za prikaz mobilnog ekrana koristim firefox, moze i crome a vivaldi toga nema, opera mi opera mobile emulator for desctop koji eto nisam instalirao. Znaci ako zelite stvarno vidjeti kako to izgleda na mobitelu uzmete firefox kliknete istovremeno na Ctrl+Shift+M i izaberete LG Optimus L70 384x640.

prikvacio sam i na cemu trenutno radim pa vidite ako tko zna.
Prilozi:
login_icentar.zip (Velicina datoteke:30.62 KB)

mirsadz 16.04.2020 23:37
Predmet:Re: Responsive web stranica

Pozdrav Avko,
sto se tice responzivnog dizajna mislim da si sve okej napravio... Inace ima tu jos sitnica, ovisno sta konkretno pravis, potrebno je za odredjene elemente odrediti "max-width", takodjer za fontove mozes koristiti "vw" jedinicu umjesto "px" (vw - viewport width), tako da ce velicina texta pratiti velicinu prozora browsera. Ako sam dobro razumio tvoje pitanje, imas problem sa razvlacenjem forme do odredjene granice...tacnije glavni elementi forme ostaju pri vrhu, a u ostatku forme se prikazuje kao prazan prostor i razvucen je.

PreuzmiIzvorni kôd (CSS):
  1. @media only screen and (max-width: 768px) {
  2.  
  3. .header {
  4.         width: 100%;
  5.         margin: 0px auto 0px;
  6.         color: white;
  7.         background: #5F9EA0;
  8.         text-align: center;
  9.         border: 1px solid #B0C4DE;
  10.         border-bottom: none;
  11.         border-radius: 10px 10px 0px 0px;
  12.         padding: 20px;
  13. }
  14.  
  15. form, .content {
  16.        
  17.         width: 100%;
  18.         height: 100%;
  19.         margin: 0px auto;
  20.         padding: 20px;
  21.         border: 1px solid #B0C4DE;
  22.         background: white;
  23.         border-radius: 0px 0px 10px 10px;
  24. }
  25. .input-group{
  26.         width: 100%;
  27.        
  28. }
  29. }

Ukoliko uklonis "height: 100%" iz klase "form, .content" u ovom dijelu, ta praznina ce nestati. Kod bi trebao izgledati ovako:

PreuzmiIzvorni kôd (CSS):
  1. form, .content {
  2.        
  3.         width: 100%;
  4.         margin: 0px auto;
  5.         padding: 20px;
  6.         border: 1px solid #B0C4DE;
  7.         background: white;
  8.         border-radius: 0px 0px 10px 10px;
  9. }

Nadam se da ce ti ovo biti od pomoci.

Avko 17.04.2020 08:22
Predmet:Re: Responsive web stranica

nista mi se nije desilo.

evo login forme:

PreuzmiIzvorni kôd (Text):
  1. <body>
  2.        
  3.         <div class="header">
  4.                 <h2>Prijava</h2>
  5.         </div>
  6.        
  7.         <form method="post" action="login.php">
  8.                 <?php echo display_error(); ?>
  9.                 <div class="input-group">
  10.                         <label>Korisnicko ime</label>
  11.                         <input type="text" name="imeKorisnika" >
  12.                 </div>
  13.                
  14.                 <div class="input-group">
  15.                         <label>Sifra</label>
  16.                         <input type="password" name="sifra">
  17.                 </div>
  18.                
  19.                 <div class="input-group">
  20.                         <button type="submit" class="btn" name="login_btn">Prijavi se</button>
  21.                 </div>
  22.                 <p>Ako niste registrirani? <a href="register.php">Registriraj se.</a></p>
  23.         </form>
  24. </body>

evo i css za mobitel:

PreuzmiIzvorni kôd (Text):
  1. @media only screen and (max-width: 768px) {
  2.  
  3. .header {
  4.         width: 100%;
  5.         margin: 0px auto 0px;
  6.         color: white;
  7.         background: #5F9EA0;
  8.         text-align: center;
  9.         border: 1px solid #B0C4DE;
  10.         border-bottom: none;
  11.         border-radius: 10px 10px 0px 0px;
  12.         padding: 20px;
  13. }
  14.  
  15. form, .content {
  16.         width: 100%;
  17.         margin: 0px auto;
  18.         padding: 20px;
  19.         border: 1px solid #B0C4DE;
  20.         background: white;
  21.         border-radius: 0px 0px 10px 10px;
  22. }
  23. .input-group{
  24.         width: 100%;
  25. }
  26. }
sto bi htio? Htio bi da forma dode u sredinu


mirsadz 17.04.2020 10:48
Predmet:Re: Responsive web stranica

Da bi ti forma dosla u sredinu, potrebno je dodati jos jednu klasu. Ja sam je nazvao "centar".

PreuzmiIzvorni kôd (CSS):
  1. .centar{
  2.         margin: 0;
  3.         position: absolute;
  4.         top: 50%;
  5.         left: 50%;
  6.         -ms-transform: translate(-50%, -50%);
  7.         transform: translate(-50%, -50%);
  8.   }

Nakon toga moras promijeniti u klasi ".header" njegovu Å¡irinu "width" na 100%, također i kod "form, .content" width na 100%, da ne bi doÅ¡lo do sužavanja forme. Te izmjene bi trebale izgledati ovako:

PreuzmiIzvorni kôd (CSS):
  1. .header {
  2.         width: 100%;
  3.         margin: 60px auto 0px;
  4.         color: white;
  5.         background: #5F9EA0;
  6.         text-align: center;
  7.         border: 1px solid #B0C4DE;
  8.         border-bottom: none;
  9.         border-radius: 10px 10px 0px 0px;
  10.         padding: 20px;
  11. }
  12. form, .content {
  13.        
  14.         width: 100%;
  15.         margin: 0px auto;
  16.         padding: 20px;
  17.         border: 1px solid #B0C4DE;
  18.         background: white;
  19.         border-radius: 0px 0px 10px 10px;
  20. }
  21.  
  22. .centar{
  23.         margin: 0;
  24.         position: absolute;
  25.         top: 50%;
  26.         left: 50%;
  27.         -ms-transform: translate(-50%, -50%);
  28.         transform: translate(-50%, -50%);
  29.   }

Ovo bi trebalo biti dovoljno da tvoja forma bude tacno u sredini... (u odnosu na vertikalu i horizontalu)

https://imgur.com/CKf97kz

Avko 17.04.2020 16:25
Predmet:Re: Responsive web stranica

jeli to cijelu formu stavim u <div class="centar"> ?

<body>

<div class="centar"

<div class="header">
<h2>Prijava</h2>
</div>

<form method="post" action="login.php">
<?php echo display_error(); ?>
<div class="input-group">
<label>Korisnicko ime</label>
<input type="text" name="imeKorisnika" >
</div>

<div class="input-group">
<label>Sifra</label>
<input type="password" name="sifra">
</div>

<div class="input-group">
<button type="submit" class="btn" name="login_btn">Prijavi se</button>
</div>
<p>Ako niste registrirani? <a href="register.php">Registriraj se.</a></p>
</form>

</div>
</body>

mirsadz 17.04.2020 18:43
Predmet:Re: Responsive web stranica

Da. Posto nam je header odvojen od same forme.

Avko 17.04.2020 19:14
Predmet:Re: Responsive web stranica

da sada radi za desctop,



ali sto se tice za mobitel nesto mi ne radi a neznam zasto

evo kod za media:
PreuzmiIzvorni kôd (Text):
  1. @media only screen and (max-width: 768px) {
  2.  
  3. body {
  4.         background: #000000;/*GhostWhite-#F8F8FF */
  5. }
  6.  
  7. .centar{
  8.         margin: 0;
  9.         position: absolute;
  10.         top: 50%;
  11.         left: 50%;
  12.         -ms-transform: translate(-50%, -50%);
  13.         transform: translate(-50%, -50%);
  14.   }
  15.  
  16. .header {
  17.         width: 100%;
  18.         margin: 60px auto 0px;/* margin: 0px auto 0px; */
  19.         color: white;
  20.         background: #ff3333; /* #5F9EA0; */
  21.         text-align: center;
  22.         border: 1px solid #B0C4DE;
  23.         border-bottom: none;
  24.         border-radius: 10px 10px 0px 0px;
  25.         padding: 20px;
  26. }
  27.  
  28. form, .content {
  29.         width: 100%;
  30.         margin: 0px auto;
  31.         padding: 20px;
  32.         border: 1px solid #B0C4DE;
  33.         background: #4d4d4d; /* white; */
  34.         color: white;
  35.         border-radius: 0px 0px 10px 10px;
  36. }
  37. .input-group{
  38.         width: 100%;
  39. }
  40. }

evo kako izgleda . Trebalo bi kod mobitela razvuci u ljevo i desno da nema onoga sa strane.

mirsadz 17.04.2020 22:54
Predmet:Re: Responsive web stranica

Pokušaj samo postaviti ".centar" da bude width: 100%; ali kod @media. Dakle ovako:

PreuzmiIzvorni kôd (CSS):
  1. @media only screen and (max-width: 768px) {
  2.  
  3. .header {
  4.         width: 100%;
  5.         margin: 0px auto 0px;
  6.         color: white;
  7.         background: #5F9EA0;
  8.         text-align: center;
  9.         border: 1px solid #B0C4DE;
  10.         border-bottom: none;
  11.         border-radius: 10px 10px 0px 0px;
  12.         padding: 20px;
  13. }
  14.  
  15. form, .content {
  16.        
  17.         width: 100%;
  18.         height: 100%;
  19.         margin: 0px auto;
  20.         padding: 20px;
  21.         border: 1px solid #B0C4DE;
  22.         background: white;
  23.         border-radius: 0px 0px 10px 10px;
  24. }
  25.  
  26. .centar{
  27.         width: 100%;
  28.   }
  29.  
  30. .input-group{
  31.         width: 100%;
  32.        
  33. }
  34. }

Avko 19.04.2020 09:15
Predmet:Re: Responsive web stranica

da, to je to. Hvala.

zxz 19.04.2020 12:30
Predmet:Re: Responsive web stranica

Zakaci i bazu kad si zakacio app.
Citat:
$_SESSION['msg'] = "Prvo se morate prijaviti.";
Cemu ovo sluzi?