I'm Sorry... Sajnálom...

A "delphi program" nem tölthető le!
(átmeneti oldal hiba)

Bezár

I'm Sorry... Sajnálom...

A "css ötlet" nem tölthető le!
(átmeneti oldal hiba)

Bezár

I'm Sorry... Sajnálom...

A "php ötlet" nem tölthető le!
(átmeneti oldal hiba)

Bezár

Információk


Honlap infók:
Adatok
2006. 05. 21-től

Összes látogatás:

Mai látogatás:

Összes látogató:

Mai látogató:

Aktuális látogató:

Üdvözöllek!
(54.224.214.93)
Oldal módosítva:
2012. 10. 17. 12:07.
Buzsák





Az alább ismertetésre kerülő ötletek(megoldások) jelen honlap készítéséhez szükséges hosszas tanulás, kínlódás, kompromisszum-keresés eredményeként születtek meg. Közel másfél hónap alatt sikerült megoldanom, hogy az addig táblázatos szerkezetű oldalt átalakítsam a "CSS"-szellemében. A "menők" most bíztosan nevetnek ezen, de nekem ez komoly feladat volt és tudom, hogy soha nem jutok el addig a kijelentésig -ISMEREM A CSS REJTELMEIT,- de jó érzés látni a munka eredményét. A megoldásokban fellelhető hibákért, nem egészen korrekt megoldásokért elnézést kérek, de az volt a célom, hogy a két leggyakrabban használatos böngészőn(FF, IE, OPERA) közel azonosan nézzen ki egy-egy oldal. Várom mindenki kritikáját, ötletét az alábbiakkal vagy más témákkal kapcsolatban....

FTabber

Fix méretű ("füles jószág") JS nélkül, azaz "FTabber"

A célom a következő volt az "FTabber" elkészítése során:
  • -  Egy "tartalom-formai elem" létrehozása, amelyben adott témakörhöz tartozó különböző tartalmi elemeket egy viszonylag behatárolt területen, áttekinthetően és választhatóan lehessen az oldalon megjeleníteni.
  • -  Mivel szerény ismereteim szerint ez legegyszerűbben egy "füles jószággal" azaz tabber-elemmel lehetséges és a JS-ben még nem vagyok eléggé járatos, ezért CSS-s megoldást választottam.
  • -  Utoljára, de nem utolsó sorban az általam használt böngészők mindegyikén(IE,FF,OPERA) közel azonosan működjön.
Az interneten átnézett rengeteg ötlet, megoldás tanulságait leszűrve az "UL/LI" HTML elempárt vettem alapul a "textformázó-DIV" doboz a "háttér-DIV" dobozban módszer alkalmazása mellett. Az "A" hiperhivatkozás fix szélességű/magasságú és háttere egy kép-fájl, amely egyben a fülek(max 6) hátterét is adja. Ez a kép kétszer olyan magas mint a fül(erről később..).

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <!-- html-kód -->
  2.  
  3. <div class="ftabber-bg">
  4.  <div class="ftabber">
  5.   <ul class="tema">
  6.    <li class="tag"><a href="#nogo" class="csoport">téma 1</a>
  7. ..itt az aktuális tartalom...
  8.    </li>
  9.    <li class="tag"><a href="#nogo" class="csoport">téma 2</a>
  10. ..itt az aktuális tartalom...
  11.    </li>
  12. ..igy tovább max hatszor...
  13.   </ul>
  14.   <br class="clear" />
  15.  </div>
  16. </div>
  17.  
  18. <!-- end -->
  19.  
  20. <!-- css-kód -->
  21.  
  22. /* sztring-tabber keret-doboz: pozició */
  23. .ftabber-bg
  24. {
  25.   margin: 0px auto 0px auto; border-style: none; padding: 0px 0px 0px 0px;
  26.   position:relative; width:500px; height: 390px;
  27. }
  28. /* sztring-tabber keret-doboz: háttér */
  29. .ftabber
  30. {
  31.   margin: 0px auto 0px auto; border-style: none; padding: 0px 0px 0px 0px;
  32.   background-color: transparent; position:relative; width:480px; height:360px;
  33. }
  34. /* sztring-tabber doboz */
  35. .ftabber ul.tema {
  36.   margin: 0px 0px 0px 0px; border-style: none; padding: 0px 0px 0px 0px;
  37.   display:block; list-style:none; width:480px; height:360px; position:relative;
  38.   z-index:10;
  39. }
  40. /* sztring-tabber fül */
  41. .ftabber ul.tema li.tag
  42. {
  43.   margin: 0px 0px 0px 0px; border-style: none; padding: 0px 0px 0px 0px;
  44.   display:inline; background-color: transparent;
  45.   width:80px;
  46.   height:20px; float:left;
  47. }
  48. /* sztring-tabber fül/szövegdoboz: (csoport-megnevezésnek) */
  49. .ftabber ul.tema li.tag a.csoport
  50. {
  51.   margin: 0px 0px 0px 0px; border-style: none; padding: 0px 0px 0px 0px;
  52.   display:block; background-color: transparent;
  53.   background-image: url('../kepek/ftabber-tab.gif');
  54.   background-repeat: no-repeat; background-attachment: scroll;
  55.   background-position:0px 0px;
  56.   width:80px;
  57.   height:20px;
  58.   font-size:11px; line-height:13px; text-align:center; color:#2d200f; /* sötét */
  59.   text-decoration:none;
  60. }
  61.  
  62. <!-- end -->
  63.  

Minden LI listaelemben elhelyeztem három balra float-olt Div elemet(fej, torzs, lab), a következő célból: "fej" -> fülekhez illeszkedő háttérkép(két class-lérték), "torzs" -> tartalmi keret, "lab" -> változó háttérkép. Előzőleg a DIV-eket "eltüntettem". Mivel JS nélkül nem tudtam megoldani, hogy az oldal megjelenésekor valamelyik fül aktív legyen egy "nyitó ful/fej/lab" kialakítását választottam. Ez a -felhasználás során passzív- fül töltődik be az oldallal.

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <!-- html-kód -->
  2.  
  3.           <div class="fej fc">
  4.           </div>
  5.           <div class="torzs">
  6. ..itt az aktuális tartalom...
  7.           </div>
  8.           <div class="lab">
  9.           </div>
  10.  
  11. <!-- end -->
  12.  
  13. <!-- css-kód -->
  14.  
  15. /* tabber-test: elrejtés */
  16. .ftabber ul.tema li.tag div
  17. {  
  18.   display: none;
  19. }
  20. /* tabber-test/fejléc: nyitólap megjelenítés, formázás */
  21. .ftabber ul.tema li.tag a.csoport + div.fej
  22. {
  23.   position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  24.   display: block; left: 0px; top: 20px; width: 480px; height: 10px; z-index: -1;
  25.   background: url('../kepek/ftabber-fejlec-kezd.gif') top left no-repeat;
  26. }
  27. /* IE */
  28. .ftabber ul.tema li.tag a.csoport div.fej
  29. {
  30.   position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  31.   display: block; left: 0px; top: 20px; width: 480px; height: 10px; z-index: -1;
  32.   background: url('../kepek/ftabber-fejlec-kezd.gif') top left no-repeat;
  33. }
  34.  
  35. /* tabber-test/törzs: nyitólap megjelenítés, formázás */
  36. .ftabber ul.tema li.tag a.csoport + div.fej + div.torzs
  37. {
  38.   display: block; position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
  39.   border-style: none; left: 0px; top: 30px; width: 480px; height:340px; z-index:-1;
  40.   background-color: transparent; background-image: url('../kepek/ftabber-torzs-kezd.gif');
  41.   background-repeat: no-repeat; background-attachment: scroll; background-position:0px 0px;
  42.   text-align: left;  
  43.   color: #2D200F;                   /* sötét */
  44.   font-weight:normal;
  45.   font-size:11px;
  46.   line-height:15px;
  47.   overflow:hidden;
  48. }
  49. /* IE */
  50. .ftabber ul.tema li.tag a.csoport div.torzs
  51. {
  52.   display: block; position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
  53.   border-style: none; left: 0px; top: 30px; width: 480px; height:340px; z-index:-1;
  54.   background-color: transparent; background-image: url('../kepek/ftabber-torzs-kezd.gif');
  55.   background-repeat: no-repeat; background-attachment: scroll; background-position:0px 0px;
  56.   text-align: left;  
  57.   color: #2D200F;                   /* sötét */
  58.   font-weight:normal;
  59.   font-size:11px;
  60.   line-height:15px;
  61.   overflow:hidden;
  62. }
  63. /* tabber-lábléc: nyitólap megjelenítés, formázás */
  64. .ftabber ul.tema li.tag a.csoport + div.fej + div.torzs + div.lab
  65. {
  66.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  67.   left: 0px; top: 370px; width: 480px; height: 10px; z-index: -1;
  68.   background: url('../kepek/ftabber-lablec-kezd.gif') top left no-repeat;
  69. }
  70. /* IE */
  71. .ftabber ul.tema li.tag a.csoport div.lab
  72. {
  73.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  74.   left: 0px; top: 370px; width: 480px; height: 10px; z-index: -1;
  75.   background: url('../kepek/ftabber-lablec-kezd.gif') top left no-repeat;
  76. }
  77.  
  78. <!-- end -->
  79.  

Az előző CSS-kódban már látszik a különböző böngészőknek megfelelés igyekezete.
Következő lépésként készítettem egy-két alapvető tartalmi bekezdés-formázást, és ezen P elemekre "visibility:hidden" tulajdonságot állítottam be.

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <!-- html-kód -->
  2.  
  3.             <p class="cim">
  4.               téma címe  
  5.             </p>
  6.             <p class="kep-left">
  7.               <img src="téma.gif" width="48" height="48" title="cimke" />
  8.             </p>
  9.             <p class="egyseg-left">
  10.               sima tartalom
  11.             </p>
  12.             <p class="egyseg-center">
  13.             </p>
  14. ..stb...
  15.  
  16. <!-- end -->
  17.  
  18. <!-- css-kód -->
  19.  
  20. /* TARTALMI FORMÁZÁSOK */
  21. /* cim formázás */
  22. .ftabber ul.tema li.tag p.cim
  23. {
  24.   margin: 0px 0px 0px 0px; border-style: none; padding: 0px 0px 0px 0px;
  25.   font-size: 12px; line-height: 18px; font-weight:normal; text-align: center;
  26.   font-weight: bold; color: #2d200f;                   /* sötét */
  27.   visibility:hidden;
  28. }
  29. /* egység formázás */
  30. .ftabber ul.tema li.tag p.egyseg-left
  31. {
  32.   margin: 0px 0px 0px 0px; border-style: none; padding: 5px 0px 5px 0px;
  33.   color: #2D200F;
  34.   font-weight:normal; font-size:11px; text-align:left; line-height:15px;
  35.   visibility:hidden;
  36. }
  37. .ftabber ul.tema li.tag p.egyseg-center
  38. {
  39.   margin: 0px 0px 0px 0px; border-style: none; padding: 5px 0px 5px 0px;
  40.   color: #2D200F;                   /* sötét */
  41.   font-weight:normal; font-size:11px; text-align:center; line-height:15px;
  42.   visibility:hidden;
  43. }
  44. .ftabber ul.tema li.tag p.egyseg-right
  45. {
  46.   margin: 0px 0px 0px 0px; border-style: none; padding: 5px 0px 5px 0px;
  47.   color: #2D200F;                   /* sötét */
  48.   font-weight:normal; font-size:11px; text-align:right; line-height:15px;
  49.   visibility:hidden;
  50. }
  51. /* kép formázás */
  52. .ftabber ul.tema li.tag p.kep-left
  53. {
  54.   margin: 0px 0px 0px 0px; border-style: none; padding: 10px 10px 10px 20px;
  55.   float: left;
  56.   visibility:hidden;
  57. }
  58. .ftabber ul.tema li.tag p.kep-right
  59. {
  60.   margin: 0px 0px 0px 0px; border-style: none; padding: 10px 20px 10px 10px;
  61.   float: right;
  62.   visibility:hidden;
  63. }
  64.  
  65. <!-- end -->
  66.  

Ezután már csak az aktuálisan kiválasztott fül tartalmának stabil megjelenítése volt hátra. Ez sem lett túl egyszerű a böngészők(programozóik ?..) különböző, más-más CSS-értelmezése miatt(focus-active/elem, gyermek/szomszédos szelektorok, link és dinamikus látszólagos osztályok stb..).
Sajnos egyelőre az OPERA sima kattintásra nem jeleníti meg az aktuális fület, csak akkor ha az egeret lenyomott gombnál egy kicsit meghúzom, azaz látszik a kijelölés!(A 10-es verziótól már működik)
A fix magasságú törzs megjelenítésénél a függőleges gördítősáv automatikusan megjelenik ha a tartalom megköveteli. Ezt a fix magasságot lehet változtatni igény szerint(Figyelem: az összes befoglaló elemnél: ftabber-bg, ftabber, ul meg kell növelni!).
Itt írom le, hogy a fülek hátterét adó kép maggassága azért dupla, hogy a kép-pozició "felhúzásával" különböző színű lehessen az aktív és az inaktív fül.

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <!-- css-kód -->
  2.  
  3. /* INNENTŐL: TABBER-FÜL KIJELÖLT */
  4. /* sztring-tabber fül */
  5. .ftabber ul.tema li.tag a.csoport:active,
  6. .ftabber ul.tema li.tag a.csoport:focus
  7. {
  8.   margin: 0px 0px 0px 0px; border-style:none; padding: 0px 0px 0px 0px;
  9.   background-position:0px -20px;
  10.   width:80px;
  11.   height:20px; cursor: default;    
  12.   color:#FFEBA9;                   /* eltérő:okker-sárga #FFEBA9 */
  13. }
  14. /* IE */
  15. .ftabber ul.tema li.tag a.csoport:active
  16. {
  17.   margin: 0px 0px 0px 0px; border-style:none; padding: 0px 0px 0px 0px;
  18.   background-position:0px -20px;
  19.   width:80px;
  20.   height:20px; cursor: default;    
  21.   color:#FFEBA9;                 /* eltérő:okker-sárga #FFEBA9 */
  22. }
  23.  
  24. /* tabber-test/fejléc: megjelenítés, formázás */
  25. /* 1 */
  26. .ftabber ul.tema li.tag a.csoport:active + div.fa,
  27. .ftabber ul.tema li.tag a.csoport:focus + div.fa
  28. {
  29.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  30.   left: 0px; top: 20px; width: 480px; height: 10px; z-index:10;
  31.   background: url('../kepek/ftabber-fejlec1.gif') top left no-repeat;
  32. }
  33. /* IE */
  34. .ftabber ul.tema li.tag a.csoport:active div.fa
  35. {
  36.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  37.   left: 0px; top: 20px; width: 480px; height: 10px; z-index:10;
  38.   background: url('../kepek/ftabber-fejlec1.gif') top left no-repeat;
  39. }
  40. /* 2 */
  41. .ftabber ul.tema li.tag a.csoport:active + div.fb,
  42. .ftabber ul.tema li.tag a.csoport:focus + div.fb
  43. {
  44.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  45.   left: 0px; top: 20px; width: 480px; height: 10px; z-index:10;
  46.   background: url('../kepek/ftabber-fejlec2.gif') top left no-repeat;
  47. }
  48. /* IE */
  49. .ftabber ul.tema li.tag a.csoport:active div.fb
  50. {
  51.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  52.   left: 0px; top: 20px; width: 480px; height: 10px; z-index:10;
  53.   background: url('../kepek/ftabber-fejlec2.gif') top left no-repeat;
  54. }
  55.  
  56. /* 3 */
  57. .ftabber ul.tema li.tag a.csoport:active + div.fc,
  58. .ftabber ul.tema li.tag a.csoport:focus + div.fc
  59. {
  60.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  61.   left: 0px; top: 20px; width: 480px; height: 10px; z-index:10;
  62.   background: url('../kepek/ftabber-fejlec3.gif') top left no-repeat;
  63. }
  64. /* IE */
  65. .ftabber ul.tema li.tag a.csoport:active div.fc
  66. {
  67.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  68.   left: 0px; top: 20px; width: 480px; height: 10px; z-index:10;
  69.   background: url('../kepek/ftabber-fejlec3.gif') top left no-repeat;
  70. }
  71. /* 4 */
  72. .ftabber ul.tema li.tag a.csoport:active + div.fd,
  73. .ftabber ul.tema li.tag a.csoport:focus + div.fd
  74. {
  75.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  76.   left: 0px; top: 20px; width: 480px; height: 10px; z-index:10;
  77.   background: url('../kepek/ftabber-fejlec4.gif') top left no-repeat;
  78. }
  79. /* IE */
  80. .ftabber ul.tema li.tag a.csoport:active div.fd
  81. {
  82.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  83.   left: 0px; top: 20px; width: 480px; height: 10px; z-index:10;
  84.   background: url('../kepek/ftabber-fejlec4.gif') top left no-repeat;
  85. }
  86. /* 5 */
  87. .ftabber ul.tema li.tag a.csoport:active + div.fe,
  88. .ftabber ul.tema li.tag a.csoport:focus + div.fe
  89. {
  90.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  91.   left: 0px; top: 20px; width: 480px; height: 10px; z-index:10;
  92.   background: url('../kepek/ftabber-fejlec5.gif') top left no-repeat;
  93. }
  94. /* IE */
  95. .ftabber ul.tema li.tag a.csoport:active div.fe
  96. {
  97.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  98.   left: 0px; top: 20px; width: 480px; height: 10px; z-index:10;
  99.   background: url('../kepek/ftabber-fejlec5.gif') top left no-repeat;
  100. }
  101. /* 6 */
  102. .ftabber ul.tema li.tag a.csoport:active + div.ff,
  103. .ftabber ul.tema li.tag a.csoport:focus + div.ff
  104. {
  105.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  106.   left: 0px; top: 20px; width: 480px; height: 10px; z-index:10;
  107.   background: url('../kepek/ftabber-fejlec6.gif') top left no-repeat;
  108. }
  109. /* IE */
  110. .ftabber ul.tema li.tag a.csoport:active div.ff
  111. {
  112.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  113.   left: 0px; top: 20px; width: 480px; height: 10px; z-index:10;
  114.   background: url('../kepek/ftabber-fejlec6.gif') top left no-repeat;
  115. }
  116. /* tabber-test/törzs: megjelenítés, formázás */
  117. .ftabber ul.tema li.tag a.csoport:focus + div.fej + div.torzs,
  118. .ftabber ul.tema li.tag a.csoport:active + div.fej + div.torzs
  119. {
  120.   display: block; position: absolute; padding: 5px 15px 5px 15px; margin: 0px 0px 0px 0px;
  121.   left: 0px; top: 30px; width: 450px; height: 330px; z-index:10;
  122.   background: url('../kepek/ftabber-torzs.gif') top left repeat-y;
  123.   text-align: left;  
  124.   color: #2D200F;                   /* sötét */
  125.   font-weight:normal;
  126.   font-size:11px;
  127.   line-height:15px;
  128.         overflow: auto;
  129. }
  130. /* IE */
  131. .ftabber ul.tema li.tag a.csoport:active div.torzs
  132. {
  133.   display: block; position: absolute; padding: 5px 15px 5px 15px; margin: 0px 0px 0px 0px;
  134.   left: 0px; top: 30px; width: 480px; height: 340px; z-index:10;
  135.   background: url('../kepek/ftabber-torzs.gif') top left repeat-y;
  136.   text-align: left;  
  137.   color: #2D200F;                   /* sötét */
  138.   font-weight:normal;
  139.   font-size:11px;
  140.   line-height:15px;
  141.         overflow: auto;
  142. }
  143. /* tabber-lábléc: megjelenítés, formázás */
  144. .ftabber ul.tema li.tag a.csoport:active + div.fej +div.torzs + div.lab,
  145. .ftabber ul.tema li.tag a.csoport:focus + div.fej +div.torzs + div.lab
  146. {
  147.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  148.   left: 0px; top: 370px; width: 480px; height: 10px; z-index:10;
  149.   background: url('../kepek/ftabber-lablec.gif') top left no-repeat;
  150. }
  151. /* IE */
  152. .ftabber ul.tema li.tag a.csoport:active div.lab
  153. {
  154.   display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  155.   left: 0px; top: 370px; width: 480px; height: 10px; z-index:10;
  156.   background: url('../kepek/ftabber-lablec.gif') top left no-repeat;
  157. }
  158. /* választott tartalom megjelenítés */
  159. .ftabber ul.tema li.tag a.csoport:focus + div.fej + div.torzs p.cim,
  160. .ftabber ul.tema li.tag a.csoport:active + div.fej + div.torzs p.cim,
  161. .ftabber ul.tema li.tag a.csoport:focus + div.fej + div.torzs p.kep-left,
  162. .ftabber ul.tema li.tag a.csoport:active + div.fej + div.torzs p.kep-left,
  163. .ftabber ul.tema li.tag a.csoport:focus + div.fej + div.torzs p.kep-right,
  164. .ftabber ul.tema li.tag a.csoport:active + div.fej + div.torzs p.kep-right,
  165. .ftabber ul.tema li.tag a.csoport:focus + div.fej + div.torzs p.egyseg-left,
  166. .ftabber ul.tema li.tag a.csoport:active + div.fej + div.torzs p.egyseg-left,
  167. .ftabber ul.tema li.tag a.csoport:focus + div.fej + div.torzs p.egyseg-center,
  168. .ftabber ul.tema li.tag a.csoport:active + div.fej + div.torzs p.egyseg-center,
  169. .ftabber ul.tema li.tag a.csoport:focus + div.fej + div.torzs p.egyseg-right,
  170. .ftabber ul.tema li.tag a.csoport:active + div.fej + div.torzs p.egyseg-right
  171. {
  172.   visibility:visible;
  173. }
  174. /* IE */
  175. .ftabber ul.tema li.tag a.csoport:active p.cim,
  176. .ftabber ul.tema li.tag a.csoport:active p.kep-left,
  177. .ftabber ul.tema li.tag a.csoport:active p.kep-right,
  178. .ftabber ul.tema li.tag a.csoport:active p.egyseg-left,
  179. .ftabber ul.tema li.tag a.csoport:active p.egyseg-center,
  180. .ftabber ul.tema li.tag a.csoport:active p.egyseg-right
  181. {
  182.   visibility:visible;
  183. }
  184. /* float törlés  */
  185. .clear {clear:both; height:0; line-height:0; overflow:hidden;}
  186.  
  187. <!-- end -->
  188.  

Egy apróság az ismertető végére:
Azért, hogy az IE is jól kezelje a "dolgokat" egy az interneten talált ötlet alapján(feltételes megjegyzés) alkalmaztam(lásd lejjebb a forráskódban).

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <!-- eredeti html kód-rész -->
  2.   <li class="tag"><a href="#nogo" class="csoport">Működés
  3.  
  4. <!-- IE-pótlék -->
  5.   <!--[if IE 7]><!-->
  6.  
  7. <!-- eredeti html kód-rész -->
  8.   </a>
  9.  
  10. <!-- IE-pótlék -->
  11.   <!--<![endif]-->
  12.   <!--[if lte IE 6]>
  13.     <table><tr><td>
  14.   <![endif]-->
  15.  
  16. <!-- eredeti html kód-rész -->
  17.   "LI" aktuális tartalma..........
  18.  
  19.  
  20. <!-- IE-pótlék -->
  21.   <!--[if lte IE 6]>
  22.     </td></tr></table></a>
  23.   <![endif]-->
  24.  
  25. <!-- eredeti html kód-rész -->
  26.   </li>
  27.  

Végszóként annyit, hogy a forráskódot bárki használhatja korlátozás nélkül, csak annyit kérek ha lehet helyezzen el a következő hivatkozást a felhasználás helyénél.(family-team.emszinet.hu)

A használatból eredő bárminemű kárért felelősséget nem vállalok!!

Kívánok minden honlapomat olvasónak sok szerencsét a forráskód sikeres felhasználásához!

A komplett forráskód a Programozás/Css/Letöltések oldalról képfájlokkal együtt letölthető.

Az "FTabber" működés közben megtekinthető az FTabber demo-ban.

Várom az észrevételeket, javaslatokat az oldalamon található "Üzenetküldés" vagy "Vendégkönyv" felhasználásával.

FGallery

Fix méretű ("fénykép album") JS nélkül, azaz "FGallery"

A célom a következő volt az "FGallery" elkészítése során:
  • -  Egy olyan egyéni felület elkészítése, amely alkalmas a lakóhelyemről, a mindennapi életről -jobbára mobiltelefonnal készült- képek esztétikus, csoportosított bemutatására.
  • -  Egy-egy téma-csoporttonkénti képállományt külön fájlként lehessen az elkészült tartalom-formai elemhez hozzáadni vagy elvenni.
  • -  Ne kelljen az oldalt gördíteni a képek folyamatos megtekintése során, de mégis áttekinthető legyen a teljes kép-tartalom.
A megoldás során az FTabber elkészítése során szerzett tapasztalatokból és az interneten található rengeteg megoldás áttekintéséből indultam ki. Az "egy kép az egész háttérfelület" módszert választva pixelről-pixelre terveztem meg a háttérképet, és ehhez illesztettem a CSS-fájl elkészítése során a különböző méretű kép és szöveg-dobozokat.
A képcsoportok/képek elhatárolást kettő "UL/LI" HTML elempár egymásba ágyazásával oldottam meg, melyből a második "UL"-t induláskor elrejtem(2x12 db diaképnek). Első lépésként még egy induló "nagy-képet" és egy induló "kisérő szöveget" is definiáltam.

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <!-- html-kód -->
  2.  
  3.       <div class="fgalery-bg">
  4.         <div class="fgalery">
  5.           <img class="indulo" src="albumok/csoport-x/kep-x.jpg" title="Nyitó kép" alt="" />
  6.           <b class="indulo">Állj rá egyik az fülre és klikk a dia-képekre!</b>
  7.           <ul class="tema">
  8.             <li><a href="#nogo" class="csoport">Csoport1</a>
  9.               <em></em>
  10.               <ul>
  11. max 24 db mikro-kép doboza
  12.               </ul>
  13.               <br class="clear">
  14.             </li>
  15.             <li><a href="#nogo" class="csoport">Csoport2</a>
  16.               <em></em>
  17.               <ul>
  18. max 24 db mikro-kép doboza
  19.               </ul>
  20.               <br class="clear">
  21.             </li>
  22.  
  23. max 8 csoport..
  24.  
  25.           </ul>
  26.           <br class="clear" />
  27.         </div>
  28.       </div>
  29.  
  30. <!-- end -->
  31.  
  32. <!-- css-kód -->
  33.  
  34. /* csoport felirat alapformázás */
  35. a.csoport:link {
  36.         color: #2d200f;                  /* sötét */
  37. }
  38. a.csoport:visited {
  39.         color: #2d200f;                  /* sötét */
  40. }
  41.  
  42. a.csoport:focus {
  43.     color:#ffffff;                 /* fehér */
  44. }
  45. a.csoport:active {
  46.     color:#ffffff;                 /* fehér */
  47. }
  48. a.csoport:hover {
  49.     color:#ffffff;                 /* fehér */
  50. }
  51. /* album háttér, pozició */
  52. .fgalery-bg
  53. {
  54.   margin: 0px auto 0px auto;
  55.   border-style: none;
  56.   padding: 0px 0px 0px 0px;
  57.   background: url('../kepek/fgallery-bg.gif') no-repeat left top;
  58.   width:480px;
  59.   height:440px;
  60. }
  61. /* album doboz */
  62. .fgalery
  63. {
  64.   position:relative;
  65.   margin: 0px 0px 0px 0px;
  66.   border-style: none;
  67.   padding: 0px 0px 0px 0px;
  68.   text-align:left;
  69. }
  70. /* induló nagy-kép */
  71. img.indulo
  72. {
  73.   position:absolute;
  74.   left:14px;  /* left(9+1+3)+kép360+3+1=377  keret 10px-nél és 378px-nél */
  75.   top:14px;   /* top(9+1+3)+kép270+3+1=287   keret 10px-nél és 289px-nél */
  76.   width:360px;
  77.   height:270px;
  78.   z-index:0;
  79. }
  80. /* induló kisérő szöveg */
  81. b.indulo
  82. {
  83.   position:absolute;
  84.   width: 73px;
  85.   height: 234px;
  86.   top: 18px;
  87.   left: 394px;
  88.   color:#ffffff;                   /* fehér */
  89.   font-weight:normal;
  90.   font-size:10px;
  91.   text-align:center;
  92.   line-height:15px;
  93.   z-index:0;
  94. }
  95. /* tabber doboz */
  96. .fgalery ul.tema {
  97.   position:relative;
  98.   margin: 0px 0px 0px 0px;
  99.   padding: 300px 0px 0px 20px;
  100.   list-style:none;
  101.   width:440px;                   /* 8x55px=440px */
  102.   height:auto;
  103.   z-index:10;
  104. }
  105. /* tabber fül */
  106. .fgalery ul.tema li
  107. {
  108.   display:inline;
  109.   width:55px;
  110.   height:20px;
  111.   float:left;
  112. }
  113. /* tabber fül/szövegdoboz: (csoport-megnevezésnek) */
  114. .fgalery ul.tema li a.csoport
  115. {
  116.   display:block;
  117.   font-size:10px;
  118.   background:transparent;
  119.   width:55px;
  120.   height:20px;  
  121.   text-align:center;
  122.   line-height:18px;
  123.   text-decoration:none;
  124. }
  125. /* tabber fül/test-doboz (12x2 db kép részére) */
  126. .fgalery ul.tema li a + em + ul
  127. {
  128.   display:none;
  129. }
  130. /* IE */
  131. .fgalery ul.tema li a ul
  132. {
  133.   display:none;
  134. }
  135.  
  136. <!-- end -->
  137.  

Miután a PHP "include" függvényével beillesztettem a képcsoportok paramétereit tartalmazó fájlokat(lásd lent), következett a "ha valamelyik fül(képcsoport) kijelölt" feladat megoldása.
E feladat megoldásához tartozott: a mikro-képek létrehozása, formázása, megjelenítése és a kisérő szöveg ablakának újraformázása, tisztítása.

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <!-- html-kód -->
  2.  
  3. /* max 24 db mikro-kép paramétereit tartalmazó fájl betöltése: */
  4. <?php
  5.   //include "albumok/csoport-x.stf";
  6. ?>
  7. csoport-x.stf szerkezete:
  8. <li><a href="#nogo" class="vert"></a>
  9.   <div class="clean"><img src="albumok/csoport-x/kep1_v.jpg" alt="" /></div>
  10.   <b>Emlősök.</b>
  11. </li>
  12. <li><a href="#nogo" class="hor"></a>
  13.   <div class="clean"><img src="albumok/emlos/kep2_h.jpg" alt="" /></div>
  14.   <b>Emlősök.</b>
  15. </li>
  16. <li><a href="#nogo" class="vert"></a>
  17.   <div class="clean"><img src="albumok/emlos/kep3_v.jpg" alt="" /></div>
  18.   <b>Emlősök.</b>
  19. </li>
  20. stb...stb...
  21.  
  22. <!-- end -->
  23.  
  24. <!-- css-kód -->
  25.  
  26. /* INNENTŐL: TABBER-FÜL KIJELÖLT */
  27. /* tabber fül */
  28. .fgalery ul.tema li:hover a.csoport
  29. {
  30.   border:0px;
  31. }
  32. /* IE */
  33. .fgalery ul.tema li a.csoport:hover
  34. {
  35.   border:0px;
  36. }
  37. /* külső keret: megjelenítés */
  38. .fgalery ul.tema li:hover a + em
  39. {
  40.   display:block;
  41.   position:absolute;
  42.   border:1px solid #B78528;         /* eltérő: mustár */
  43.   left: 2px;
  44.   top: 2px;
  45.   width: 474px;
  46.   height: 424px;
  47.   z-index:-1;
  48. }
  49. /* IE */
  50. .fgalery ul.tema li a:hover em
  51. {
  52.   display:block;
  53.   position:absolute;
  54.   border:1px solid #B78528;         /* eltérő: mustár */
  55.   left: 2px;
  56.   top: 2px;
  57.   width: 474px;
  58.   height: 424px;
  59.   z-index:-1;
  60. }
  61. /* tabber test-doboz (6x4 db kép részére) */
  62. .fgalery ul.tema li:hover a + em + ul
  63. {
  64.   display:block;
  65.   position:absolute;
  66.   list-style:none;
  67.   margin: 0px 0px 0px 0px;
  68.   padding: 0px 0px 0px 3px;
  69.   left:20px;
  70.   top: 332px;    /* a terület közepére függőlegesen */
  71.   width: 436px;  /* 1db képsor:432px+3paddingleft+1korrekció */
  72.   height: 72px;  /* 1db képsor:36px  */
  73. }
  74. /* IE */
  75. .fgalery ul.tema li a:hover ul
  76. {
  77.   display:block;
  78.   position:absolute;
  79.   list-style:none;
  80.   margin: 0px 0px 0px 0px;
  81.   padding: 0px 0px 0px 0px;
  82.   left:20px;
  83.   top: 332px;    /* a terület közepére függőlegesen */
  84.   width: 436px;  /* 1db képsor:432+3paddingleft+1korrekció */
  85.   height: 72px;  /* 1db képsor:36px  */
  86. }
  87. /* tabber test-doboz/kép-dobozok: margóval, 1 db mikro-kép részére */
  88. .fgalery ul.tema li:hover a + em + ul li
  89. {
  90.   display:inline;
  91.   margin: 6px 6px 6px 6px;
  92.   padding: 0px 0px 0px 0px;
  93.   width:24px; /* 12x(24+6+6)=432 */
  94.   height:24px; /* 2x(24+6+6)=72 */
  95.   float:left;
  96. }
  97. /* IE */
  98. .fgalery ul.tema li a:hover ul li
  99. {
  100.   display:inline;
  101.   margin: 6px 0px 0px 6px;
  102.   padding: 0px 0px 0px 0px;
  103.   width:30px; /* 24+6=30 */
  104.   height:30px; /* 24+6=30 */
  105.   float:left;
  106. }
  107. /* tabber test-doboz/kép-dobozok: háttérképpel, 1 db mikro-kép részére   */
  108. .fgalery ul.tema li:hover a + em + ul li a
  109. {
  110.   display:block;
  111.   width:24px;
  112.   height:24px;
  113.   cursor:default;
  114.   background: url('../kepek/fgallery-v-arrow.gif') no-repeat; /* 24x24px */
  115.   float:left;
  116.   text-decoration:none;
  117. }
  118. /* IE */
  119. .fgalery ul.tema li a:hover ul li a
  120. {
  121.   display:block;
  122.   width:30px;
  123.   height:30px;
  124.   cursor:default;
  125.   background: url('../kepek/fgallery-v-arrow-ie.gif') no-repeat; /* 30x30px */
  126.   float:left;
  127.   text-decoration:none;
  128. }
  129. /* tabber test-doboz/szöveg-doboz: eltolva */
  130. .fgalery ul.tema li:hover a + em + ul li a + div.clean + b
  131. {
  132.   visibility:hidden;
  133.   position:absolute;
  134.   width: 73px;
  135.   height: 234px;
  136.   top: -318px;
  137.   left: 373px;
  138.   background:#58401F;              /* nyitó szöveg eltakarása */  
  139.   color:#ffffff;                   /* fehér */
  140.   font-weight:normal;
  141.   font-size:10px;
  142.   text-align:center;
  143.   line-height:15px;
  144. }
  145. /* IE */
  146. .fgalery ul.tema li a:hover ul li a b
  147. {
  148.   visibility:hidden;
  149.   position:absolute;
  150.   width: 73px;
  151.   height: 234px;
  152.   top: -318px;
  153.   left: 373px;
  154.   background:#58401F;              /* nyitó szöveg eltakarása */  
  155.   color:#ffffff;                   /* fehér */
  156.   font-weight:normal;
  157.   font-size:10px;
  158.   text-align:center;
  159.   line-height:15px;
  160. }
  161. /* tabber test-doboz/kép-doboz/mikro-kép: kerettel, 1 db mikro-kép részére */
  162. .fgalery ul.tema li:hover a + em + ul li a + div.clean img
  163. {
  164.   position:absolute;
  165.   display:block;
  166.   width:22px;
  167.   height:22px;
  168.   border:1px solid #c99e65;                 /* hallvány1 */
  169.   border-top-color:#e8d7dd;                 /* hallvány3 */
  170. }
  171. /* IE */
  172. .fgalery ul.tema li a:hover ul li a img
  173. {
  174.   position:absolute;
  175.   display:block;
  176.   width:22px;
  177.   height:22px;
  178.   border:1px solid #c99e65;
  179.   border-top-color:#e8d7dd;
  180. }
  181.  
  182. <!-- end -->
  183.  

Mivel a mikroképek kis mérete miatt az oldalt megtekintő felhasználó nem tudja eldönteni, hogy mit tartalmaz a kép(a 3:4 képarány torzított is), ezért ha egy mikrokép kijelölt megjelenik egy nagyobb dia-kép a tájékoztató szöveg ablakának alsó részében, amely már méret-arányos is.

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <!-- css-kód -->
  2.  
  3. /* INNENTŐL: TABBER-FÜL KIJELÖLT és KÉP-DOBOZ KIJELÖLT */
  4. .fgalery ul.tema li:hover a + em + ul li a:hover
  5. {
  6.   white-space:normal;
  7.   position:relative;
  8. }
  9. /* IE */
  10. .fgalery ul.tema li a:hover ul li a:hover
  11. {
  12.   display:block;
  13.   width:30px;
  14.   height:30px;
  15.   cursor:default;
  16.   background: url('../kepek/fgallery-v-arrow-ie.gif') no-repeat; /* 30x30px */
  17.   float:left;
  18.   text-decoration:none;
  19. }
  20. /* tabber test-doboz/kép-doboz/dia-kép: aktuális/felbukkanó függőleges dia-kép 48x64px */
  21. .fgalery ul.tema li:hover a + em + ul li:hover a.vert + div.clean img
  22. {  
  23.   position:absolute;
  24.   left:385px;
  25.   top:-148px;
  26.   width:48px;
  27.   height:64px;
  28.   border-color: #ffebf9;            /* eltérő: v. okker-sárga #FFEBA9 */
  29.   z-index:10;
  30. }
  31. /* IE */
  32. .fgalery ul.tema li a:hover ul li a.vert:hover img
  33. {  
  34.   position:absolute;
  35.   left:385px;
  36.   top:-148px;
  37.   width:48px;
  38.   height:64px;
  39.   border-color: #ffebf9;            /* eltérő: v. okker-sárga #FFEBA9 */
  40.   z-index:10;
  41. }
  42. /* tabber test-doboz/kép-doboz/dia-kép: aktuális/felbukkanó vízszintes dia-kép 64x48px */
  43. .fgalery ul.tema li:hover a + em + ul li:hover a.hor + div.clean img
  44. {
  45.   position:absolute;
  46.   left:377px;
  47.   top:-138px;
  48.   width:64px;
  49.   height:48px;
  50.   border-color: #ffebf9;            /* eltérő: v. okker-sárga #FFEBA9 */
  51.   z-index:10;
  52. }
  53. /* IE */
  54. .fgalery ul.tema li a:hover ul li a.hor:hover img
  55. {
  56.   position:absolute;
  57.   left:377px;
  58.   top:-138px;
  59.   width:64px;
  60.   height:48px;
  61.   border-color: #ffebf9;            /* eltérő: v. okker-sárga #FFEBA9 */
  62.   z-index:10;
  63. }
  64.  
  65. <!-- end -->
  66.  

Az utolsó feladat az volt amikor a felhasználó rákattint egy mikró-képre, azaz valamelyik képcsoport KIJELÖLT és valamelyik mikró-kép AKTIVÁLT/FÓKUSZBAN van.
Ebben az esetben is külön kezeltem az FF és az IE viselkedését miközben: Előszőr törlöm a felületet majd létrehozom az eltolt vertikális vagy horizontális poziciójú nagyképet és végül megjelenítem az aktuális kisérő szöveget.
Sajnos itt sem sikerült megoldani egyelőre, hogy az OPERA sima kattintásra jelenítse meg az aktuális képet, ezért "ezen böngésző" alatt még nem működik megfelelően!(A 10-es verziótól már működik)

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <!-- css-kód -->
  2.  
  3. /* INNENTŐL: TABBER-FÜL KIJELÖLT és KÉP-DOBOZ AKTIVÁLT/FÓKUSZBAN VAN */
  4. /* tabber test-doboz/kép-doboz */
  5. .fgalery ul.tema li:hover a + em + ul li a:focus,
  6. .fgalery ul.tema li:hover a + em + ul li a:active
  7. {
  8.   position:static;
  9.   outline:0;
  10. }
  11. /* IE */
  12. .fgalery ul.tema li a:hover ul li a:active
  13. {
  14.   position:static;
  15.   outline:0;
  16. }
  17. /* nagy-képek terület-tisztító háttere(360x270px)  */
  18. .fgalery ul.tema li:hover a + em + ul li a:focus + div.clean,
  19. .fgalery ul.tema li:hover a + em + ul li a:active + div.clean
  20. {
  21.   position:absolute;
  22.   margin: 0px 0px 0px 0px;
  23.   border-style: none;
  24.   padding: 0px 0px 0px 0px;
  25.   left:-6px;  
  26.   top: -318px;
  27.   width: 360px;  
  28.   height: 270px;  
  29.   background: #2D200F;                  /* sötét előzőt eltakar */
  30.   z-index:10;
  31. }
  32. /* IE */
  33. .fgalery ul.tema li a:hover ul li a:active div.clean
  34. {
  35.   position:absolute;
  36.   margin: 0px 0px 0px 0px;
  37.   border-style: none;
  38.   padding: 0px 0px 0px 0px;
  39.   left:-6px;  
  40.   top: -318px;
  41.   width: 360px;  
  42.   height: 270px;  
  43.   background: #2D200F;                  /* sötét előzőt eltakar */
  44.   z-index:10;
  45. }
  46. /* függöleges nagy-kép(3:4): pozicionálás */
  47. .fgalery ul.tema li:hover a + em + ul li a.vert:focus + div.clean img,
  48. .fgalery ul.tema li:hover a + em + ul li a.vert:active + div.clean img
  49. {
  50.   position:absolute;
  51.   border-style: none;
  52.   left:79px;  
  53.   top: 0px;  
  54.   width: 202px;  
  55.   height: 270px;  
  56.   z-index:10;
  57. }
  58. /* IE */
  59. .fgalery ul.tema li a:hover ul li a.vert:active img
  60. {
  61.   position:absolute;
  62.   border-style: none;
  63.   left:79px;  
  64.   top: 0px;  
  65.   width: 202px;  
  66.   height: 270px;  
  67.   z-index:10;
  68. }
  69. /* vízszintes nagy-kép(4:3): pozicionálás */
  70. .fgalery ul.tema li:hover a + em + ul li a.hor:focus + div.clean img,
  71. .fgalery ul.tema li:hover a + em + ul li a.hor:active + div.clean img
  72. {
  73.   position:absolute;
  74.   border-style: none;
  75.   left: 0px;  
  76.   top: 0px;  
  77.   width: 360px;  
  78.   height: 270px;  
  79.   z-index:10;
  80. }
  81. /* IE */
  82. .fgalery ul.tema li a:hover ul li a.hor:active img
  83. {
  84.   position:absolute;
  85.   border-style: none;
  86.   left: 0px;  
  87.   top: 0px;  
  88.   width: 360px;  
  89.   height: 270px;  
  90.   z-index:10;
  91. }
  92. /* tabber test-doboz/szöveg-doboz: megjelenítés */
  93. .fgalery ul.tema li:hover a + em + ul li a:focus + div.clean + b,
  94. .fgalery ul.tema li:hover a + em + ul li a:active + div.clean + b
  95. {
  96.   visibility:visible;
  97. }
  98. /* IE */
  99. .fgalery ul.tema li a:hover ul li a:active b
  100. {
  101.   visibility:visible;
  102. }
  103. /* float törlés  */
  104. .clear
  105. {
  106.   clear:both;
  107.   height:0;
  108.   line-height:0;
  109.   overflow:hidden;
  110. }
  111.  
  112. <!-- end -->
  113.  

Egy apróság az ismertető végére:
Azért, hogy az IE is jól kezelje a "dolgokat" egy az interneten talált ötlet alapján(feltételes megjegyzés)itt is alkalmaztam(lásd lejjebb a forráskódban)

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <!-- eredeti html kód-rész -->
  2.   <li class="tag"><a href="#nogo" class="csoport">Működés
  3.  
  4. <!-- IE-pótlék -->
  5.   <!--[if IE 7]><!-->
  6.  
  7. <!-- eredeti html kód-rész -->
  8.   </a>
  9.  
  10. <!-- IE-pótlék -->
  11.   <!--<![endif]-->
  12.   <!--[if lte IE 6]>
  13.     <table><tr><td>
  14.   <![endif]-->
  15.  
  16. <!-- eredeti html kód-rész -->
  17.   "LI" aktuális tartalma..........
  18.  
  19.  
  20. <!-- IE-pótlék -->
  21.   <!--[if lte IE 6]>
  22.     </td></tr></table></a>
  23.   <![endif]-->
  24.  
  25. <!-- eredeti html kód-rész -->
  26.   </li>
  27.  

Végszóként annyit, hogy a forráskódot bárki használhatja korlátozás nélkül, csak annyit kérek ha lehet helyezzen el a következő hivatkozást a felhasználás helyénél.(family-team.emszinet.hu)

A használatból eredő bárminemű kárért felelősséget nem vállalok!!

Kívánok minden honlapomat olvasónak sok szerencsét a forráskód sikeres felhasználásához!

A komplett forráskód a Programozás/Css/Letöltések oldalról képfájlokkal együtt letölthető.

Az "FGallery" működés közben megtekinthető az FGallery Demo-ban.

Várom az észrevételeket, javaslatokat az oldalamon található "Üzenetküldés" vagy "Vendégkönyv" felhasználásával.


xhtml   css   cc  

Reklámok