Bild vergrössern (ehemals mit CSS)

Lösung?

Hallo,

bin heute nochmals 5 Stunden dran gesessen und hab ne Lösung gefunden!
Allerdings funktioniert das ganze nur im Mozilla im Explorer macht es doch Probleme.
Ich weiss allerdings nicht warum?

Hat jemand ne Ahnung wo der Fehler steckt?

CSS
<style type="text/css">

span.BildG { display:none; }
span.BildGG { display:block; }
div.Bilder a:hover span.BildG { display:block;}

</style>
Zum Vergrößern anklicken....

Code
......$res = mysql_query($sqlab);
while ($zeile = mysql_fetch_assoc($res))
echo '
<div class="Bilder" style="width:140px; height:90px; position:absolute; left:389px; top:6px; z-index:1;">
<a href="#"><img src="kundenverwaltung/'.$zeile['kundennummer'].'/bild1.jpg" height="75" border="2"><span class="BildGG"><div class="layer1a" style="background-color:#FEF08D; width:335px; height:210px; position:absolute; left:-349px; top:0px; z-index:1;"><img src="kundenverwaltung/'.$zeile['kundennummer'].'/bild1.jpg" height="200" border="2"></div></span></a>
</div>

<div class="Bilder" style="width:140px; height:90px; position:absolute; left:568px; top:6px; z-index:1;">
<a href="#"><img src="kundenverwaltung/'.$zeile['kundennummer'].'/bild2.jpg" height="75" border="2"><span class="BildG"><div class="layer1b" style="background-color:#FEF08D; width:335px; height:210px; position:absolute; left:-528px; top:0px; z-index:1;"><img src="kundenverwaltung/'.$zeile['kundennummer'].'/bild2.jpg" height="200" border="2"></div></span></a>
</div>

<div class="Bilder" style="width:140px; height:90px; position:absolute; left:389px; top:110px; z-index:1;">
<a href="#"><img src="kundenverwaltung/'.$zeile['kundennummer'].'/bild3.jpg" height="75" border="2"><span class="BildG"><div class="layer1c" style="background-color:#FEF08D; width:335px; height:210px; position:absolute; left:-349px; top:-104px; z-index:1;"><img src="kundenverwaltung/'.$zeile['kundennummer'].'/bild3.jpg" height="200" border="2"></div></a>
</div>

<div class="Bilder" style="width:140px; height:90px; position:absolute; left:568px; top:110px; z-index:1;">
<a href="#"><img src="kundenverwaltung/'.$zeile['kundennummer'].'/bild4.jpg" height="75" border="2"><span class="BildG"><div class="layer1d" style="background-color:#FEF08D; width:335px; height:210px; position:absolute; left:-528px; top:-104px; z-index:1;"><img src="kundenverwaltung/'.$zeile['kundennummer'].'/bild4.jpg" height="200" border="2"></div></a>
</div>';



?>
</div>
<div id="layer8" style="te......
Zum Vergrößern anklicken....


Oder einfach anschauen: Link zur Testseite


Vielen Dank
 
Abend!

Nice, sobald mir jemand erklärt wie um alles in der Welt das mit den Bildern jetzt funktioniert, kann ich aufhören in den Tisch zu beißen... Nein, ehrlich - wieso jetzt auf einmal mit <img>, nicht mehr mit CSS? Und warum nicht gleich so? Egal, freut mich das es klappt.

Im IE 6/7 sehe ich nur, dass die Elemente ab dem 4. kleinen Bild nicht mehr gerendert werden - das kann viele Gründe haben. Doch bevor ich jetzt die übliche Anti-Microsoft-Tirade vom Stapel lasse, schau Dir doch erstmal das Ergebnis der Validierung Deiner Seite an: http://validator.w3.org

Greetz
Enum
 
Zuletzt bearbeitet:
Das ist es ja...

im Explorer geht es nicht, das hast du richtig erkannt.
-schau es dir doch mal im mozilla an, da geht es!!
 
Hi,

in einer CSS-Datei hat

Code: 
<style type="text/css">

...

</style>

nichts zu suchen.

Desweiteren darf ein Inline-Element (<span>) kein Block-Element (<div>) in sich aufnehmen.

mfg Maik
 
Die Ursache für den "Abbruch des Seitenaufbaus" in allen IE-Versionen sind die die fehlenden </span>-Tags für die letzten beiden Bilder:

Code: 
<div class="Bilder" style="width:140px; height:90px; position:absolute; left:389px; top:110px; z-index:1;">
<a href="#"><img src="kundenverwaltung/1662/bild3.jpg"  height="75" border="2"><span class="BildG"><div class="layer1c" style="background-color:#FEF08D; width:335px; height:210px; position:absolute; left:-349px; top:-104px; "><img src="kundenverwaltung/1662/bild3.jpg"  height="200" border="2"></div></span></a>
</div>

<div class="Bilder" style="width:140px; height:90px; position:absolute; left:568px; top:110px; z-index:1;">
<a href="#"><img src="kundenverwaltung/1662/bild4.jpg"  height="75" border="2"><span class="BildG"><div class="layer1d" style="background-color:#FEF08D; width:335px; height:210px; position:absolute; left:-528px; top:-104px;"><img src="kundenverwaltung/1662/bild4.jpg"  height="200" border="2"></div></span></a>
</div>


mfg Maik


//edit: Mit dem <style> ... </style>-Tag wird ausschliesslich in HTML im Dokumentheader einer Website ein zentrales Inline-Style ausgezeichnet ;)
 
Ok,

ich werde es morgen früh dann mal mit den "/span" versuchen... hab heute nur noch lustige Zeichen auf dem Schirm gesehen...

Danke für die Hilfe.

Das mit den "style" und so manch anderes (du weisst was ich meine) werd ich mir auch zu Herzen nehmen.



Grüsse Sandro
 
Das Markup deiner Bildergalerie (innerhalb #layer3) liesse sich mit meinen eingangs empfohlenen Links soweit auf ein Mindestmaß reduzieren, als dass in jedem Block das doppelt vorhandene <img>-Tag mit derselben Grafik-Resource überhaupt nicht doppelt aufgerufen werden muß.

Ein paar wenige CSS-Regeln mehr, schon wird der HTML-Code in dieser Passage deutlich schlanker, und du siehst weniger lustige Zeichen auf dem Monitor :)

mfg Maik
 
Ah...

schaut schon besser aus!
Nur der Mouse-Over geht im Explorer 6.0. noch nicht... :confused:

Liegt das an der maroden Technik? Oder an dem Maroden Code von mir?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück