[css] Galerija slika kao na b92

Marko Medojevic · 27. 10. 2008.

Ćao!

Napravio sam neku galeriju slika koja inače kao layout koristi tabele. Rešio sam da to promenim, tj. prebacimu u css, ali mi je zapelo kod vertikalnog poravnanja teksta!
Ovako galerija treba da izgleda:

Znači šitina je konstantna, dok visina slika varira, a tekst je poravnat sa dnom slike.

Kako ovo odratiti pomoću div-ova i css-a?

Unapred hvala!

ivanhoe · 27. 10. 2008.

Kôd:

#gallery img { float:left; }
#gallery p { 
    clear: left;
    overflow:auto;
    width:100%; 
    margin-bottom: 20px; 
}

HTML kôd:

<p>
   <img src="" alt="" />
   Blablabla...
</p> 

itd..

Marko Medojevic · 27. 10. 2008.

Hvala puno!

ivanhoe · 28. 10. 2008.

Ehh, sad sam tek shvatio da sam se zeznuo, nisam pazljivo procitao zahtev za poravnavanje po dnu slike. Ono moje poravnava po gornjoj ivici, a ako zelis da ti se poravnava po donjoj, samo izbaci CSS deo, posto je poravnjavanje po donjoj ivici default

pkrstic · 28. 10. 2008.

tabela? ne stedis nista na kolicini tagova, i mnogo je lakse izvesti poravnanje... ne treba se gubiti u preteranoj sitoci koda i izbegavanju tabela... verujem da si mogao to do sad i bez konsultacije foruma da odradis u tabeli...

da li znas da css funkcionise i sa td i table tagovima?

ivanhoe · 28. 10. 2008.

moglo bi ovako (ako je slika po visini uvek veca od texta):

Kôd:

#gallery p {position:relative;}
#gallery p span{ position:absolute; height:auto; bottom:0; }

HTML kôd:

<p>
   <img src="" alt="" />
   <span>Blablabla...</span>
</p> 
itd..

27. 10. 2008.	#1
Marko Medojevic član Certified Datum učlanjenja: 12.05.2007 Lokacija: Beograd Poruke: 82 Hvala: 20 293 "Hvala" u 7 poruka	[css] Galerija slika kao na b92 Ćao! Napravio sam neku galeriju slika koja inače kao layout koristi tabele. Rešio sam da to promenim, tj. prebacimu u css, ali mi je zapelo kod vertikalnog poravnanja teksta! Ovako galerija treba da izgleda: Znači šitina je konstantna, dok visina slika varira, a tekst je poravnat sa dnom slike. Kako ovo odratiti pomoću div-ova i css-a? Unapred hvala!

27. 10. 2008.	#2
ivanhoe Ivan Dilber Sir Write-a-Lot Datum učlanjenja: 18.10.2005 Lokacija: Bgd Poruke: 5.320 Hvala: 104 2.344 "Hvala" u 583 poruka	Kôd: #gallery img { float:left; } #gallery p { clear: left; overflow:auto; width:100%; margin-bottom: 20px; } HTML kôd: <p> <img src="" alt="" /> Blablabla... </p> itd.. __________________ Leadership is the art of getting people to want to do what you know must be done.

28. 10. 2008.	#4
ivanhoe Ivan Dilber Sir Write-a-Lot Datum učlanjenja: 18.10.2005 Lokacija: Bgd Poruke: 5.320 Hvala: 104 2.344 "Hvala" u 583 poruka	Ehh, sad sam tek shvatio da sam se zeznuo, nisam pazljivo procitao zahtev za poravnavanje po dnu slike. Ono moje poravnava po gornjoj ivici, a ako zelis da ti se poravnava po donjoj, samo izbaci CSS deo, posto je poravnjavanje po donjoj ivici default __________________ Leadership is the art of getting people to want to do what you know must be done. Poslednja izmena od ivanhoe : 28. 10. 2008. u 00:56.

28. 10. 2008.	#6
ivanhoe Ivan Dilber Sir Write-a-Lot Datum učlanjenja: 18.10.2005 Lokacija: Bgd Poruke: 5.320 Hvala: 104 2.344 "Hvala" u 583 poruka	moglo bi ovako (ako je slika po visini uvek veca od texta): Kôd: #gallery p {position:relative;} #gallery p span{ position:absolute; height:auto; bottom:0; } HTML kôd: <p> <img src="" alt="" /> <span>Blablabla...</span> </p> itd.. __________________ Leadership is the art of getting people to want to do what you know must be done.

Slične teme
Tema	Početna poruka teme	Forum	Odgovori	Poslednja poruka
Flash OS Galerija + PHP citanje liste slika iz foldera i serviranje kao XML	MrSteel	Flash	0	09. 01. 2008. 03:30
Raspored slika	Blood	(X)HTML, JavaScript, DHTML, XML, CSS	14	08. 02. 2007. 18:48
Ceeses - galerija sa domaćih prostora	Dragan Babić	Web design, Layout, User Interface	7	16. 09. 2006. 17:22
fenomenalna galerija	kalkulus	Opušteno	1	06. 09. 2006. 15:50
BBC redesign - galerija poslatih radova	Denis_Radenkovic	Opušteno	5	09. 07. 2006. 13:52

28. 10. 2008.	#5
pkrstic profesionalac Qualified Datum učlanjenja: 06.09.2007 Lokacija: Zrenjanin Poruke: 109 Hvala: 21 11 "Hvala" u 11 poruka	tabela? ne stedis nista na kolicini tagova, i mnogo je lakse izvesti poravnanje... ne treba se gubiti u preteranoj sitoci koda i izbegavanju tabela... verujem da si mogao to do sad i bez konsultacije foruma da odradis u tabeli... da li znas da css funkcionise i sa td i table tagovima?