html css trikovi kako da podesite jednake visine kolona


Besplatni online kurs web dizajna

Nastavna jedinica: Kako da podesite jednake visine kolona


Nazad


Kolone sa jednakim visinama


Jednostavnim stilizovanjem može se podesiti visina Div Tag-ova tako da se visina odredjuje prema količina teksta koja je najveća. vežba u rilogu pokazuje primer III kolone, koje pozivaju istu klasu gde je ključna stavka "display: table-cell;" kojim se podešava da kako se unosi tekst u svaki div tag (klase "stubac"), njihova visina bude uvek jednaka. Ukoliko u nekom div tag-u ima manje teksta, isti zadržava visinu koja odgovara visini div taga u kome se nalazi više teksta. Na taj način, elementi na web stranici imaju pravilne forme čime je konstrukcija preglednija.

Head


<style>
.stubac {
    display: table-cell;
    padding: 20px;
 width:100px;       
}
</style>

Body


<div class="stubac" style="color: #FFF; background-color: #09F;">
  <h2>Stubac 1</h2>
    <p> Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst. </p>
</div>

<div class="stubac" style="color: #FFF; background-color: #06C;">
  <h2>Stubac 2</h2>
    <p> 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.Ovde ide neki tekst.</p>   
</div>

<div class="stubac" style="background:blue; color: #FFF; background-color: #039;">
  <h2>Stubac 3</h2>
    <p> Ovde ide neki tekst. </p>
</div>

Prikaz u Browser-u


Stubac 1

Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.Ovde ide neki tekst.

Stubac 2

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.Ovde ide neki tekst.

Stubac 3

Ovde ide neki tekst.

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