Programozás kezdők, amatőrök részére

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!
(34.239.152.207)
« Előző »
« látogatásod: »
(2023/03/31 - 04:07)

Oldal módosítva:
2012. 10. 17. 12:07.

Buzsák

Css / Ötletek-leírások:

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..).

<!-- html-kód --> 
 
<div class="ftabber-bg">
 <div class="ftabber">
  <ul class="tema">
   <li class="tag"><a href="#nogo" class="csoport">téma 1</a>
..itt az aktuális tartalom...
   </li>
   <li class="tag"><a href="#nogo" class="csoport">téma 2</a>
..itt az aktuális tartalom...
   </li>
..igy tovább max hatszor...
  </ul>
  <br class="clear" />
 </div>
</div>
 
<!-- end -->
 
<!-- css-kód -->
 
/* sztring-tabber keret-doboz: pozició */
.ftabber-bg
{
  margin: 0px auto 0px auto; border-style: none; padding: 0px 0px 0px 0px;
  position:relative; width:500px; height: 390px; 
}
/* sztring-tabber keret-doboz: háttér */
.ftabber
{
  margin: 0px auto 0px auto; border-style: none; padding: 0px 0px 0px 0px;
  background-color: transparent; position:relative; width:480px; height:360px; 
}
/* sztring-tabber doboz */
.ftabber ul.tema {
  margin: 0px 0px 0px 0px; border-style: none; padding: 0px 0px 0px 0px;
  display:block; list-style:none; width:480px; height:360px; position:relative; 
  z-index:10;
}
/* sztring-tabber fül */
.ftabber ul.tema li.tag
{
  margin: 0px 0px 0px 0px; border-style: none; padding: 0px 0px 0px 0px;
  display:inline; background-color: transparent;
  width:80px; 
  height:20px; float:left;
}
/* sztring-tabber fül/szövegdoboz: (csoport-megnevezésnek) */
.ftabber ul.tema li.tag a.csoport
{
  margin: 0px 0px 0px 0px; border-style: none; padding: 0px 0px 0px 0px;
  display:block; background-color: transparent; 
  background-image: url('../kepek/ftabber-tab.gif');
  background-repeat: no-repeat; background-attachment: scroll;
  background-position:0px 0px;
  width:80px; 
  height:20px;
  font-size:11px; line-height:13px; text-align:center; color:#2d200f; /* sötét */ 
  text-decoration:none;
}
 
<!-- end -->
 

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.

<!-- html-kód --> 
 
          <div class="fej fc">
          </div>
          <div class="torzs">
..itt az aktuális tartalom...
          </div>
          <div class="lab">
          </div>
 
<!-- end -->
 
<!-- css-kód -->
 
/* tabber-test: elrejtés */
.ftabber ul.tema li.tag div
{  
  display: none;
}
/* tabber-test/fejléc: nyitólap megjelenítés, formázás */
.ftabber ul.tema li.tag a.csoport + div.fej
{
  position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  display: block; left: 0px; top: 20px; width: 480px; height: 10px; z-index: -1; 
  background: url('../kepek/ftabber-fejlec-kezd.gif') top left no-repeat;
}
/* IE */
.ftabber ul.tema li.tag a.csoport div.fej
{
  position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  display: block; left: 0px; top: 20px; width: 480px; height: 10px; z-index: -1; 
  background: url('../kepek/ftabber-fejlec-kezd.gif') top left no-repeat;
}
 
/* tabber-test/törzs: nyitólap megjelenítés, formázás */
.ftabber ul.tema li.tag a.csoport + div.fej + div.torzs
{
  display: block; position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; 
  border-style: none; left: 0px; top: 30px; width: 480px; height:340px; z-index:-1;
  background-color: transparent; background-image: url('../kepek/ftabber-torzs-kezd.gif');
  background-repeat: no-repeat; background-attachment: scroll; background-position:0px 0px;
  text-align: left;  
  color: #2D200F;                   /* sötét */ 
  font-weight:normal; 
  font-size:11px; 
  line-height:15px;
  overflow:hidden;
}
/* IE */
.ftabber ul.tema li.tag a.csoport div.torzs
{
  display: block; position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; 
  border-style: none; left: 0px; top: 30px; width: 480px; height:340px; z-index:-1;
  background-color: transparent; background-image: url('../kepek/ftabber-torzs-kezd.gif');
  background-repeat: no-repeat; background-attachment: scroll; background-position:0px 0px;
  text-align: left;  
  color: #2D200F;                   /* sötét */ 
  font-weight:normal; 
  font-size:11px; 
  line-height:15px;
  overflow:hidden;
}
/* tabber-lábléc: nyitólap megjelenítés, formázás */
.ftabber ul.tema li.tag a.csoport + div.fej + div.torzs + div.lab
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 370px; width: 480px; height: 10px; z-index: -1; 
  background: url('../kepek/ftabber-lablec-kezd.gif') top left no-repeat;
}
/* IE */
.ftabber ul.tema li.tag a.csoport div.lab
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 370px; width: 480px; height: 10px; z-index: -1; 
  background: url('../kepek/ftabber-lablec-kezd.gif') top left no-repeat;
}
 
<!-- end -->
 

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.

<!-- html-kód --> 
 
            <p class="cim">
              téma címe  
            </p>
            <p class="kep-left">
              <img src="téma.gif" width="48" height="48" title="cimke" />
            </p>
            <p class="egyseg-left">
              sima tartalom 
            </p>
            <p class="egyseg-center">
            </p>
..stb...
 
<!-- end -->
 
<!-- css-kód -->
 
/* TARTALMI FORMÁZÁSOK */
/* cim formázás */
.ftabber ul.tema li.tag p.cim
{
  margin: 0px 0px 0px 0px; border-style: none; padding: 0px 0px 0px 0px; 
  font-size: 12px; line-height: 18px; font-weight:normal; text-align: center; 
  font-weight: bold; color: #2d200f;                   /* sötét */
  visibility:hidden; 
}
/* egység formázás */
.ftabber ul.tema li.tag p.egyseg-left
{
  margin: 0px 0px 0px 0px; border-style: none; padding: 5px 0px 5px 0px; 
  color: #2D200F; 
  font-weight:normal; font-size:11px; text-align:left; line-height:15px;
  visibility:hidden; 
}
.ftabber ul.tema li.tag p.egyseg-center
{
  margin: 0px 0px 0px 0px; border-style: none; padding: 5px 0px 5px 0px; 
  color: #2D200F;                   /* sötét */ 
  font-weight:normal; font-size:11px; text-align:center; line-height:15px;
  visibility:hidden; 
}
.ftabber ul.tema li.tag p.egyseg-right
{
  margin: 0px 0px 0px 0px; border-style: none; padding: 5px 0px 5px 0px; 
  color: #2D200F;                   /* sötét */ 
  font-weight:normal; font-size:11px; text-align:right; line-height:15px;
  visibility:hidden; 
}
/* kép formázás */
.ftabber ul.tema li.tag p.kep-left
{
  margin: 0px 0px 0px 0px; border-style: none; padding: 10px 10px 10px 20px; 
  float: left;
  visibility:hidden; 
}
.ftabber ul.tema li.tag p.kep-right
{
  margin: 0px 0px 0px 0px; border-style: none; padding: 10px 20px 10px 10px; 
  float: right;
  visibility:hidden; 
}
 
<!-- end -->
 

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.

<!-- css-kód -->
 
/* INNENTŐL: TABBER-FÜL KIJELÖLT */
/* sztring-tabber fül */
.ftabber ul.tema li.tag a.csoport:active,
.ftabber ul.tema li.tag a.csoport:focus
{
  margin: 0px 0px 0px 0px; border-style:none; padding: 0px 0px 0px 0px;
  background-position:0px -20px;
  width:80px; 
  height:20px; cursor: default;    
  color:#FFEBA9;                   /* eltérő:okker-sárga #FFEBA9 */
}
/* IE */
.ftabber ul.tema li.tag a.csoport:active
{
  margin: 0px 0px 0px 0px; border-style:none; padding: 0px 0px 0px 0px;
  background-position:0px -20px;
  width:80px; 
  height:20px; cursor: default;    
  color:#FFEBA9;                 /* eltérő:okker-sárga #FFEBA9 */
}
 
/* tabber-test/fejléc: megjelenítés, formázás */
/* 1 */
.ftabber ul.tema li.tag a.csoport:active + div.fa,
.ftabber ul.tema li.tag a.csoport:focus + div.fa
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 20px; width: 480px; height: 10px; z-index:10; 
  background: url('../kepek/ftabber-fejlec1.gif') top left no-repeat;
}
/* IE */
.ftabber ul.tema li.tag a.csoport:active div.fa
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 20px; width: 480px; height: 10px; z-index:10; 
  background: url('../kepek/ftabber-fejlec1.gif') top left no-repeat;
}
/* 2 */
.ftabber ul.tema li.tag a.csoport:active + div.fb,
.ftabber ul.tema li.tag a.csoport:focus + div.fb
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 20px; width: 480px; height: 10px; z-index:10; 
  background: url('../kepek/ftabber-fejlec2.gif') top left no-repeat;
}
/* IE */
.ftabber ul.tema li.tag a.csoport:active div.fb
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 20px; width: 480px; height: 10px; z-index:10; 
  background: url('../kepek/ftabber-fejlec2.gif') top left no-repeat;
}
 
/* 3 */
.ftabber ul.tema li.tag a.csoport:active + div.fc,
.ftabber ul.tema li.tag a.csoport:focus + div.fc
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 20px; width: 480px; height: 10px; z-index:10; 
  background: url('../kepek/ftabber-fejlec3.gif') top left no-repeat;
}
/* IE */
.ftabber ul.tema li.tag a.csoport:active div.fc
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 20px; width: 480px; height: 10px; z-index:10; 
  background: url('../kepek/ftabber-fejlec3.gif') top left no-repeat;
}
/* 4 */
.ftabber ul.tema li.tag a.csoport:active + div.fd,
.ftabber ul.tema li.tag a.csoport:focus + div.fd
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 20px; width: 480px; height: 10px; z-index:10; 
  background: url('../kepek/ftabber-fejlec4.gif') top left no-repeat;
}
/* IE */
.ftabber ul.tema li.tag a.csoport:active div.fd
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 20px; width: 480px; height: 10px; z-index:10; 
  background: url('../kepek/ftabber-fejlec4.gif') top left no-repeat;
}
/* 5 */
.ftabber ul.tema li.tag a.csoport:active + div.fe,
.ftabber ul.tema li.tag a.csoport:focus + div.fe
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 20px; width: 480px; height: 10px; z-index:10; 
  background: url('../kepek/ftabber-fejlec5.gif') top left no-repeat;
}
/* IE */
.ftabber ul.tema li.tag a.csoport:active div.fe
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 20px; width: 480px; height: 10px; z-index:10; 
  background: url('../kepek/ftabber-fejlec5.gif') top left no-repeat;
}
/* 6 */
.ftabber ul.tema li.tag a.csoport:active + div.ff,
.ftabber ul.tema li.tag a.csoport:focus + div.ff
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 20px; width: 480px; height: 10px; z-index:10; 
  background: url('../kepek/ftabber-fejlec6.gif') top left no-repeat;
}
/* IE */
.ftabber ul.tema li.tag a.csoport:active div.ff
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 20px; width: 480px; height: 10px; z-index:10; 
  background: url('../kepek/ftabber-fejlec6.gif') top left no-repeat;
}
/* tabber-test/törzs: megjelenítés, formázás */
.ftabber ul.tema li.tag a.csoport:focus + div.fej + div.torzs,
.ftabber ul.tema li.tag a.csoport:active + div.fej + div.torzs
{
  display: block; position: absolute; padding: 5px 15px 5px 15px; margin: 0px 0px 0px 0px;
  left: 0px; top: 30px; width: 450px; height: 330px; z-index:10; 
  background: url('../kepek/ftabber-torzs.gif') top left repeat-y;
  text-align: left;  
  color: #2D200F;                   /* sötét */ 
  font-weight:normal; 
  font-size:11px; 
  line-height:15px;
        overflow: auto;
}
/* IE */
.ftabber ul.tema li.tag a.csoport:active div.torzs
{
  display: block; position: absolute; padding: 5px 15px 5px 15px; margin: 0px 0px 0px 0px;
  left: 0px; top: 30px; width: 480px; height: 340px; z-index:10; 
  background: url('../kepek/ftabber-torzs.gif') top left repeat-y;
  text-align: left;  
  color: #2D200F;                   /* sötét */ 
  font-weight:normal; 
  font-size:11px; 
  line-height:15px;
        overflow: auto;
}
/* tabber-lábléc: megjelenítés, formázás */
.ftabber ul.tema li.tag a.csoport:active + div.fej +div.torzs + div.lab,
.ftabber ul.tema li.tag a.csoport:focus + div.fej +div.torzs + div.lab
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 370px; width: 480px; height: 10px; z-index:10; 
  background: url('../kepek/ftabber-lablec.gif') top left no-repeat;
}
/* IE */
.ftabber ul.tema li.tag a.csoport:active div.lab
{
  display: block; position: absolute; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  left: 0px; top: 370px; width: 480px; height: 10px; z-index:10; 
  background: url('../kepek/ftabber-lablec.gif') top left no-repeat;
}
/* választott tartalom megjelenítés */
.ftabber ul.tema li.tag a.csoport:focus + div.fej + div.torzs p.cim,
.ftabber ul.tema li.tag a.csoport:active + div.fej + div.torzs p.cim,
.ftabber ul.tema li.tag a.csoport:focus + div.fej + div.torzs p.kep-left,
.ftabber ul.tema li.tag a.csoport:active + div.fej + div.torzs p.kep-left,
.ftabber ul.tema li.tag a.csoport:focus + div.fej + div.torzs p.kep-right,
.ftabber ul.tema li.tag a.csoport:active + div.fej + div.torzs p.kep-right,
.ftabber ul.tema li.tag a.csoport:focus + div.fej + div.torzs p.egyseg-left,
.ftabber ul.tema li.tag a.csoport:active + div.fej + div.torzs p.egyseg-left,
.ftabber ul.tema li.tag a.csoport:focus + div.fej + div.torzs p.egyseg-center,
.ftabber ul.tema li.tag a.csoport:active + div.fej + div.torzs p.egyseg-center,
.ftabber ul.tema li.tag a.csoport:focus + div.fej + div.torzs p.egyseg-right,
.ftabber ul.tema li.tag a.csoport:active + div.fej + div.torzs p.egyseg-right
{
  visibility:visible;
}
/* IE */
.ftabber ul.tema li.tag a.csoport:active p.cim,
.ftabber ul.tema li.tag a.csoport:active p.kep-left,
.ftabber ul.tema li.tag a.csoport:active p.kep-right,
.ftabber ul.tema li.tag a.csoport:active p.egyseg-left,
.ftabber ul.tema li.tag a.csoport:active p.egyseg-center,
.ftabber ul.tema li.tag a.csoport:active p.egyseg-right
{
  visibility:visible;
}
/* float törlés  */
.clear {clear:both; height:0; line-height:0; overflow:hidden;}
 
<!-- end -->
 

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).

<!-- eredeti html kód-rész --> 
  <li class="tag"><a href="#nogo" class="csoport">Működés
 
<!-- IE-pótlék -->
  <!--[if IE 7]><!--> 
  
<!-- eredeti html kód-rész --> 
  </a> 
 
<!-- IE-pótlék -->
  <!--<![endif]--> 
  <!--[if lte IE 6]>
    <table><tr><td>
  <![endif]-->
 
<!-- eredeti html kód-rész --> 
  "LI" aktuális tartalma..........
 
 
<!-- IE-pótlék -->
  <!--[if lte IE 6]>
    </td></tr></table></a>
  <![endif]-->
 
<!-- eredeti html kód-rész --> 
  </li>
 

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.

<!-- html-kód --> 
 
      <div class="fgalery-bg">
        <div class="fgalery">
          <img class="indulo" src="albumok/csoport-x/kep-x.jpg" title="Nyitó kép" alt="" />
          <b class="indulo">Állj rá egyik az fülre és klikk a dia-képekre!</b>
          <ul class="tema">
            <li><a href="#nogo" class="csoport">Csoport1</a>
              <em></em>
              <ul>
max 24 db mikro-kép doboza
              </ul>
              <br class="clear">
            </li>
            <li><a href="#nogo" class="csoport">Csoport2</a>
              <em></em>
              <ul>
max 24 db mikro-kép doboza
              </ul>
              <br class="clear">
            </li>
 
max 8 csoport..
 
          </ul>
          <br class="clear" />
        </div>
      </div>
 
<!-- end -->
 
<!-- css-kód -->
 
/* csoport felirat alapformázás */
a.csoport:link {
        color: #2d200f;                  /* sötét */
}
a.csoport:visited {
        color: #2d200f;                  /* sötét */
}
 
a.csoport:focus {
    color:#ffffff;                 /* fehér */
}
a.csoport:active {
    color:#ffffff;                 /* fehér */
}
a.csoport:hover {
    color:#ffffff;                 /* fehér */
}
/* album háttér, pozició */
.fgalery-bg
{
  margin: 0px auto 0px auto;
  border-style: none; 
  padding: 0px 0px 0px 0px;
  background: url('../kepek/fgallery-bg.gif') no-repeat left top; 
  width:480px; 
  height:440px; 
}
/* album doboz */
.fgalery
{
  position:relative;
  margin: 0px 0px 0px 0px;
  border-style: none; 
  padding: 0px 0px 0px 0px;
  text-align:left; 
}
/* induló nagy-kép */
img.indulo
{
  position:absolute; 
  left:14px;  /* left(9+1+3)+kép360+3+1=377  keret 10px-nél és 378px-nél */
  top:14px;   /* top(9+1+3)+kép270+3+1=287   keret 10px-nél és 289px-nél */
  width:360px; 
  height:270px; 
  z-index:0;
}
/* induló kisérő szöveg */
b.indulo
{
  position:absolute; 
  width: 73px; 
  height: 234px; 
  top: 18px; 
  left: 394px; 
  color:#ffffff;                   /* fehér */
  font-weight:normal; 
  font-size:10px; 
  text-align:center; 
  line-height:15px;
  z-index:0;
}
/* tabber doboz */
.fgalery ul.tema {
  position:relative; 
  margin: 0px 0px 0px 0px; 
  padding: 300px 0px 0px 20px;
  list-style:none; 
  width:440px;                   /* 8x55px=440px */ 
  height:auto; 
  z-index:10;
}
/* tabber fül */
.fgalery ul.tema li
{
  display:inline; 
  width:55px; 
  height:20px; 
  float:left;
}
/* tabber fül/szövegdoboz: (csoport-megnevezésnek) */
.fgalery ul.tema li a.csoport
{
  display:block; 
  font-size:10px;
  background:transparent; 
  width:55px; 
  height:20px;  
  text-align:center; 
  line-height:18px; 
  text-decoration:none;
}
/* tabber fül/test-doboz (12x2 db kép részére) */
.fgalery ul.tema li a + em + ul 
{
  display:none;
}
/* IE */
.fgalery ul.tema li a ul
{
  display:none;
}
 
<!-- end -->
 

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.

<!-- html-kód --> 
 
/* max 24 db mikro-kép paramétereit tartalmazó fájl betöltése: */
<?php
  //include "albumok/csoport-x.stf"; 
?>
csoport-x.stf szerkezete:
<li><a href="#nogo" class="vert"></a>
  <div class="clean"><img src="albumok/csoport-x/kep1_v.jpg" alt="" /></div>
  <b>Emlősök.</b>
</li>
<li><a href="#nogo" class="hor"></a>
  <div class="clean"><img src="albumok/emlos/kep2_h.jpg" alt="" /></div>
  <b>Emlősök.</b>
</li>
<li><a href="#nogo" class="vert"></a>
  <div class="clean"><img src="albumok/emlos/kep3_v.jpg" alt="" /></div>
  <b>Emlősök.</b>
</li>
stb...stb...
 
<!-- end -->
 
<!-- css-kód -->
 
/* INNENTŐL: TABBER-FÜL KIJELÖLT */
/* tabber fül */
.fgalery ul.tema li:hover a.csoport
{
  border:0px;
}
/* IE */
.fgalery ul.tema li a.csoport:hover
{
  border:0px;
}
/* külső keret: megjelenítés */
.fgalery ul.tema li:hover a + em
{
  display:block; 
  position:absolute; 
  border:1px solid #B78528;         /* eltérő: mustár */
  left: 2px;
  top: 2px; 
  width: 474px; 
  height: 424px; 
  z-index:-1; 
}
/* IE */
.fgalery ul.tema li a:hover em 
{
  display:block; 
  position:absolute; 
  border:1px solid #B78528;         /* eltérő: mustár */
  left: 2px;
  top: 2px; 
  width: 474px; 
  height: 424px; 
  z-index:-1; 
}
/* tabber test-doboz (6x4 db kép részére) */
.fgalery ul.tema li:hover a + em + ul
{
  display:block; 
  position:absolute; 
  list-style:none; 
  margin: 0px 0px 0px 0px; 
  padding: 0px 0px 0px 3px; 
  left:20px;
  top: 332px;    /* a terület közepére függőlegesen */
  width: 436px;  /* 1db képsor:432px+3paddingleft+1korrekció */
  height: 72px;  /* 1db képsor:36px  */
}
/* IE */
.fgalery ul.tema li a:hover ul
{
  display:block; 
  position:absolute; 
  list-style:none; 
  margin: 0px 0px 0px 0px; 
  padding: 0px 0px 0px 0px; 
  left:20px;
  top: 332px;    /* a terület közepére függőlegesen */
  width: 436px;  /* 1db képsor:432+3paddingleft+1korrekció */
  height: 72px;  /* 1db képsor:36px  */
}
/* tabber test-doboz/kép-dobozok: margóval, 1 db mikro-kép részére */
.fgalery ul.tema li:hover a + em + ul li
{
  display:inline; 
  margin: 6px 6px 6px 6px;
  padding: 0px 0px 0px 0px; 
  width:24px; /* 12x(24+6+6)=432 */ 
  height:24px; /* 2x(24+6+6)=72 */
  float:left; 
}
/* IE */
.fgalery ul.tema li a:hover ul li
{
  display:inline; 
  margin: 6px 0px 0px 6px;
  padding: 0px 0px 0px 0px; 
  width:30px; /* 24+6=30 */ 
  height:30px; /* 24+6=30 */
  float:left; 
}
/* tabber test-doboz/kép-dobozok: háttérképpel, 1 db mikro-kép részére   */
.fgalery ul.tema li:hover a + em + ul li a
{
  display:block; 
  width:24px; 
  height:24px; 
  cursor:default; 
  background: url('../kepek/fgallery-v-arrow.gif') no-repeat; /* 24x24px */
  float:left; 
  text-decoration:none;
}
/* IE */
.fgalery ul.tema li a:hover ul li a
{
  display:block; 
  width:30px; 
  height:30px; 
  cursor:default; 
  background: url('../kepek/fgallery-v-arrow-ie.gif') no-repeat; /* 30x30px */
  float:left; 
  text-decoration:none;
}
/* tabber test-doboz/szöveg-doboz: eltolva */
.fgalery ul.tema li:hover a + em + ul li a + div.clean + b
{
  visibility:hidden;
  position:absolute; 
  width: 73px; 
  height: 234px; 
  top: -318px; 
  left: 373px;
  background:#58401F;              /* nyitó szöveg eltakarása */   
  color:#ffffff;                   /* fehér */
  font-weight:normal; 
  font-size:10px; 
  text-align:center; 
  line-height:15px;
}
/* IE */
.fgalery ul.tema li a:hover ul li a b
{
  visibility:hidden;
  position:absolute; 
  width: 73px; 
  height: 234px; 
  top: -318px; 
  left: 373px;
  background:#58401F;              /* nyitó szöveg eltakarása */   
  color:#ffffff;                   /* fehér */
  font-weight:normal; 
  font-size:10px; 
  text-align:center; 
  line-height:15px;
}
/* tabber test-doboz/kép-doboz/mikro-kép: kerettel, 1 db mikro-kép részére */
.fgalery ul.tema li:hover a + em + ul li a + div.clean img
{
  position:absolute; 
  display:block; 
  width:22px; 
  height:22px; 
  border:1px solid #c99e65;                 /* hallvány1 */
  border-top-color:#e8d7dd;                 /* hallvány3 */
}
/* IE */
.fgalery ul.tema li a:hover ul li a img
{
  position:absolute; 
  display:block; 
  width:22px; 
  height:22px;
  border:1px solid #c99e65;
  border-top-color:#e8d7dd;
}
 
<!-- end -->
 

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.

<!-- css-kód -->
 
/* INNENTŐL: TABBER-FÜL KIJELÖLT és KÉP-DOBOZ KIJELÖLT */
.fgalery ul.tema li:hover a + em + ul li a:hover
{
  white-space:normal;
  position:relative;
}
/* IE */
.fgalery ul.tema li a:hover ul li a:hover
{
  display:block; 
  width:30px; 
  height:30px; 
  cursor:default; 
  background: url('../kepek/fgallery-v-arrow-ie.gif') no-repeat; /* 30x30px */
  float:left; 
  text-decoration:none;
}
/* tabber test-doboz/kép-doboz/dia-kép: aktuális/felbukkanó függőleges dia-kép 48x64px */
.fgalery ul.tema li:hover a + em + ul li:hover a.vert + div.clean img
{  
  position:absolute; 
  left:385px; 
  top:-148px; 
  width:48px; 
  height:64px; 
  border-color: #ffebf9;            /* eltérő: v. okker-sárga #FFEBA9 */
  z-index:10;
}
/* IE */
.fgalery ul.tema li a:hover ul li a.vert:hover img
{  
  position:absolute; 
  left:385px; 
  top:-148px; 
  width:48px; 
  height:64px; 
  border-color: #ffebf9;            /* eltérő: v. okker-sárga #FFEBA9 */
  z-index:10;
}
/* tabber test-doboz/kép-doboz/dia-kép: aktuális/felbukkanó vízszintes dia-kép 64x48px */
.fgalery ul.tema li:hover a + em + ul li:hover a.hor + div.clean img
{
  position:absolute; 
  left:377px; 
  top:-138px;
  width:64px; 
  height:48px; 
  border-color: #ffebf9;            /* eltérő: v. okker-sárga #FFEBA9 */
  z-index:10;
}
/* IE */
.fgalery ul.tema li a:hover ul li a.hor:hover img
{
  position:absolute; 
  left:377px; 
  top:-138px;
  width:64px; 
  height:48px; 
  border-color: #ffebf9;            /* eltérő: v. okker-sárga #FFEBA9 */
  z-index:10;
}
 
<!-- end -->
 

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)

<!-- css-kód -->
 
/* INNENTŐL: TABBER-FÜL KIJELÖLT és KÉP-DOBOZ AKTIVÁLT/FÓKUSZBAN VAN */
/* tabber test-doboz/kép-doboz */
.fgalery ul.tema li:hover a + em + ul li a:focus, 
.fgalery ul.tema li:hover a + em + ul li a:active
{
  position:static; 
  outline:0;
}
/* IE */
.fgalery ul.tema li a:hover ul li a:active
{
  position:static; 
  outline:0;
}
/* nagy-képek terület-tisztító háttere(360x270px)  */
.fgalery ul.tema li:hover a + em + ul li a:focus + div.clean, 
.fgalery ul.tema li:hover a + em + ul li a:active + div.clean 
{
  position:absolute; 
  margin: 0px 0px 0px 0px;
  border-style: none; 
  padding: 0px 0px 0px 0px;
  left:-6px;  
  top: -318px;
  width: 360px;  
  height: 270px;  
  background: #2D200F;                  /* sötét előzőt eltakar */
  z-index:10;
}
/* IE */
.fgalery ul.tema li a:hover ul li a:active div.clean
{
  position:absolute; 
  margin: 0px 0px 0px 0px;
  border-style: none; 
  padding: 0px 0px 0px 0px;
  left:-6px;  
  top: -318px; 
  width: 360px;  
  height: 270px;  
  background: #2D200F;                  /* sötét előzőt eltakar */
  z-index:10;
}
/* függöleges nagy-kép(3:4): pozicionálás */
.fgalery ul.tema li:hover a + em + ul li a.vert:focus + div.clean img, 
.fgalery ul.tema li:hover a + em + ul li a.vert:active + div.clean img 
{
  position:absolute; 
  border-style: none; 
  left:79px;  
  top: 0px;  
  width: 202px;  
  height: 270px;  
  z-index:10;
}
/* IE */
.fgalery ul.tema li a:hover ul li a.vert:active img
{
  position:absolute; 
  border-style: none; 
  left:79px;  
  top: 0px;  
  width: 202px;  
  height: 270px;  
  z-index:10;
}
/* vízszintes nagy-kép(4:3): pozicionálás */
.fgalery ul.tema li:hover a + em + ul li a.hor:focus + div.clean img, 
.fgalery ul.tema li:hover a + em + ul li a.hor:active + div.clean img
{
  position:absolute; 
  border-style: none; 
  left: 0px;  
  top: 0px;  
  width: 360px;  
  height: 270px;   
  z-index:10;
}
/* IE */
.fgalery ul.tema li a:hover ul li a.hor:active img
{
  position:absolute; 
  border-style: none; 
  left: 0px;  
  top: 0px;  
  width: 360px;  
  height: 270px;   
  z-index:10;
}
/* tabber test-doboz/szöveg-doboz: megjelenítés */
.fgalery ul.tema li:hover a + em + ul li a:focus + div.clean + b, 
.fgalery ul.tema li:hover a + em + ul li a:active + div.clean + b
{
  visibility:visible;
}
/* IE */
.fgalery ul.tema li a:hover ul li a:active b
{
  visibility:visible;
}
/* float törlés  */
.clear
{
  clear:both; 
  height:0; 
  line-height:0; 
  overflow:hidden;
}
 
<!-- end -->
 

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)

<!-- eredeti html kód-rész --> 
  <li class="tag"><a href="#nogo" class="csoport">Működés
 
<!-- IE-pótlék -->
  <!--[if IE 7]><!--> 
  
<!-- eredeti html kód-rész --> 
  </a> 
 
<!-- IE-pótlék -->
  <!--<![endif]--> 
  <!--[if lte IE 6]>
    <table><tr><td>
  <![endif]-->
 
<!-- eredeti html kód-rész --> 
  "LI" aktuális tartalma..........
 
 
<!-- IE-pótlék -->
  <!--[if lte IE 6]>
    </td></tr></table></a>
  <![endif]-->
 
<!-- eredeti html kód-rész --> 
  </li>
 

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

Family Team is licensed under a   Creative Commons Nevezd meg!-Ne add el!-Így add tovább! 2.5 Magyarország License.

A license eredeti elérhetősége:  http://creativecommons.org/licenses/by-nc-sa/2.5/hu/

Ennek az oldalnak az eredeti elérhetősége:  http://family-team.emszinet.hu/