KAKO DA poravnate vertikalne liste za navigaciju sa više linija

Kategorija: Savet :: Datum: 2009-08-07

Pregleda(30 dana/ukupno): 17 / 559

Predstavićemo vam brz trik za poravnanje vertikalnih lista za navigaciju koje koriste uobičajeni pristup plutajućeg okvira za prikaz liste u redu, ali imaju nekoliko stavki koje su prikazane preko više linija.

Pretpostavimo da imate sledeći CSS kod za listu navigacije od jedne linije:

#nav li {
display: block;
height: 3em;
margin: 0 3px;
padding: 3px 7px;
background: Khaki;
float: left;
}

Koji je primenjen na sledeći HTML kod:

Item one
Item two
Large third
item
The Fourth
Very large
fifth item

Ako želite da ga modifikujete za vertikalno poravnanje stavki koje imaju i jednu i više linija, logički pristup je da upotrebite atribut vertical-align. Međutim, ovo baš i nije najbolje rešenje.

Problem je što vertical-align centrira vertikalno elemente u liniji ali u odnosu na najviši element svake linije.

Postoji još jedan atribut koji će vam pomoći da rešite ovaj problem: line-height. Ako je visina linije bloka jednaka sa njegovom visinom, tagovi unutar bloka koji imaju samo liniju su vertikalno centrirani. Ali postoje i blokovi sa više linija tako da treba da podesite visinu tih blokova na visinu_bloka / broj_linija, tako da dodata visina linija bude jednaka sa visinom bloka.

Uzmimo primer gde imamo blokove sa dve linije tako da treba da podesite visinu linije datih elemenata na polovinu visine bloka. Novi kod za ovo bi bio nešto slično sledećem:

CSS

#nav-fixed li {
display: block;
height: 3em;
margin: 0 3px;
padding: 3px 7px;
background: Khaki;
float: left;
text-align: center;
line-height: 3em;
}

#nav-fixed .double-line {
line-height: 1.5em;
}

HTML

Item one
Item two
Large third
item
The Fourth
Very large
fifth item

Preporuka - Camera RAW studijske tehnike - kolorna knjiga

Kolorna knjiga na 340 strana. Korak dalje u radu sa digitalnom fotografijom. Profesionalni fotografi koji su usvojili RAW fotografiju i Camera Raw tehnike za obradu fotografija smatraju da RAW predstavlja novu revoluciju u fotografiji. RAW vam nudi kontrolu nad kvalitetom fotografije koja do sada nije viđena, dozvoljavajući vam da podignete obradu fotografija u neslućene visine. Na ovim stranicama, jedanaest vrhunskih fotografa deli sa vama savete i tehnike koje su usavršili kako bi izvukli maksimum iz fotografija. Pratite njihove savete, i garantujemo vam da ćete svaki put dobiti profesionalne rezultate prilikom obrade fotografija.

Link ka knjizi i korpi za naručivanje.