Centar za edukaciju-BiH

iCentar → Racunari i oprema → Programirannje i baze podataka → Html/CSS


Prosiri i skupi Opcije teme
Stranice (2):1,2
 Prikazi prvu neprocitanu poruku

#1 16.04.2020 10:26
Avko Van mreze
Administrator
Registrovan od:28.05.2014
Postovi:4,807


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:
Informacije o tipu datoteke za:zip  login_icentar.zip
Preuzimanja:223
Velicina datoteke:30.62 KB

zivot je moja domovina.
↑  ↓

#2 16.04.2020 22:37
mirsadz Van mreze
Administrator
Registrovan od:26.05.2011
Postovi:48


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.
↑  ↓

#3 17.04.2020 07:22
Avko Van mreze
Administrator
Registrovan od:28.05.2014
Postovi:4,807


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

zivot je moja domovina.
Ovaj post je ureden 1 puta. Posljednja izmjena 17.04.2020 07:23 od strane Avko. ↑  ↓

#4 17.04.2020 09:48
mirsadz Van mreze
Administrator
Registrovan od:26.05.2011
Postovi: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
↑  ↓

#5 17.04.2020 15:25
Avko Van mreze
Administrator
Registrovan od:28.05.2014
Postovi:4,807


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>
zivot je moja domovina.
Ovaj post je ureden 1 puta. Posljednja izmjena 17.04.2020 15:25 od strane Avko. ↑  ↓

#6 17.04.2020 17:43
mirsadz Van mreze
Administrator
Registrovan od:26.05.2011
Postovi:48


Predmet:Re: Responsive web stranica
Da. Posto nam je header odvojen od same forme.
↑  ↓

#7 17.04.2020 18:14
Avko Van mreze
Administrator
Registrovan od:28.05.2014
Postovi:4,807


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.

zivot je moja domovina.
↑  ↓

#8 17.04.2020 21:54
mirsadz Van mreze
Administrator
Registrovan od:26.05.2011
Postovi:48


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. }
↑  ↓

#9 19.04.2020 08:15
Avko Van mreze
Administrator
Registrovan od:28.05.2014
Postovi:4,807


Predmet:Re: Responsive web stranica
da, to je to. Hvala.
zivot je moja domovina.
↑  ↓

#10 19.04.2020 11:30
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,642


Predmet:Re: Responsive web stranica
Zakaci i bazu kad si zakacio app.
Citat:
$_SESSION['msg'] = "Prvo se morate prijaviti.";
Cemu ovo sluzi?
Podrska samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

Stranice (2):1,2

Srodne teme

Ko je online?

Aktivni clanovi:
nema clanova


Kontakt
Sva vremena su GMT +01:00. Trenutno vrijeme: 12: 03 am.