Verkauft Bild über ein Bild legen und dann noch nen Hintergrund?

J

jack-x

New member
Hallo,

auf > dieser Seite < soll ein gif über ein Produktbild gelegt werden, wenn es als Verkauft markiert wurde. Da alles mögliche an Seitenverhältnissen der Produktbilder hochgeladen werden könnte, soll hinter das Bild ein grauer Hintergrund.
Am Anfang der Auflistung habe ich im Moment ein Beispielbild drin, das zeigt, das der div mit dem sold hinter dem Produktbild liegt.

So, wie kriege ich jetzt aber das transparente gif über das Produktbild?

Zur Zeit lasse ich dann folgendes generieren:
HTML: 
<div class="sold"><div style="position:relative;z-index:80;width:80px;height:60px;overflow:hidden;background:#C3C3CB;"><a href="javascript:Expose('','13');"><img src="/images_cms/art0000094.jpg"  width="80" border="0"></a></div></div>

Die Klasse sold ist so hinterlegt:
HTML: 
.sold { 
  position:relative; z-index: 100; width:80px; height:60px;
  background:url(../images_cms/sold_00002.jpg);
  }

Das Bild /images_cms/art0000094.jpg ist nicht als Thumbnail hinterlegt. Es wird von 300 Breite auf die 80 runtergezogen.

Ach ja, noch eine ander Frage:

Wie bekomme ich es hin, das der Link von einem besuchten Produktexpose andersfarbig dargestellt wird?
Im Stylsheet ist ein entsprechendes :visited hinterlegt. Nur muß sich die Farbe ändern, wenn auf eine der drei Aufrufmöglichkeiten geklickt wird. Produkttitel, mehr Infos und Bild.
 
Habe das mit dem Bild und Verkauftbild und Hintergrundfarbe jetzt mal hinbekommen.
In den Produktexposes ist das Produktbild jetzte auch ein Hintergrundbild mit einem Verkauft-Bild davor. Nur wenn ich das Expose anzeigen lassem ist das Produktbild nach unten verschoben im IE. Im Firefox wird es mir schön brav zentriert angezeigt.

Hier ein Beispiel dazu

Was hab ich denn hier noch für einen Denkfehler???

Code: 
<div name="zoom_pic" id="zoom_pic" style="position:relative;z-index:90;width:300px;height:225px;overflow:hidden;background:url(../images_cms/art0000094.jpg) no-repeat center center;">
  <div class="sold">
    <img src="/images/layout/spacer.gif" width="300" heigth="225">
  </div>
</div>
 
jack-x schrieb:
Was hab ich denn hier noch für einen Denkfehler???

Code: 
<div name="zoom_pic" id="zoom_pic" style="position:relative;z-index:90;width:300px;height:225px;overflow:hidden;background:url(../images_cms/art0000094.jpg) no-repeat center center;">
  <div class="sold">
    <img src="/images/layout/spacer.gif" width="300" heigth="225">
  </div>
</div>
Zum Vergrößern anklicken....
Ursache der Verschiebung, die im IE ja im Gegensatz zur Opera-Darstellung noch zivilisiert aussieht, ist die Eigenschaft z-index. Erklärung bei SELFHTML unter "Beachten Sie".
 
Am z-index kann es weniger liegen, er bestimmt doch nur die Reihenfolge. habe den z-index auch mal rausgenommen. Keine Veränderung. Die Reihenfolge der <div>s kann ich ja nicht ändern, da sonst das transparente Verkauft-Bild unter dem Produkt-Bild liegt.
In der Artikelauflistung klappt es ja. Bzw. da wird das Bild mit einem php-Script verkleinert.

Hier wäre die Auflistung
 
Hab mir die Seite nochmal angesehen. Am z-index liegt es nicht, wie Du schon festgestellt hast.
Die Darstellung im IE7 und FF2 wird identisch, wenn Du die Angabe center center nach no-repeat wegnimmst. Das es das jedoch auch nicht wirklich sein kann, zeigt sich darin, dass Opera immer noch erhebliche Probleme macht.

Übrigens auch bei der von Dir als korrekt angegebenen Auflistung:

Opera.jpg

Vielleicht setzt Du auch mal hier an: Fehlerliste.
Erfahrungsgemäß ist eine standardkonforme Programmierung bei einer ordentlichen Crossbrowser-Darstellung hilfreich.
 
Außer dem "z bei" Benz helfen zunächst auch prozentuale Angaben, also "no-repeat 50% 6%", Angaben dazu hier - ändert aber noch nichts an der katastrophalen Opera-Darstellung.
 
Guter Tipp, ein schlauer, leider ist mit dem korrekten Doctype

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
für eine ordentliche Opera-Darstellung immer noch nichts gewonnen.
 
Sobad irgeneine Positionierungsangabe im style kommt, sitzt das produktbild nicht da wo es sein soll. Ist halt nicht zu ändern.
So den Opera habe ich mir jetzt doch auch mal installiert. Die laaaaaaaaange Leiste mit den Vorschaubildern passt jetzt auch wieder. Ist der pinibel. nur weil ich das Bild automatisch auf ne bestimmte Höhe verkleiner lassen, stellt der Platz für die volle, normale Breite des Bilder zur Verfügung in der Tabelle.

Validome ist ja net nette Seite, aber seit wann ist alt ne Pflichtangabe?
Und die <br /> entstehen durch den php-befehl nl2br. Soll ich etwa noch nen str_replace drumbauen???
 
jack-x schrieb:
Validome ist ja net nette Seite, aber seit wann ist alt ne Pflichtangabe?
Und die <br /> entstehen durch den php-befehl nl2br. Soll ich etwa noch nen str_replace drumbauen???
Zum Vergrößern anklicken....
Alt ist schon lange Pflichtangabe siehe SELFHTML unter Erläuterungen.
[Edit]Habe hier ein W3C-Dokument von Mai 1999 gefunden.[/Edit]

Du schreibst die Seiten in HTML. Da darf der <br>-Tag keinen schließenden Slash haben.
Validome ist eine genauso nette Seite wie der Validator von W3C. Wobei ersterer es noch genauer den festgesetzten Richtlinien entsprechend nimmt, was schlappe 20 Fehler Unterschied in diesem Fall ausmacht. Auf den Punkt gebracht: Du hast hier noch einiges an Arbeit vor Dir.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben