ugrás a tartalomhoz

Változó css képkeret

Sosemvolt · 2010. Szep. 6. (H), 20.32
Hobbiszinten több statikus html oldal után belekóstoltam a css részlegbe, és kb 2 nap után elakadtam.
Van egy thumbokat tartalmazó táblázat, meg a táblázat alján számok, amik a következő ugyanilyen oldalakra irányítanak, a többi thumbhoz.
Először találtam egy ilyet, és ez explorert leszámítva működik is:

<STYLE type="text/css">
img {border-color:" #666666 ";}
a:link { color: #666666 }
a:visited { color: #666666 }
a:active { color: #AAAAAA }
</STYLE>

Viszont itt még a thumbok többi keretinformációját egyesével tároltam a kis képeknél, amit aztán megpróbáltam a head részbe zsúfolni, de úgy már nem működik. Jelenleg az egész style rész így néz ki:

<STYLE type="text/css">
body,html{background-color:transparent;}

.thumb { border:3px; border-color: #666666 ; border-style: solid; }
a:link { color: #666666 }
a:visited { color: #666666 }
a:active { color: #AAAAAA }

p { font-size: 18px; color: #000000; }
a:link { font-size: 16px; text-decoration: none; color: #000000; }
a:visited { font-size: 16px; text-decoration: none; font-style: italic; color: #000000; }
</STYLE>

A thumbok kaptak minden más helyett egy class="thumb" feliratot, a bekezdés formázása pedig a számokat szabályozza egyedül a táblázat alján.

Ezt a részt kellene érvényre juttatni: a:active { color: #AAAAAA }

Nem is annyira az zavar, hogy nem tudom nélkülözni, csak szeretném érteni, hogy hogy működne (meg azért jó is volna, ha tenné).
Előre is köszönöm mindenki segítségét!
 
1

Több magyarázatot

Poetro · 2010. Szep. 6. (H), 21.11
Nem teljesen világos, hogy mit akarsz elérni, és helyette mit értél el. Azt sem értem miért deklarálod egymás után kétszer az a:link és az a:visited részeket, mikor az elsőt teljesen felülírja a második. Ettől Cascading a CSS, azaz az erősebb vagy azonos erősségű de később deklarált tulajdonságok felülírják a korábbiakat. Erről még a magyar Wikipedián használható cikk készült.

Ha mutatnál egy képet, hogy ezt látod, ezt szeretnéd, és egy hozzá kapcsolódó HTMLt is az sokat segítene.
2

Hűha..

Sosemvolt · 2010. Szep. 6. (H), 21.33
No, gondoltam, hogy láma vagyok, de még magam is meglepem...
Így érthető, hogy miért nem megy a dolog, és sejtésem is volt rá, hogy valahol ott kellene gubancolni a dolgot, ahol ugyanazokat deklarálom, de aztán azt a változatot elvetettem. A mostani, tehát a második verziót kellene megbütykölni. Az a cél, hogy a thumbok kerete színt váltson kattintásra (a:active) Azért van kettő az infókból, hogy az első a képkeretekre, míg a második a <p> tagek közti részre legyen érvényes. Amíg csak a keretek színe volt megadva, és semmi más, addig működött, de csak ha a színkódot idézőjelbe tettem, mert nélküle amúgy sem.

Gyorsan feltettem ősrégi tárhelyemre a html-t, amivel kapcsolatban bármi szépítést örömmel fogadok.

Sajnos atw framejei miatt külön le kell tölteni a html-t.
3

Hatókör

Poetro · 2010. Szep. 6. (H), 21.42
Amennyiben korlátozni szeretnéd egy deklaráció hatókörét akkor azt rengeteg féle képpen megadhatod. Például a bekezdésekre vonatkozóan:

p a:link { font-size: 16px; text-decoration: none; color: #000000; }
p a:visited { font-size: 16px; text-decoration: none; font-style: italic; color: #000000; }
Ekkor a linkek csak a <p>-n belül kapjak meg a tulajdonságokat. De érdemes elolvasni a Wikipédia bejegyzést, valamint itt a Weblaboron is született már róla cikksorozat.
4

Köszönöm,de...

Sosemvolt · 2010. Szep. 6. (H), 22.18
A probléma utalósdi része akkor megvan, de a keret információi sajna leragadnak az először megadott értékekre, és nem veszik fel az a:active tulajdonságot, ha rákattintunk a képre.

Most így áll a dolog:
<STYLE type="text/css">

.thumb { border:3px; border-color: #666666 ; border-style: solid; }
.thumb a:link { border:3px; border-color: #666666 ; border-style: solid; }
.thumb a:visited { border:3px; border-color: #666666 ; border-style: solid; }
.thumb a:active { border:3px; border-color: #AAAAAA ; border-style: solid; }

p { font-size: 18px; color: #000000; }
p a:link { font-size: 16px; text-decoration: none; color: #000000; }
p a:visited { font-size: 16px; text-decoration: none; font-style: italic; color: #000000; }

</STYLE>

Megtaláltam a cikkeket, meg amit google kidobott első 3-4 oldalon, azt nézegettem magyarul, angolul, de az a baj, hogy az a:... részeket mindenhol szövegtartományokra mutatják be, vagy csak darabokban a paramétereket, és összerakva nem is látok konkrét bő lére eresztett kódokat belőle. A bekezdés része működött eddig is, de a keret nem szándékozik kilépni a neki szabott első sorból(.thumb { border:3px; border-color: #666666 ; border-style: solid; })
5

Igy mar mukodnie

Blintux · 2010. Szep. 7. (K), 00.12
Igy mar mukodnie kell:

<STYLE type="text/css">
.thumb { border:3px #666666 solid; }
.thumb:link { border:3px #666666 solid; }
.thumb:visited { border:3px #666666 solid; }
.thumb:active { border:3px #AAAAAA solid; }
</STYLE>

<a class="thumb" href="#"><img src="kep.jpg"></a>


Ahogy a peldaban latod, ha a keretnek mindharom erteket meg akarod adni, akkor tudsz egyszerusiteni. Kisebb es jobban atlathato a kod:)
6

Köszönöm!

Sosemvolt · 2010. Szep. 7. (K), 11.20
Köszönöm szépen, így már én is kezdem akkor átlátni:) Szebb is, működik is, tanulok tovább.

És egy utolsónak hitt kérdés egyenlőre, ami nem pontosan fedi a témát, de nem nyitnék érte új topicot: Lehet-e valahogy az ismétlődő javascriptet (itt onmouseover, stb.. -fade effekt) Kiváltani egy hivatkozással. Olyas módon, hogy mindent egyszer adok meg a head tagek közt, és a thumbok img részénél csak hivatkozok rá, mint ahogy cssnél a classok?

<IMG class="thumb" src="thumb/medal21_1.jpg" onmouseover="setOpacity(this,100)" onmouseout="setOpacity(this,60)" onload="setOpacity(this,60)">
7

JavaScript

Poetro · 2010. Szep. 7. (K), 16.07
Az onMouseOver és társait szerintem minél előbb érdemes eltávolítani a HTML-ből. Inkább használj Diszkrét Javascriptet. De hogy álljon itt egy kis kód is:
(function (window, document, tag, className) {
  var elems = document.getElementsByTagName(tag), // Kigyűjtjük a képeket
      elemNum = elems.length,                     // Képek száma
      i = 0,
      elem,

      setOpacity = function () {
        var div = document.createElement("div"),
            a,
            support;

        div.style.display = "none";
        div.innerHTML = "<a href='/a' style='opacity:.55;'>a</a>";
        a = div.getElementsByTagName("a")[0];
        support = /^0.55$/.test(a.style.opacity);

        return function (elm, value) {
          var style = elm.style || '',
              filter = style.filter || '',
              ralpha = /alpha\([^)]*\)/,
              ropacity = /opacity=([^)]*)/,
              opacity = parseInt(value, 10);


          if (!support) {
            opacity = opacity + '' === 'NaN' ? '' : "alpha(opacity=" + value + ")";
            style.filter = ralpha.test(filter) ? filter.replace(ralpha, opacity) : opacity;
          }
          else {
            style.opacity = (opacity + '' === 'NaN' ? 1 : opacity) / 100;
          }
        };
      }(),

      getEventTarget = function (event) {
        var target;

        if (!event) {
          event = window.event;
        }
        if (event.target) {
          target = event.target;
        }
        else if (event.srcElement) {
          target = event.srcElement;
        }
        if (target.nodeType == 3) {
          target = target.parentNode;
        }
        return target;
      },

      // Generálunk egy speciális setOpacity függvényt,
      // amiben meg van már adva az átlátszóság
      setOpacityGen = function (opacity) {
        return function (event) {
          setOpacity(getEventTarget(event), opacity);
        };
      },

      // Böngésző független esemény hozzácsatolás (messze nem tökéletes)
      addEvent = function (elm, evt, func) {
        if (elm.addEventListener) {
          elm.addEventListener(evt, func, false);
        }
        else if (elm.attachEvent) {
          elm.attachEvent(('on' + evt), func);
        }
        else {
          elm['on' + evt] = func;
        }
      };


  // Végigszaladunk a képeken, és hozzáadjuk a képekhez az eseménykezelőket.
  for (; i < elemNum; i += 1) {
    elem = elems[i];
    if (elem.className && className.test(elem.className)) {
      addEvent(elem, 'mouseover', setOpacityGen(100));
      addEvent(elem, 'mouseout', setOpacityGen(60));
      addEvent(elem, 'load', setOpacityGen(60));
    }
  }

}(this, document, 'img', /(?:^|\s)thumb(?:$|\s)/));
Ezt mondjuk nem a head-be, hanem a body végére kell tenni.
8

Köszönöm!

Sosemvolt · 2010. Szep. 7. (K), 16.24
Azt hiszem én is a diszkréciót céloztam meg az előző kérdéssel, bár az én eddigi megoldásom lényegesen primitívebb, mint ez, bár ezt még idő, mire megemésztem. Mindenesetre nekiállok jól megrágni, hogy le tudjam nyelni. Köszönöm!
9

jQuery

Poetro · 2010. Szep. 7. (K), 21.16
Amennyiben jQuery-t használsz az oldalon, akkor az egész ennyiből állna:
(function ($) {
  $(function () {
    $('.thumb').bind('mouseover mouseout load', function (event) { 
      $(this).css('opacity', event.type == 'mouseover' ? 1 : .6) 
    });
  });
}(jQuery));
10

Az nincs...

Sosemvolt · 2010. Szep. 7. (K), 23.11
Szemeztem vele, és majd következő lépésben tán bele is ártom magam, de örülök, hogy most egyenlőre css sokat könnyít rajtam, vagyis inkább szépít a kódon, és ha kívűlről ugyanolyan az oldalam mint egy hete, sokkal tisztább a kódja:)

A fade effektet meg szintén sikerült css-sel megoldani, bár IE nem szereti, már kezd nem érdekelni, mert bármit teszek, az nem jó neki.

Ilyen most:
Amúgy akkor elég az adott elemekre vonatkozólag mindig csak a változásokat feltüntetni? Tehát ha valaminek pl.: a link verziója is ugyanaz, akkor az ugye nem is kell odaírni?