Brzina - pouzdanost - kvalitet

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



English

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>



 

 

 

Saradnje posle završene obuke

Kada završite obuku i krenete da samostalno dizajnirate web sajtove, postoji mogućnost da naiđete na projekte koji Vam se mogu učiniti zahtevni po pitanju više stavki - tehnologija, klijent zahteva da sajt ima neke posebne opcije itd. TEKOMS nudi opciju saradnje po pitanju realizacije web projekata odnosno da zajednički realizujemo web sajt ili web aplikaciju. Ukoliko Vam se stvore određeni zahtevi za realizaciju nekog web projekta a niste sasvim sigurno da možete da samostalno odgovorite na njih slobodno nam pošaljite na email i vrlo brzo daćemo sve potrebne sugestije, savete kako da taj web projekat zajednički realizujemo.

Sertifikat kao opcija

Ukoliko mislite da imate dovoljno znanja možete uraditi određene vežbe posle koga možete dobiti Potvrdu da se uspešno savladali - Kurs web dizajna - HTML,CSS. Polaganje predstavlja izradu web stranica prema tačno definisanim smernicama kako trebaju da izgledaju. Polaganje je ozbiljno i prolaznost je oko 50%. Polaganje podrazumeva da posle 3-5 dana pošaljete komplet urađene vežbe na email (komplet izvorni kod sa pratećim folderima) nakon čega Vam stiže email sa sugestijama. Ukoliko se vidi da su neke greške lako rešive, rad se vraća na reviziju da se koriguje i vrati u određenom roku. Na taj polaganje predstavlja realnu situaciju u kojoj ćete se nalaziti u saradnji sa firmama kojima radite web sajt - a to je da tačno isprogramirate web stranicu kako se klijent tražio. Cene polaganja možete videtu na stranici - Cene obuka