Bildergalerie html

[winwi]

Hi und hallo,
vielleicht kann mir hier wer helfen. Ich möchte unbedingt eine Bildergalerie wie die obere, also dass die Bilder jeweils nur einen Ausschnitt und einen so schicken Rahmen enthalten

Und nebenbei: Mit <div> wird es wohl nicht gehen, sondern nur per <table>, richtig?

Vielen Dank!

 

[theHacker]

Und nebenbei: Mit <div> wird es wohl nicht gehen, sondern nur per <table>, richtig?

Falsche Frage! Siehst du auf deinen Screenshots Tabellen? Nein? Also wird auch kein <table>-Tag gebraucht. Wie etwas aussieht, entscheidet allein das CSS, nicht, welches Tag du einsetzt. Das Tag wird durch den Inhalt vorgegeben: Textabsatz, Aufzählung, Adresse, Codeabschnitt, Tabelle, Überschrift, ...

Hi und hallo,
vielleicht kann mir hier wer helfen. Ich möchte unbedingt eine Bildergalerie wie die obere, also dass die Bilder jeweils nur einen Ausschnitt und einen so schicken Rahmen enthalten

Der Rahmen geht mit border und padding (da ja noch n bissle Abstand da is). Das Abschnibbeln kannst du erreichen, indem du mit

overflow: hidden

und fester Breite und Höhe arbeitest.

Ich möcht dich nur warnen, wenn du das mit hunderten UHQ-Bildern machst, dass der Otto-Normal-Verbraucher schneller den Tab wieder schließt, als dein Server auch nur 10 Bilder schicken kann. Du musst zwar nicht mehr mit Modem-Usern rechnen, aber die hohe Bildauflösung heute gleich das wieder aus.
Unbedingt solltest du nicht die Originalbilder per Rendering beschneiden, sondern serverseitig schon Thumbnails präpariert haben. Warum soll der Besucher 3,4 GiB (examplarisch für ~7 MiB/Bild, bei 500 Bildern auf der Seite) runterladen, wenns auch mit 4,9 MiB (~ 10 KiB/Bild) geht?

Zum Vergleich (DSL 3000): 21' 46'' vs. 1,8''
Die 2 Sekunden würde ich warten, die halbe Stunde sicher nicht

Infos:
https://de.selfhtml.org/css/eigenschaften/rahmen.htm
https://de.selfhtml.org/css/eigenschaften/innenabstand.htm
https://de.selfhtml.org/css/eigenschaften/positionierung.htm

 

[winwi]

Oh, danke für diese ausführliche Antwort, hat mir sehr geholfen

War schon fast am Verzweifeln

Danke danke und mit freundlichem Gruß aus Bremen,

Bernd

 

[baserider]

overfloat: hidden

Das gibt es nicht. Es heißt overflow: hidden;

Davon abgesehen würde ich (wie du schon weiter oben geschrieben hast) eh gleich große Thumbnails nehmen, womit sich die Verwendung von overflow dann erübrigt.

 

[theHacker]

Thx. Mir is das Wort schon so komisch vorgekommen, doch ich hab den Fehler nicht bemerkt

 

[baserider]

kein Thema