Sturmverliebt: Bilder anordnen

Ich möchte gerne mehrere Bilder wie auf einer Fotowand anordnen (siehe Bild) bis jetzt habe ich drei MySQL-Abfragen drin (links – mitte – rechts). Beim eintragen muss ich ständig aufpassen was ich gewählt habe. Da die Bilder in Zukunft direkt durch Freunde hochgeladen werden ist dieses vorhandene System nicht weiter nutzbar.

Mir ist nun die Idee gekommen vielleicht geht diese Anordnung auch via CSS ohne großen Aufwand?

http://www.bilder-upload.eu/upload/9207e3-1407393681.jpg

(Das Bild wird laut Anbieter nach 50 Tagen automatisch gelöscht darauf hab ich keinen Einfluss)

  1. Hallo,

    was verstehst du unter "ohne großen Aufwand"?

    Und benutzt du aktuelles HTML5 / CSS3 oder kommst du damit nicht zurecht?

    Für welche Brower soll die Lösung funktionieren?

    Gruss

    MrMurphy

    1. Hi MrMurphy,

      was verstehst du unter "ohne großen Aufwand"?

      Damit meine ich dass ich jetzt nicht hunderte von Zielen CSS Code schreibe will um nur die Bilder anzuordnen. Meine Überlegung war einfach jedes Bild in ein DIV zu packen und die zu floten. Würde auch gehen aber dann habe ich einen Abstand nach unten der sich am größten Bild orientiert, damit bekomme ich diese Anordnung wie auf dem Bild nicht hin.

      Und benutzt du aktuelles HTML5 / CSS3 oder kommst du damit nicht zurecht?

      Gerne auch mit HTML5 und CSS3. Viel Erfahrung habe ich damit noch nicht.

      Für welche Brower soll die Lösung funktionieren?

      Browser  sehr gute Frage. Die Leute die ich kenne haben Windows 7 / 8 / 8.1. Also gehe ich davon aus dass die zum Teil alle aktuelle Browser haben.

      1. Hallo,

        dann biete ich dir als Lösung Flexbox an. Das entscheidende CSS lautet schlicht

          
           @media all {  
              article {  
                 display: -webkit-box;  
                 display: -webkit-flex;  
                 display: -ms-flexbox;  
                 display: flex;  
              }  
              section {  
                 padding-left: 0.5rem;  
                 padding-right: 0.5rem;  
                 -webkit-flex-basis: 33.33%;  
                 -ms-flex-preferred-size: 33.33%;  
                 flex-basis: 33.33%;  
              }  
              img {  
                 display: block;  
                 margin-bottom: 1rem;  
              }  
           }  
           @media only screen and (max-width: 500px) {  
              article {  
                 display: block;  
              }  
              section {  
                 padding-left: 0.5rem;  
                 padding-right: 0.5rem;  
                 width: 100%;  
              }  
           }  
          
        
        

        Soweit ich verstanden habe kommt es dir darauf an, das die Bilder ohne weitere Beschreibung untereinander angeordnet sind. Deshalb habe ich mal eine Beispielseite mit verschieden großen Bildern erstellt und zur Info auch gleich etwas Responsive Design (bei unter 500px Fensterbreite) eingebaut.

        Und lass bloß die unnötigen DIVs weg.

        http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_07_sturmverliebt_01_bilder_dreispaltig.html

        Gruss

        MrMurphy

        1. Hallo MrMurphy,

          dann biete ich dir als Lösung Flexbox an. Das entscheidende CSS lautet schlicht

          @media all {
                article {
                   display: -webkit-box;
                   display: -webkit-flex;
                   display: -ms-flexbox;
                   display: flex;
                }
                section {
                   padding-left: 0.5rem;
                   padding-right: 0.5rem;
                   -webkit-flex-basis: 33.33%;
                   -ms-flex-preferred-size: 33.33%;
                   flex-basis: 33.33%;
                }
                img {
                   display: block;
                   margin-bottom: 1rem;
                }
             }
             @media only screen and (max-width: 500px) {
                article {
                   display: block;
                }
                section {
                   padding-left: 0.5rem;
                   padding-right: 0.5rem;
                   width: 100%;
                }
             }

            
          Vielen vielen  Dank! Genau so habe ich mir das vorgestellt.  
            
          
          > Soweit ich verstanden habe kommt es dir darauf an, das die Bilder ohne weitere Beschreibung untereinander angeordnet sind. Deshalb habe ich mal eine Beispielseite mit verschieden großen Bildern erstellt und zur Info auch gleich etwas Responsive Design (bei unter 500px Fensterbreite) eingebaut.  
            
          Genau die Bilder haben kein Beschreibung bzw. doch die haben eine Beschreibung diese wird an einer anderen Stelle platziert. Der Aufbau sieht so aus:  
            
          - Titel  
          - Beschreibung  
          - Bilder  
            
          Wenn später das ganze responsiv werden soll habe ich die Möglichkeit die Beschreibung z.B. auszublenden oder an einer ganz anderen Stelle (unten) anzeigen zu lassen. Aber soweit bin ich noch lange nicht.  
            
            
          
          > Und lass bloß die unnötigen DIVs weg.  
            
          Ich bin auch kein Freund davon zick DIVs zu nehmen. Vor allem es macht sau viel Arbeit zu stylen usw..
          
          1. Hallo,

            eine weitere Möglichkeit wäre Multicolumn.

            Der Browser ordnet die Bilder dann selbst passend in den Spalten an. Ich habe damit mal ein Responsive Design von vier über drei zu zwei und einer Spalte erstellt:

            http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_07_sturmverliebt_02_bilder_dreispaltig.html

            Gruss

            MrMurphy

            1. Hallo

              eine weitere Möglichkeit wäre Multicolumn.

              Der Browser ordnet die Bilder dann selbst passend in den Spalten an. Ich habe damit mal ein Responsive Design von vier über drei zu zwei und einer Spalte erstellt:

              http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_07_sturmverliebt_02_bilder_dreispaltig.html

              Wobei dabei die gegenüber deiner ersten Lösung geänderte Reihenfolge der Bilder im HTML-Quelltext zu beachten ist (so das relevant ist).

              Tschö, Auge

              --
              Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
              Terry Pratchett, "Wachen! Wachen!"
              ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
              Veranstaltungsdatenbank Vdb 0.3
              1. Hallo

                Wobei dabei die gegenüber deiner ersten Lösung geänderte Reihenfolge der Bilder im HTML-Quelltext zu beachten ist (so das relevant ist).

                Ich nehme alles zurück und behaupte das Gegenteil. Die reihenfolge ist natürlich die Gleiche. Ich bin bei deinem Flexbox-Beispiel falscher Weise von einer horizontalen Sortierung ausgegangen.

                Tschö, Auge

                --
                Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                Terry Pratchett, "Wachen! Wachen!"
                ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
                Veranstaltungsdatenbank Vdb 0.3
                1. Hallo Auge,

                  Ich nehme alles zurück und behaupte das Gegenteil. Die reihenfolge ist natürlich die Gleiche. Ich bin bei deinem Flexbox-Beispiel falscher Weise von einer horizontalen Sortierung ausgegangen.

                  Auf die Sortierung kommt es mir erstmal nicht an. Im schlimmsten Fall könnte ich doch in der Datenbank ein weiteres Feld hinzufügen „ordnung“ und dem jeweiligen Bild eine Zahl geben, somit kann MySQL selber sortieren?

            2. Hallo MrMurphy,

              eine weitere Möglichkeit wäre Multicolumn.

              Der Browser ordnet die Bilder dann selbst passend in den Spalten an. Ich habe damit mal ein Responsive Design von vier über drei zu zwei und einer Spalte erstellt:

              http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_07_sturmverliebt_02_bilder_dreispaltig.html

              Vielen Dank auch für dieses Beispiel. Ehrlich gesagt gefällt mir dieses hier fast besser da alle Bilder einfach untereinander angeordnet sind und ich mir nicht überlegen muss wie ich immer drei Bilder in eine <section> bekommen muss wie du es ja im ersten Beispiel gemacht hast.

              Allerdings finde ich in deinem ersten Beispiel die Bilder von der Darstellung schöner. Auch laufen die etwas flüssiger wenn ich das Fenster groß / klein ziehe.

              Gibt es vor und Nachteile zwischen diesen beiden Beispiele außer eben das zusammenfassen der Bilder?

              1. Hallo

                Allerdings finde ich in deinem ersten Beispiel die Bilder von der Darstellung schöner. Auch laufen die etwas flüssiger wenn ich das Fenster groß / klein ziehe.

                Machst du die Seite für dich oder für eine Besucher? Wie viele Seiten hast du schon besucht, dann erst mal die Fenstergröße verändert und danach entschieden, ob die Seite gut oder schlecht ist? Das ist doch nur eine Kontrolle für dich wie deine Seite bei unterschiedlichen Fensterbreiten funktioniert und angezeigt wird.

                Gibt es vor und Nachteile zwischen diesen beiden Beispiele außer eben das zusammenfassen der Bilder?

                Das kommt auf den Rest deiner Seite an und du musst es im Endeffekt selbst entscheiden.

                Beide Lösungen sollten mit aktuellen und auch leicht veralteten Browsern funktionieren.

                Meine Multicolumn-Seite zickt im Moment beim Chrome und beim Opera etwas rum. Mit Text funktioniert die selbe Seite einwandfrei.

                http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_07_sturmverliebt_03_bilder_dreispaltig.html

                Aber solche Probleme kommen immer wieder mal vor und sind das täglich Brot von Webseitenerstellern. Wenn du dich für die Multicolunm-Lösung entscheidest musst du halt etwas rumexperimentieren oder im Internet nach Lösungen suchen. Das müsste ich jetzt genau so machen.

                Gruss

                MrMurphy

          2. Hallo

            Soweit ich verstanden habe kommt es dir darauf an, das die Bilder ohne weitere Beschreibung untereinander angeordnet sind. Deshalb habe ich mal eine Beispielseite mit verschieden großen Bildern erstellt und zur Info auch gleich etwas Responsive Design (bei unter 500px Fensterbreite) eingebaut.

            Genau die Bilder haben kein Beschreibung bzw. doch die haben eine Beschreibung diese wird an einer anderen Stelle platziert.

            Die Beschreibung vom Bild, zu dem sie gehört, zu trennen, halte ich persönlich für ungünstig. Aber selbst, wenn du das (wieder) zusammenführen solltest, gibt es eine um Längen bessere Alternative zu divs.

            <figure>  
            <img src="/pfad/zum/bild.gng" alt="Das beschriebene Bild" />  
            <figcaption>Des Bildes Beschreibung.</figcaption>  
            </figure>
            

            Wenn später das ganze responsiv werden soll habe ich die Möglichkeit die Beschreibung z.B. auszublenden oder an einer ganz anderen Stelle (unten) anzeigen zu lassen. Aber soweit bin ich noch lange nicht.

            Das geht mit figcaption statt div natürlich auch. ImZweifelsfall auch ohne Klassen oder IDs.

            Tschö, Auge

            --
            Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
            Terry Pratchett, "Wachen! Wachen!"
            ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
            Veranstaltungsdatenbank Vdb 0.3
            1. Hallo Auge,

              Die Beschreibung vom Bild, zu dem sie gehört, zu trennen, halte ich persönlich für ungünstig. Aber selbst, wenn du das (wieder) zusammenführen solltest, gibt es eine um Längen bessere Alternative zu divs.

              Hab mich wohl etwas falsch ausgedrückt, die ganze Galerie bekommt einen Titel und eine Beschreibung und _nicht_ jedes einzelne Bild.

          3. Hi,

            Ich bin auch kein Freund davon zick DIVs zu nehmen.

            jaja, manchmal sind die DIVs so richtig zickig ;-)

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            O o ostern ...
            Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
  2. Hallo,

    hab heute den ganzen Tag an meinen Bildern gesessen. Nun bin ich so weit dass ich zwei Versionen anbiete. Zum einen diese von MrMurphy und eine weitere die derzeit so aussieht

    http://www.bilder-upload.eu/upload/752bea-1407428055.png

    mein HTML und CSS dazu

      
    .photobook_links {  
    	width:410px;  
    	float:left;  
    }  
      
    .photobook_rechts {  
    	float:left;  
    	width:375px;  
    }  
      
    .photobook_rechts img:nth-child(4n) {  
            padding-right: 0;  
    }  
      
    .photobook_rechts img {  
    	padding-right:15px;  
    	padding-bottom:15px;  
    }  
    
    
      
            <div id="photobook">  
      
                <div class="photobook_links">  
    	       <img src="photos/sturmverliebt/bild4.jpg" width="375" height="563">  
                </div>  
      
                <div class="photobook_rechts">  
                  <img src="photos/sturmverliebt/klein.jpg">  
                  <img src="photos/sturmverliebt/klein.jpg">  
                  <img src="photos/sturmverliebt/klein.jpg">  
                  <img src="photos/sturmverliebt/klein.jpg">  
                  <img src="photos/sturmverliebt/klein.jpg">  
                  <img src="photos/sturmverliebt/klein.jpg">  
                  <img src="photos/sturmverliebt/klein.jpg">  
                  <img src="photos/sturmverliebt/klein.jpg">  
                  <img src="photos/sturmverliebt/klein.jpg">  
                </div>  
      
          </div>  
    
    

    Nun habe ich dazu eine Frage, wenn ich rechts auf ein kleines Bild klicke bzw. mit der Maus darüber fahre, wie kann ich erreichen dass ich links das Bild in groß sehe? Sehe diesen Effekt zwar öfters mal hab aber ehrlich gesagt keine Ahnung wie ich das umsetzten könnte. Geht da etwas mit jQuery dass ich einen schönen Übergang drin habe oder sogar mit CSS3?

    1. Hallo,

      hab mal etwas versucht und dieses ist dabei heraus gekommen

        
      <img src="photos/sturmverliebt/a1.jpg" width="80" onmouseOver="document.bild.src='photos/sturmverliebt/bild5.jpg'" onMouseOut="document.bild.src='photos/sturmverliebt/bild4.jpg'">  
      
      

      Der Grundaufbau ist von hier Meine Frage ist nun, geht dieses etwas schöner und vielleicht mit jQuery dass ich eine schöne Animation habe bzw. mit CSS?