| Autor | Zpráva | ||
|---|---|---|---|
| wawrik Profil * |
#1 · Zasláno: 3. 2. 2005, 08:41:17
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 |
#2 · Zasláno: 3. 2. 2005, 08:58:46
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 * |
#3 · Zasláno: 3. 2. 2005, 09:19:53
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 |
#4 · Zasláno: 3. 2. 2005, 12:01:34
Pokud ty obrazky maji stejne rozmery tak ten ramecek dejte jako backgroud-image tomu divu, Leo
|
||
| Acci Profil |
#5 · Zasláno: 3. 2. 2005, 16:33:11
Článek na wellstyled.com http://www.wellstyled.com/css-photo-cards.html. Tam je použito právě float:left
|
||
| ronnie Profil |
#6 · Zasláno: 3. 2. 2005, 19:07:48 · Upravil/a: ronnie
Honza Hučín: neslo by misto zbytecneho divu vytvorit tohle:
img { float: left; display: block; } ? |
||
| Honza Hučín Profil |
#7 · Zasláno: 3. 2. 2005, 22:50:05
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. |
||
|
Časová prodleva: 19 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0