✔ image auf image

[php-kopfkratzer]

Hallo,
ich habe da ein etwas eigenartiges Problem, vielleicht kann mir einer auf die schnelle helfen.
Folgende Ausgangspostion:

ich habe eine Grafik, positioniert in einer Float-Umgebung, nichts besonderes also. Nebenbei erwähnt darf diese Grafik aus SEO-Gründen kein Background-image sein.

Über diese Grafik will ich nun eine zweite, kleinere Grafik (.gif) egen und entsprechend (rechts oben) positionieren ->Lupe für Zoom-Effekt.

Irgendwie scheint das mit position:relative bei einer Grafik nicht klappen zu wollen. Um den gewünschten Effekt zu erreichen, muss ich die Untergrund-Grafik selbst relativ positionieren und ihr einen negativen top-wert geben... alles in allem also suboptimal.

Die Lupe absolut zu positionieren ist auch nicht optimal, da die Untergrund-Grafik stets an anderer Stelle im Dokument auftaucht. Ich muss Lupe und Grafik also irgendwie verbinden..

Weiss jemand Rat?

Gruss
PK

 

[ZodiacXP]

Mehr ein CSS-Problem.

<style type="text/css">
  a > img[src$=".jpg"] {
    float : left;
    border : 0;
  }
  a > img[src="lupe.gif"] {
    margin-left : -[breite des lupenbildes]px;
    margin-top: -[höhe des bildes - höhe lupenbild]px;
  }
</style>
<a href="groesser.htm">
  <img src="foo.jpg" />
  <img src="lupe.gif" />
</a>

 

[Maik]

Hi,

ohne eine der genannten Positionierungsarten wirst du wohl nicht zum "optimalen" Ziel gelangen.

mfg Maik

 

[php-kopfkratzer]

Danke euch beiden. Ich Dussel hatte anstatt margin-top den top wert genommen. Passt jetzt.

Gruss
Pk

 

[Maik]

@ZodiacXP: Mich würde jetzt nur noch interessieren, in welchem deiner genutzten Browser dein Stylesheet zu 100% funktioniert?

Bei mir haut es nämlich so in keinem Browser hin.

mfg Maik

 

[php-kopfkratzer]

@ZodiacXP: Mich würde jetzt nur noch interessieren, in welchem deiner genutzten Browser dein Stylesheet zu 100% funktioniert?

Bei mir haut es nämlich so in keinem Browser hin.

mfg Maik

bei mir auch nicht...

 

[ZodiacXP]

Funktionierte auf die schnelle im FF 3.0.1 Win (Screenshot - "Lupe" hat noch ein border).
IE machte natürlich wieder zicken, von daher:

<style type="text/css">
  a .img {
    float : left;
    border : 0;
  }
  a .lupe {
    border : 0;
    margin-left : -10px; // mein Bild ist 10x10
    padding-top: -70px;  // das große hat 82x80
  }
</style>
<a href="groesser.htm">
  <img src="logo_bck.png" class="img" />
  <img src="no-arrow.gif" class="lupe" />
</a>

EDIT: Pixelangaben müsst man bisschen anpassen