html css trikovi css stilovi block min height


Besplatni online kurs web dizajna

Nastavna jedinica: Trick 21 - Kolone "pod konac" - stilovi "block" i "min-height"


Nazad


Kolone "pod konac" - stilovi "block" i "min-height"


Često se dešava kod web dizajniranja da se neke stavke (artikli, usluge itd) predstavljaju kroz kolone i usled količine tekste koji varira definiše se da kolone nisu jednobrazne po visini - nosu "pod konac" i to vizuelno nije bas efektno. Ako se web strana pregleda preko mobilnog uredjaja gde je ekran uži pa se komplet sadržaj fluidno rasporedjuje, visinska razlika tih elemenata se ne vidi. Naredni primer odredjuje kako možete da kolone sa odredjenim tekstom i slikama podesite da vizuelno kad se pregleda preko računara budu u ravni. Za ta podešavanja koristićemo stilove - "block" i "min-height". Naravno kao Stilski okvir u kome je vežba uradjena koristi BOOTSTRAP 3 (videti nastavne jedinice koje se bave BOOTSTRAP tehnologijom). Slike u nastavku daju primer gde raspored može zavisiti od širine ekrana ali u svakom slučaju kada se web strana preko standarnih monitora raspored sadržaja bi trebalo da bude približno kao na slici.

Raspored sadržaja nije u ravni

Raspored sadržaja je u ravni

Izvorni kod - H3 tag i P tag imaju inline stilove koji tu formu prikazuju (DISPLAY) kao BLOCK (Uokvirenu formu) neke odredjene MINIMALNE VISINE (min-height). Na taj način kad je ekran dovljno širok taj blok ima MIN VISINU i kako se ekran sužava (mobil. uredjaj) visina se povećava ali se i komplet sadržaj fluidno rasporedjuje niz ekran - jedan ispod drugog.



  <div class="col-md-3">
    <h3 style="display:block; min-height:80px;"> OVDE IDE NASLOV </h3>
    <p style="display:block; min-height:100px;"> Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst. </p>
    <p style="text-align:center;"><a class="btn btn-info" href="#" role="button">Detaljnije</a></p>
  </div>

  <div class="col-md-3">
    <h3 style="display:block; min-height:80px;"> OVDE IDE NEKI NASLOV </h3>
    <p style="display:block; min-height:100px;"> Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst. Ovde ide neki tekst.Ovde ide neki tekst. </p>
    <p style="text-align:center;"><a class="btn btn-info" href="#" role="button">Detaljnije</a></p>
  </div>

  <div class="col-md-3">
    <h3 style="display:block; min-height:80px;"> OVDE IDE NEKI DUUUUUUUUUUUUUŽI NASLOV </h3>
    <p style="display:block; min-height:100px;"> Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst. </p>
    <p style="text-align:center;"><a class="btn btn-info" href="#" role="button">Detaljnije</a></p>
  </div>

  <div class="col-md-3">
    <h3 style="display:block; min-height:80px;"> OVDE IDE NEKI MNOOOOOOOOOOOOOOOOOOOOOOOOOOOGO DUŽI NASLOV </h3>
    <p style="display:block; min-height:100px;"> Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst. </p>
    <p style="text-align:center;"><a class="btn btn-info" href="#" role="button">Detaljnije</a></p>
  </div>



 

 

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