Ergebnis 1 bis 4 von 4

Thema: Ich verzweifele an meiner Fotoshow mit CSS

  1. #1
    HTML Newbie
    Registriert seit
    30.03.2019
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage Ich verzweifele an meiner Fotoshow mit CSS

    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-Code:
    <!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-Code:
    <!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>
    Geändert von Arne Drews (30.03.2019 um 21:02 Uhr) Grund: MOD: Code-Tags eingefügt

  2. #2
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    239
    Danke
    0
    Bekam 31 mal "Danke" in 31 Postings

    Standard AW: Ich verzweifele an meiner Fotoshow mit CSS

    das das so nicht geht liegt ja daran das der <label> da ja der parent ist und sich das Bild daran ausrichtet. In der anordnung von deinen html ist das ohne JS eigentlich nicht bis kaum möglich.
    Ich würde das html etwas anders aufbauen damit es ohne JS und ohne fusch geht.

    Mit Fusch könnte man es so machen https://codepen.io/basti1012/pen/pBoxvd?editors=1000
    nur die Lösung finde ich selber nicht schön.Wenn ich später zuhause bin und bis dahin noch keine andere Lösung gepostet wurde mache ich mal nee bessere Lösung

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    30.03.2019
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Ich verzweifele an meiner Fotoshow mit CSS

    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.

  4. #4
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    491
    Danke
    0
    Bekam 54 mal "Danke" in 54 Postings

    Standard AW: Ich verzweifele an meiner Fotoshow mit CSS

    So sollte es gehen. So als Notlösung.
    Code:
    input[type="checkbox"].zoom:checked ~ img {
        transform: scale(4.0, 4.0);
        cursor: zoom-out;
     margin:auto;
     position:absolute;
     top:0;
     bottom:0;
     left:0;
     right:0;
    }
    Zum Testen habe ich den iFrame auf 100% height und width gestellt. Sieht besser aus.
    @edit: Basti hat ja die gleiche Idee gehabt. Mit margin:auto gehts aber etwas besser.
    Geändert von djheke (03.04.2019 um 21:38 Uhr)

Ähnliche Themen

  1. problem mit meiner mum...
    Von Shane im Forum Off Topic und Quasselbox
    Antworten: 2
    Letzter Beitrag: 22.08.2007, 15:22
  2. fotoshow
    Von Klinisch_tot im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 29.05.2006, 20:06
  3. Kommentare zu meiner Hp
    Von Alex aus Meerbusch im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 5
    Letzter Beitrag: 23.09.2005, 14:24
  4. Meiner erste HP
    Von im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 8
    Letzter Beitrag: 30.01.2005, 11:27
  5. Problem mit meiner Hp
    Von Darkness im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 18.07.2004, 21:18

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •