Matthias Scharwies: flexibles layout mit bildern

Beitrag lesen

Servus!

tachschön,

@matthias-> deinen ausführungen entnehme ich, dass du glaubst man kann genau dieses existierende layout so umstricken, dass es in seiner form bestehen bleibt und trotzdem die dynamik erhält die ich anstrebe. bisher bin ich davon ausgegangen, dass das nicht möglich ist...

Ja, ich glaube, d.h. ich weiß nicht, ob es genau so geht.

Ich würde die Bilder in eine Liste / mehrere Listen packen, in denen sie nebeneinander

#container {
    max-width: 880px; (lieber 55em, bei 16px Standardschriftgröße der Browser)
    z-index: 1;
}
li {
    display: inline;
    list-style-type: none;
}

dargestellt werden (ohne feste Position). Wenn die Zeile voll ist, bricht die Liste um und wird in der nächsten Zeile dargestellt. Durch die Anzahl der Listen/ Menge der Listenelemente kannst du die Anordnung bei 55em planen. Damit hast du die Ansicht für alle Desktops und Tablets im Landscape-Modus.

Bei kleineren Viewports würde die Listen anders umbrechen, d. h. das Design wäre erst mal weg. Ich würde dann versuchen, die Listen, bzw Bilder alle nebeneinander darzustellen. Das wäre immer noch besser als ein horizontaler Scrollbalken.

Versuch mal:

ul {
  display: inline;
}
 
@media (min-width: 32em)  {	
ul {
  display: block;
  }
}

die müssten sich doch dann "selbst" neu sortieren und schlißlich haben die thumbnails doch feste breiten...

Machen doch alle inline-Elemente; Wenn die Zeile voll ist, fangen sie in der nächsten Zeile an.

besteht dann trotzdem noch die möglichkeit, die "überlappung" der bilder aufrecht zu erhalten?

Das wäre ein Problem, evtl. mit negativen margins lösbar.

li {
  padding: 0;
  margin: -5px;
}

Für mich sehen die großen Fotos alle gleich aus

öhm, wie meinste das?

Auf den von mir verlinkten Design-Seiten sehen die Webseiten am besten aus, die aus einem großen Foto und sonst nichts oder nur 3 Links bestehen. Du bist Fotograf, hast also wsl. sogar solche Bilder, die Du verwenden könntest.

So was finde ich auch gut: Manuel Becker

Aber die typische Webseite einer Firma oder Schule (oder die Startseite des Wiki) benötigt m.E allerdings viel mehr Inhalt in Form von Text, Bildern und Links, sodass dort solche Konzepte mit großen Fotos m.E. nicht funktionieren.

wenn ich die möglichkeit hab mein uraltlayout aufrecht zu erhalten, werde ich das mal versuchen :)

danke nochmal schönentachnoch torsten

Herzliche Grüße

Matthias Scharwies

--
Es gibt viel zu tun - packen wir's an: ToDo-Liste gewünschte Seiten