Autor Zpráva
wawrik
Profil *
Mam fotogalériu http://www.tabor-geronimo.szm.sk/fotogaleria2.html, každý obrázok je vyskladaný z tabuľky. Je to hotové, ale nepáči sa mi to, tak to chcem zmeniť. Otázka: ako sa takáto galéria dá urobiť variabilne? Keď chcem zmeniť rozmer obrázkov (myslím tým buniek tabuľky - je mi jasné, že samotné náhľady obrázkov musím robiť ručne) alebo počet stĺpcov/riadkov, aby som to nemusel robiť pri každom zvlášť? Zrejme by to mohlo ísť cez css, ale ja nemám páru, ako na to...

Alebo sa to dá robiť cez divy? Začal som to pôvodne robiť cez ne, ale prišlo mi to strašne nepraktické...

Za každú radu/odkaz dík.
Honza Hučín
Profil
Fotogalerie se dá dělat například tak, že každý obrázek dáš do samostatného DIVu a tomu dáš v CSS float:left. Je potřeba, aby obrázky měly stejnou výšku, tu je také vhodné nastavit pevně (height:150px - třeba). Po sobě jdoucí plovoucí objekty se řadí za sebe na šířku, jakmile už nemají prostor vpravo, skočí dolů (na další "řádek") a řadí se dál.

Takže:
<div class="fotka"><img src="fotka1.jpg" width=sirka height=vyska alt="popis"></div>
<div class="fotka"><img src="fotka2.jpg" width=sirka height=vyska alt="popis"></div>
<div class="fotka"><img src="fotka3.jpg" width=sirka height=vyska alt="popis"></div>

a ve stylopisu
.fotka {float:left;height:150px} (případně nějaký margin atd.)
wawrik
Profil *
Ano, nejako podobne to mam - tie tabulky s obrazkom su zabalene do divu. Problem je ten, ze moje obrazky (resp. polozky galerie) nie su ako jeden obrazok, ale ramik je vyskladany z obrazkov viacerych - kvoli tomu rozstrapkanemu okraju. Chcem to tak robit kvoli tomu, aby som nemusel kazdemu obrazku rucne dorabat ten ramik, kvoli udrzbe a aktualizacii galerie by to tak IMHO malo byt jednoduchsie.
Leo
Profil
Pokud ty obrazky maji stejne rozmery tak ten ramecek dejte jako backgroud-image tomu divu, Leo
Acci
Profil
Článek na wellstyled.com http://www.wellstyled.com/css-photo-cards.html. Tam je použito právě float:left
ronnie
Profil
Honza Hučín: neslo by misto zbytecneho divu vytvorit tohle:
img {
float: left;
display: block;
}
?
Honza Hučín
Profil
Teoreticky ano, protože img je blokový prvek. Ale v praxi je potřeba kolem obrázku udělat prostor. Takže bys měl nastavit img margin, jenže pak hrozí bug dvojnásobného okraje v IE. Proto je lepší to řešit paddingem toho obalujícího divu.
Druhý důvod je ten, že se k obrázku často píše nějaký popisek.
Toto téma je uzamčeno. Odpověď nelze zaslat.