| Autor | Zpráva | ||
|---|---|---|---|
| Dano_V Profil * |
#1 · Zasláno: 23. 8. 2014, 22:34:22
Je známi ten efekt, keď obsah nejakých stránok sa načíta do inej stránky pomocou iframe. Ten obsah iframe sa dá s vhodnými prepínačmi aj meniť. Videl som to ale na jednej stránke, že ten efekt sa dá dosiahnuť aj s CSS, ale neviem ako. Mám síce jednu "Múdru knížku" s CSS, ale som tam na riešenie tohto problému nenarazil. Je ale možné aj to, že iba ja nie som taký chápavý, že by som tomu porozumel bez vysvetlenia. Tu napíšem tri jednoduché tablá, ktoré by som potreboval ukázať na stránke po jednom na tom istom mieste a prepínať ich medzi sebou nejakým prepínačom (linkom).
<table width="200" height="40" border="1"><tr><td width="50%">Ovocie</td><td>Jablko</td></tr></table> <br> <table width="200" height="40" border="1"><tr><td width="50%">Ovocie</td><td>Hruška</td></tr></table> <br> <table width="200" height="40" border="1"><tr><td width="50%">Ovocie</td><td>Banán</td></tr></table> Viem, že by sa dali tieto tablá rozmiestniť každé do samostatnej html stránky a tak ich zavolať do iframe, ale pomocou CSS sa mi to pozdáva viac. Mohol by mi s tým niekto pomôcť? |
||
| jefitto44 Profil |
#2 · Zasláno: 25. 8. 2014, 09:17:15
CSS slúži na vzhľad jednotlivých elementov, nie na ich umiestňovanie... skorej chceš asi niečo také ?
Skrývané záložky pomocí DHTML |
||
| Tomáš123 Profil |
#3 · Zasláno: 25. 8. 2014, 10:28:33
Dano_V:
„Ten obsah iframe sa dá s vhodnými prepínačmi aj meniť.“ Tvoj problém sa dá vyriešiť aj bez akýchkoľvek (i)frame. „Videl som to ale na jednej stránke, že ten efekt sa dá dosiahnuť aj s CSS, ale neviem ako.“ Napríklad takto jefitto44: „CSS slúži na vzhľad jednotlivých elementov, nie na ich umiestňovanie... skorej chceš asi niečo také ?“ "Skorej" na definovanie vzhľadu, ale takisto aj ich umiestňovanie ( position, margin). Za oznamovacími vetami sa spravidla píše bodka (bez medzery) :-).
|
||
| Dano_V Profil * |
#4 · Zasláno: 25. 8. 2014, 11:49:02
Odpoveď pre jefitto44
V skutočnosti môj problém rieši aj táto verzia, a keby som nemal iné, určite to použijem, ale toto je riešenie s javaskriptom. Odpoveď pre Tomáš123 Toto je trefa do čierneho. Presne toto som si myslel. Ďakujem vám obom za rady |
||
| Bubák Profil |
#5 · Zasláno: 25. 8. 2014, 13:40:27
Dano_V:
„ale toto je riešenie s javaskriptom“ To by ani tak nevadilo, spíše vadí, že jde o nepřístupné řešení, bez JS se je skrytému obsahu nelze dostat. Srozumitelný návod, jak to řešit, je třebas na http://jecas.cz/zobrazit-skryt#no-js, návštěvníci s vypnutým JS pak uvidí veškerý obsah. |
||
| Dano_V Profil * |
#6 · Zasláno: 25. 8. 2014, 21:46:05
Bubák:
Beriem to na vedomie Tomáš123: Ten CSS mi dobre funguje s jedným problémom. Keď stránka je dlhšia, tak to funguje ako bežná kotva, teda označený bod mi vytiahne k hornému okraju monitora a s tým zároveň vytiahne aj prepínacie linky mimo obrazovku. Ako by sa to dalo nastaviť, aby sa to netýkalo celej stránky, ale iba vyhradeného priestoru. Skúsil som vytvoriť box, ale ma to neposlúchlo. Nejakým spôsobom to priviazať nie k hornému okraju, ale k hornému bodu boxu. |
||
| Tomáš123 Profil |
#7 · Zasláno: 25. 8. 2014, 22:49:10
Dano_V:
„Ako by sa to dalo nastaviť, aby sa to netýkalo celej stránky, ale iba vyhradeného priestoru.“ Dalo by sa to vyriešiť napríklad takto. Menu je fixne poziciované, aby neodlietavalo, pridaný padding-top, aby kotvy mierili správne, a odkazovali na začiatok tabuľky (nie stred) a celý obsah je poziciovaný absolútne, aby sa vyrovnal s nastaveným padding-om, v situácii, kedy kotva ešte neodrolovala na požadovanú položku.
|
||
| Dano_V Profil * |
#8 · Zasláno: 26. 8. 2014, 00:34:56
Tomáš123:
Žiaľ, ani toto nefunguje dobre, lebo fixované linky ostávajú pevne prilepené na stanovenom mieste. Keď posuniem obsah strany hore, alebo dole, linky sa nepohnú, lebo sú fixované, ale tabulky sú pozicované absolútne, preto sa posúvajú so stránkou. Teda každý ide svojou cestou. A keď sú tabulky hoci kde rozhádzané, keď kliknem na niektorý link, tabulky priletia na svoje absolútne miesto, aj so stránkou. Rozmýšľam, či by sa to nedalo viazať na niektorý ID, ako som to videl v Javaskripte pri vysúvaní bublinky. Potom nezáleží na tom, kedy ako je obsah stránky hore, alebo dole, ten celok je stále spolu. Odkazy s tabulkami. |
||
| Dano_V Profil * |
#9 · Zasláno: 26. 8. 2014, 02:31:54
Tomáš123:
Tak som nato prišiel. position: fixed nie je oporný bod. Ale position: relative ano. Tak som oba positiony nastavil na relative. Aj v menu, aj v obale. V tomto prípade všetky miery, teda top aj margin sa opierajú o koniec predošlého riadku, alebo predošlého bloku. A pri prepínaní tabuliek odkazom sa zastaví na nastavenej vzdialenosti od predošlého bloku a nie od horného okraja monitora. Ďakujem za pomoc, toto už funguje dobre |
||
| Dano_V Profil * |
#10 · Zasláno: 28. 8. 2014, 04:16:55
Zistil som ale, že to funguje dobre iba v IE. V ostatných šmejdovejších prehliadačoch to nefunguje. Ani tá ukážka z [#7] Tomáš123 napríklad v Opere neviem z akého dôvodu, ale prvá položka nefunguje. Takže v mojom prípade musel som sa rozlúčiť s positionmi a používať iba margin-top, margin-bottom, padding-top a padding-bottom. Kvôli positionom prestali fungovať odkazi.
Nedá mi tu nespomenúť tú debatu, ktorú som tu niekde na stránkach čítal, aký na figu prehliadač je IE, a aké dobré sú tie ostatné. Ja mám takú skúsenosť, (aj v tomto prípade) že to, čo spravím v IE, nie je isté, že bude fungovať aj v ostatných prehliadačoch. Ale to, čo spravím dajme tomu v Opere alebo vo Firefoxe, to v IE zaručene bude fungovať. To, čo vedia ostatné prehliadače, to IE vie, ale to, čo vie IE, ostatné prehliadače nevedia. Keby niekto chcel oponovať, nech si prezrie napríklad stránku http://vargad.net, na ktorej sú javaskriptové bublinky, ako ich prezentuje IE, a ako ich prezentujú ostatné, ktoré ja nazývam šmejdovejšími. Tvrdím, že IE je špička, a ostatné sú iba napodobeniny. |
||
| Čumil Profil * |
#11 · Zasláno: 28. 8. 2014, 07:06:00
Dano_V:
IE špička? No, proti gustu žádný dišputát. :-) PS: IE10 je na tom už o něco lépe, než předchozí verze, ale zkus si příště ověřit, jak to, co uděláš, funguje i v IE 9, 8 a 7. IE 6 pomalu neřeším. Tak až to vyzkoušíš pořádně tady, tak uvidíš tu "špičku". IE má pořád co dohánět do standardu a pořád potřebuje nějaké "spešl" ošetření. Prostě "výrobce" se nezapře. |
||
| Chamurappi Profil |
#12 · Zasláno: 28. 8. 2014, 15:32:56
Reaguji na Čumila:
„má pořád co dohánět do standardu“ Do jakého standardu? Žádný není, kousky specifikací létají ve vzduchoprázdnu, kde si každý z výrobců chytí či předefinuje to, co se mu zrovna zlíbí. Podobné zobrazení bublin, jako je na vargad.net, opravdu žádný jiný prohlížeč nezvládá. Přechodové filtry podporoval pouze Explorer a jako méně schopnou alternativu lze brát nanejvýš CSS vlastnost transition (která je, když už jsme u těch formalit, na rozdíl od přechodových filtrů patentovaná).
Prohlížečový flejm tu nebude pokračovat. Reaguji na Dana_V: „napríklad v Opere neviem z akého dôvodu, ale prvá položka nefunguje“ V jaké verzi? Mně ukázka Tomáše123 ve starší Opeře (i všude jinde) funguje. Hodila by se živá ukázka tvého pokusu, asi děláš něco špatně. „v mojom prípade musel som sa rozlúčiť s positionmi a používať iba margin-top, margin-bottom, padding-top a padding-bottom“ Bylo to pravděpodobně moudré rozloučení. Co nemusíš pozicovat, nepozicuj. „Ale to, čo spravím dajme tomu v Opere alebo vo Firefoxe, to v IE zaručene bude fungovať.“ U starších verzí bych na to rozhodně nespoléhal. Není dobrý nápad se při vývoji soustředit jen na jeden prohlížeč, je skoro jisté, že na nějaké rozdíly v zobrazení narazíš. Neznamená to, že jeden prohlížeč (a zrovna náhodou tvůj oblíbený) je lepší než druhý, znamená to, že ses zatím nenaučil dělat věci univerzálně. Autor stránky zachovávající neutrální postoj k prohlížečům (a k jejich různým nastavením) má nejlepší šance vyrobit dílo fungující bez potíží každému. |
||
| Dano_V Profil * |
#13 · Zasláno: 29. 8. 2014, 16:00:18
Chamurappi
K tej verzie Opery, tak je to 23.0.1522.77. A nemusím robiť nič zle, iba kliknem na tú ukážku, ktorá je pod slovíčkom "takto" v príspevku [#7] Tomáš123 Druhý a tretí spínač reagujú správne, ale jednotka neprepína ani z dvojky, ani z trojky. A tak isto sa chová aj Firefox, práve teraz som to skontroloval. Je pravdou, že keď som začínal, tak som sa sústredil na IE, až keď ma upozornili, že v iných prehliadačoch moje stránky sú rozhádzané, som začal svoju prácu kontrolovať a dolaďovať aj pre iné prehliadače. A práve tu som sa presvedčil o tom, čo som písal, že to čo funguje inde, v IE to fungovať bude určite. Že ako fungujú najnovšie IE, to nemôžem porovnávať, lebo používam osmičku, a v dohľadnej dobe ani neplánujem prejsť na novší. Predpokladám iba, že sú lepšie, ako predošlé. Isté ale je, že IE ukáže dobre stránku, aj keď je tam chyba, ale ostatné sú nato háklivejšie. V IE pracujem od verzie 5.5 a na dolaďovanie používam Firefox, Operu a Chrome. |
||
|
Časová prodleva: 10 let
|
|||
0