Problem mit Galerie (Listendarstellung Hoch- & Querformat)

  • Hallo ich habe eine Galerie mit Hilfe einer Unsortierten Liste erstellt.

    Jetzt habe ich nur das Problem das wenn in der Galerie eine Mischung zwischen Bildern im Hoch- und Querformat vorliegt, das sich das Layout verschiebt.
    Da eine Beschreibung des Zustandes relativ umständlich wäre gibt hier einen LINK zum anschauen.

    Die Galerie ist wie folgt in der CSS-Datei definiert.

    Zwar habe ich Versucht die Listen Höhe mit einem "min-height" zu definieren, aber das gefällt mir nicht. Daher würde mich an dieser Stelle interessieren ob es eine andere, eine saubere Möglichkeit gibt, damit das Layout nicht derart verzerrt dargestellt wird.
    Ganz schön wäre es wenn sich die Bilder im Querformat, mittig neben den Hochformat Bildern anordnen. Nur fehlt mir hierzu die passende Idee. Und hoffe daher auf den einen oder anderen Tipp von Euch.

    MfG
    mephisto2k

  • du könntest entweder height oder width verwenden.
    mit height kannst du einen bereich festlegen, ab dem die neuen Bilder beginnen
    mit width kannst du eine Anzahl von Bildern in einer Reihe definieren.

    Eine andere Möglichkeit wäre sortieren.

    Something big is coming. And there will be pirates and ninjas and unicorns...

  • Eine alternative wäre natürlich auch alle Bilder in der Vorschau quadratisch darzustellen. Nur wäre das wieder enorm viel Arbeit... Ein Tool was die Bilder verkleinert und automatisiert beschneidet kenne ich leider nicht...

    Mit Tabellen zu arbeiten würde mir da wirklich vieles erleichtern. Nur nur bekommt man ja von allen Seiten geprügelt das Tabellen im Zusammenspiel mit CSS für das Layout ein absolutes no-go ist.

    Wie verhält es sich denn dabei mit den Galerien?

    MfG
    mephisto2k

  • Wer für Tabellen generell prügelt, hat keine Ahnung von ihrem Sinn und Zweck (und das sage ich jetzt als selbsternannter CSS-Fan).

    Tabellen dienen einer strukturierten Darstellung von Inhalt.
    Solche Bilder haben m.E. eine typische Tabellenstruktur, da sie in Zeilen/Spalten angeordnet sind. Warum also für diesen Fall keine Tabellen?

    Das von mir genannte Tool HomeGallery erstellt solche Galerien automatisch mit verkleinerten und vergrößerten Fotos.
    Das einzige was du machen musst, ist das Layout anzupassen und die zu verwendenden Fotos einfügen.
    Etwas komfortionöser ist Jalbum; hat mir persönlich aber zu viel Schnickschnack.


  • Tabellen dienen einer strukturierten Darstellung von Inhalt.
    Solche Bilder haben m.E. eine typische Tabellenstruktur, da sie in Zeilen/Spalten angeordnet sind. Warum also für diesen Fall keine Tabellen?

    sorry, aber das ist Unfug. ;)

    Tabellen dienen der Darstellung tabellarischer Daten und eine Bildergalerie gehört sicher nicht dazu.
    Mit deinem Argument könnte man auch wieder anfangen Websites mit Tabellen zu designen, weil die ja auch öfter mal in Zeilen/Spalten angeordnet sind

  • sorry, aber das ist Unfug. ;)

    Tabellen dienen der Darstellung tabellarischer Daten und eine Bildergalerie gehört sicher nicht dazu.
    Mit deinem Argument könnte man auch wieder anfangen Websites mit Tabellen zu designen, weil die ja auch öfter mal in Zeilen/Spalten angeordnet sind


    sorry, aber das ist Unfug. ;)

    Es ist eine Tabelle, also dient es dazu den Inhalt tabelarisch darzustellen, was fürn Inhalt es ist - ist dabei irrelevant.

  • sorry, aber das ist Unfug. ;)
    Es ist eine Tabelle, also dient es dazu den Inhalt tabelarisch darzustellen, was fürn Inhalt es ist - ist dabei irrelevant.

    Hast du mal bedacht das:
    Praktisch alle Bildergalerien die man entweder in Büchern oder im Internet findet sind als ungeordnete Liste ausgezeichnet.
    Warum wohl??

    Weil eine Galerie eine Aufzählung von Bildern ist.

    Die Gedankenkonstruktion daraus eine Tabelle zu machen, nur weil man grad keine andere Lösung zur Hand hat, ist schon ....äh.. ausgesprochen abenteuerlich.
    Da wäre ich ja im Leben nicht drauf gekommen, das so zu machen.

    Es würde auch helfen sich das Problem des Fragestellers einmal anzuschauen.
    Er schrieb folgendes:

    Hallo ich habe eine Galerie mit Hilfe einer Unsortierten Liste erstellt.
    Jetzt habe ich nur das Problem das wenn in der Galerie eine Mischung zwischen Bildern im Hoch- und Querformat vorliegt, das sich das Layout verschiebt.

    Wenn man sich dann noch den Link dazu anschaut und a weng mit Firebug guckt, sieht man schnell wo das Problem ist:
    Er hat eine einzige ul für alle Thumbs gemacht und dazu noch li mit Float auf die Reihe gebracht.

    Das funktioniert aber nur richtig wenn alle Bilder gleichgroß sind.

    Im vorliegenden Falle ist es das Einfachste dem kompletten Container ein text-align:center zu geben, vier ul's a drei Bilder zu machen und li ein display:inline; zu geben.
    Dann ist alles schön horizontal zentriert. Um die Abstände der Thumbs zu optimieren gibt es noch margin, evtl mit Klassen. ;)

  • Und damit hast du eine Tabelle mit CSS gebaut. Gratuliere :)
    Ändert nichts an der Tatsache, dass <table> für Tabelle steht und man damit eine tabellarische Darstellung ermöglicht. Wenn ich was in der Form angeordnet haben will, dann nehm ich gefälligst auch das, was dafür gemacht wurde!

    Ich packe meine <input> Felder auch nicht in eine Liste und begründe es mit "das ist eine Liste zum ausfüllen". Will man vielleicht, aber wenn ich es nicht wie eine Liste behandeln möchte (sondern nur n blödes Formular haben will) - dann mach ich da auch kein Schnickschnack rein... Zumindest müsst ich laut deiner Theorie jedes Anmeldeformular mit einer Liste wrappen.

  • Da habe ich ja was losgetreten...

    Schon mal Danke für Eure Kommentare. Und Danke koslowski für den Tipp mit der Liste.

    Jetzt Frage ich mich wirklich was sinnvoller, bzw. flexibler.
    Irgendwann in ferner Zukunft möchte ich, wenn V1.0 erst mal online ist die Seite auch für Smart-Phones wie das iPhone und co. optimieren.

    Mit dem Hinblick auf dieses Ziel, ich habe mir den Bereich Optimierung fürs Handy noch nicht angeschaut, was würde da mehr Sinn machen, Liste oder Tabelle?

    MfG
    mephisto2k

  • Hängt davon ab wie die Tabelle generiert wird. Wenn du sehr leicht die anzahl der einträge pro zeile einstellen kannst, ist ne tabelle hilfreich. Aber ne Liste kann man im gegensatz zu einer Tabelle auch mit CSS + Javascript abändern (wenn man die nötigen clear-placeholder hat) - sprich nach viewport des users.

  • Und damit hast du eine Tabelle mit CSS gebaut. Gratuliere :)
    Ändert nichts an der Tatsache, dass <table> für Tabelle steht und man damit eine tabellarische Darstellung ermöglicht. Wenn ich was in der Form angeordnet haben will, dann nehm ich gefälligst auch das, was dafür gemacht wurde!
    Ich packe meine <input> Felder auch nicht in eine Liste und begründe es mit "das ist eine Liste zum ausfüllen".

    sorry, aber du klingst wie ein bockiger Junge, der seine Suppe nicht essen will. :lol:

    Wie schon gesagt, schau vielleicht auch mal in moderne Fachbücher (Little Boxes z.B.) wie da Bildergalerien aufgebaut sind.

    Ach für Formulare nehme ich auch keine Tabellen. Wozu auch, ich hab ja genug Elemente, die ich problemlos gestalten kann (form, fieldset, label, input, etc.). Warum sollte ich da meinen Quelltext noch mit dem ganzen table-Kram aufblähen.

    Schade finde ich es für den Fragesteller, der deinen Unfug womöglich noch ernst nimmt.


    Mit dem Hinblick auf dieses Ziel, ich habe mir den Bereich Optimierung fürs Handy noch nicht angeschaut, was würde da mehr Sinn machen, Liste oder Tabelle?

    ich trau's mich kaum laut zu sagen :smilie105:nimm ne Liste

  • Nur weil es in einem Beispiel in nem Buch so gehandhabt wird, heißt es nicht das es eine vorgabe ist oder gar allgemeingültig besser ist. Es bleibt dabei, will man eine tabellarische Darstellung, gehörts eben in eine Tabelle. Diese Anti-Tabellen debatte kann ich nichtmehr hören... Mag sein, das eine Liste in so einem Fall Vorteile hat - aber eine Tabelle auch.

    Und btw., mich als bockigen Jungen hinzustellen, kannste dir sparen :)


  • Und btw., mich als bockigen Jungen hinzustellen, kannste dir sparen :)

    okay, hast recht, das spar ich mir. ;)

    Nur weil es in einem Beispiel in nem Buch so gehandhabt wird, heißt es nicht das es eine vorgabe ist oder gar allgemeingültig besser ist.

    Nur handhaben das praktisch alle Quellen so, außer vielleicht ältere Quellen.

    Es bleibt dabei, will man eine tabellarische Darstellung, gehörts eben in eine Tabelle.

    Das eine Tabelle aus Spalten, Zeilen und Zellen besteht, darüber herrscht Einigkeit denke ich.

    Für eine Tabelle gibt es im wesentlichen zwei Möglichkeiten:
    1.) In der ersten Zeile ( thead) stehen Angaben, die sich auf die Zellen der jeweils gleichen Spalte beziehen, z.B.:

    2.) In der ersten Zeile ( thead) stehen Angaben, die sich auf die Zellen der jeweils gleichen Spalte beziehen und die erste Spalte enthält Angaben, die sich auf die gleiche Zeile beziehen.
    Typisches Beispiel sind Tabellen von Sportvereinsseiten, wo in der ersten Spalte die Namen der Mitglieder stehen und in der ersten Zeile oben verschiedene Angaben, die sich die gleiche Spalte beziehen.

    Das ist bei einer Bildergalerie aber nicht der Fall. Es gibt keine erste Spalte oder erste Reihe wo sich der Inhalt auf die Angaben der gleichen Spalte oder Reihe beziehen.

    Die einzige Gemeinsamkeit ist, das es sich um Bilder handelt, die aber außer das es Bilder sind keinen gemeinsamen Bezugspunkt haben.
    Eine zufällige optische Gemeinsamkeit legt noch nicht nahe das es eine Tabelle sein muss.
    Eine Steinkugel legt vielleicht nahe das es sich um einen Fußball handelt, aber tritt mal davor, dann merkste den Unterschied. :D

    Hoffe ich habe mich einigermaßen verständlich ausgedrückt. :)