| Autor | Zpráva | ||
|---|---|---|---|
| Hrochoroh Profil |
#1 · Zasláno: 31. 8. 2013, 19:11:58
Věděl by prosím někdo, jak udělat rámečky náhledů fotogalerie tak, aby měly fixní rozměr čtverce určité velikosti a náhledy se do nich automatcky umisťovaly centrovaně bez ohledu na to jestli jsou navýšku nebo našířku?
Mám na mysli tento efekt http://www.photomacro.cz/Atlas%20v%C3%A1%C5%BEek/ ale zde je to uděláno jako tabulka. Já mám na mysli nějaké řešení přes CSS nebo tak nějak podobně. p.s. jsem naprostý začátečník, takže pokud to není něco složitého, uvítám konkrétní příklady zápisu. Moc děkuji |
||
| han5vk Profil |
Prvé čo mi napadlo je použiť niečo takéto:
HTML:
<div class='obalObrazku'>
<img src='blahBlah'>
</div>
CSS:
.obalObrazku {
width: 100px; /* Napríklad */
height: 100px; /* Napríklad */
line-height: 100px; /* Rovnaké ako výška */
}
/* Obrázok sa vycentruje pokiaľ bude menší ako obal, teda 100x100px alebo ako sa to nastaví. */
.obalObrazku img {
margin: 0px auto;
vertical-align: middle;
}Samozrejme, dajú sa nahodiť ďalšie veci ako pozadie, bordery a podobne. |
||
| Hrochoroh Profil |
#3 · Zasláno: 31. 8. 2013, 20:23:58
Díky, zkusil jsem to, ale hodilo mi to náhledy do jednoho sloupce pod sebe.
Mám náhledy o max. velikosti strany 220px, tak jsem width a height dal 230px a line-height taky 230px. Zkoušel jsem přidat i pozadí, aby byl obal obrázku viditelný, ale bez efektu. Je možné, že dělám něco blbě, ale takto mi to bohužel nefunguje. Přesto díky za snahu. |
||
| han5vk Profil |
Vidím to tak, že centrovanie náhľadov v rámčekoch funguje, avšak tie rámčeky sú divy, čiže sa vypisujú pod seba. Fakt neviem, či by na toto nebolo jednoduchšie použiť tabuľku, kedže jediná ochádzka čo ma momentálne napadá je ich vypísať napr. 10 floatovaných, a potom clearovať, nejako takto:
.obalObrazku {
width: 100px; /* Napríklad */
height: 100px; /* Napríklad */
line-height: 100px; /* Rovnaké ako výška */
float: left;
}
.clear {
clear: left;
width: 100%;
height: 1px;
visibility: hidden;
}
HTML:
<div class='obalObrazku'>
<img src=''>
</div>
<div class='obalObrazku'>
<img src=''>
</div>
<div class='clear'></div>
<div class='obalObrazku'>
<img src=''>
</div>
<div class='obalObrazku'>
<img src=''>
</div>
...Teda, aspoň si myslím že to je to čo je problém, neviem ako si to implementoval. Skús si nastaviť obrázok nejaký červený a obalObrazku zelený alebo aký, aby si videl umiestnenie.. Prečo sa snažíš vyhnúť tabuľke? to by bolo jednoduchšie, pričom tabuľka sa dá pekne naštýlovať. |
||
| Hrochoroh Profil |
#5 · Zasláno: 31. 8. 2013, 20:40:57
Aha, netušil jsem, že by to mohl být takový problém. Tohle řešení se mi zdá komplikované. V nejhorším to dám do tabulky, ale ještě se nevzdávám naděje, že se objeví třeba nějaký jiný nápad.
Každopádně díky za snahu. |
||
| Plaváček Profil |
#6 · Zasláno: 1. 9. 2013, 09:11:53
Hrochoroh:
Bez použití tabulky lze upravit třeba tohle řešení: http://klient.plavacek.net/centrovani.html. Podmínkou správného fungování je předem známá pevná výška jednotlivých (floatovaných) DIVů, což by u obrázků neměl být problém. |
||
| Hrochoroh Profil |
#7 · Zasláno: 1. 9. 2013, 11:27:33
Díky moc za nápad! Pevná výška (i šířka) není problém - je to čtverec do kterého umisťuju náhledy fotek (obdélníky navýšku a našířku)
Tohle vypadá skoro použitelně, akorát se mi obrázky (náhledy) řadí jen pod sebe a já je neumím donutit, aby se řadily vedle sebe a navíc byly mezi boxíky mezerky (pokud možno stejné mezi jednotlivými boxíky na řádce a pak i mezi řádky boxíků). |
||
| Plaváček Profil |
Hrochoroh:
Aha, počkat, float nepůjde. Juknu na to. |
||
| Hrochoroh Profil |
#9 · Zasláno: 2. 9. 2013, 10:55:46
Plaváček:
ok, moc děkuju a těším se. |
||
| Plaváček Profil |
#10 · Zasláno: 2. 9. 2013, 11:02:32
Hrochoroh:
Tak třeba takhle: http://klient.plavacek.net/centrovani1.html. Trošku si zaDIVujeme, ale řešení bude funkční od IE 6 nahoru. Rozměry si uprav k obrazu svému. |
||
| Hrochoroh Profil |
#11 · Zasláno: 2. 9. 2013, 11:21:11
To vypadá velmi nadějně, večer na to kouknu, vyzkouším a dám vědět.
Zatím moc děkuju. |
||
| Hrochoroh Profil |
#12 · Zasláno: 2. 9. 2013, 19:03:06
Plaváček:
Tak hlásím, že je to super a vše funguje podle mých představ. Moc moc děkuju! Jen se u mně stalo to, že po vložení kódu (styly jsem dal do CSS) se mi vše posunulo o fous nahoru (Náhledy v boxu nejsou zarovnány horizontálně úplně přesně na střed, ale o fous nahoru a text pod náhledy v patičce taky poskočil o kousek nahoru). U tebe je to zarovnaný přesně, takže problém je někde u mně, ale zatím jsem nepřišel na to, kde. Budu pátrat. Ještě jednou díky. |
||
| Plaváček Profil |
#13 · Zasláno: 3. 9. 2013, 07:49:11
Hrochoroh:
No, to už by chtělo spíš živou ukázku ( Povídání o živých ukázkách) |
||
| Hrochoroh Profil |
#14 · Zasláno: 3. 9. 2013, 16:21:32
Plaváček:
Zatím to mám ve velmi syrovém stavu, než abych to někam nahrával, zkusím na to přijít, abych tě neokrádal o čas, už takhle jsi mi moc pomohl ;-) Když tak bych se ozval později. Díky |
||
|
Časová prodleva: 11 let
|
|||
0