Danke basti1012,
es sieht zwar schon anders aus aber noch nicht ganz so wie ich es gern hätte. Die Positionierung ist immer gleich, auch dann wenn ich in der letzten "Zeile" ein Bild auswähle - das Original liegt außerhalb und ist nicht zu sehen.
Wie es aussieht, bin ich mit dem Lösungsansatz von Werner Zenk auf dem Holzweg.
Beiträge von Max Boehm
-
-
Hallo Freunde. Bisher habe ich meine Fotoshows jahrelang immer im gleichen, alten Stil produziert (als Rentner verlasse ich eben ungern eingefahrene Wege). Jetzt sollen diese etwas moderne werden. Beim Anclicken eines Fotos in der Übersicht (4 Spalten, n Zeilen) soll dieses vergrößert und ZENTRIERT angezeigt werden. Eigentlich einfach. Aber das Zentrieren wird nicht auf der Seite, sondern immer nur über dem ausgewählten Bild ausgeführt. Ich finde einfach keine Lösung. Hier meine 2 HTML-Dateien: DiaShow.html ruft die Zusammenstellung Fotoblock.html mit den wenigen CSS-Funktionen auf. Was fehlt darin? Was mache ich falsch? Vielleicht könnt ihr mir helfen. DANKE.
DiaShow.html:
HTML
Alles anzeigen<!DOCTYPE> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>DiaShow.html</title> <meta name="language" content="de"> </head> <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" bgcolor="#333300" text="#003300" link="#003300" vlink="#003300" alink="#003300"> <iframe height="450" width="800" src="Fotoblock.html" align="left" frameborder="0"></iframe> </body> </html>Fotoblock.html:
HTML
Alles anzeigen<!DOCTYPE> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Fotoblock.html</title> <meta name="language" content="de"> <style> input[type='checkbox'].zoom { display: None; } input[type='checkbox'].zoom ~ img { transition: transform 0.5s; cursor: zoom-in; } input[type='checkbox'].zoom:checked ~ img { transform: scale(4.0, 4.0); cursor: zoom-out; } </style> </head> <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" bgcolor="#333300"> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/01.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/02.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/03.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/04.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/05.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/06.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/07.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/08.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/09.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/10.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/11.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/12.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/13.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/14.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/15.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/16.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/17.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/18.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/19.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/20.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/21.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/22.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/23.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/24.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/25.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/26.jpg" width="192" height="110"></label> </body> </html>