Bildler-Boxen gestalten

[Bernd]

Hallo,

wie würdet ihr am besten vorgehen wenn ihr so eine Box gestallten müsstest?

solche Boxen gibt mehrere.

Meine Idee

<section>
  <div>
   <h2>Ich bin ein Titel</h2>
	 <p>Created, March 25</p>
  </div>
	</section>

die Frage ist, wie kann ich den Pfeil auf der rechten Seite platzieren und wie würdet ihr die Bilder einbinden nur über ein <img>? Dann hätte ich aber ein Problem mit dem letzten, hier soll wenn es mehr als 6 Bilder gibt, eine extra Fläche eingebunden werden. Ich habe irgendwie überhaupt keine Idee.

[Matthias Apsel]

Hallo Bernd,

die Frage ist, wie kann ich den Pfeil auf der rechten Seite platzieren

Da der Pfeil ein Bedienelement ist, muss es wohl ein button sein.

Ich würde folgendes Markup verwenden:

<section>
  <header>
    <h1>title 
      <span>created <time datetime="2019-05-01 10:00">may</time></span>
    </h1>
    <button type="button">Zeige die nächsten Bilder</button>
  </header>

Jetzt kannst du den header zu einer Flexbox machen und die Bilder rufen nach grid.

Bis demnächst
Matthias

[Bernd]

Hallo,

danke für deine Hilfe. Da ich mehr Boxen haben würde ich dann noch ein DIV um alles legen, also so?

<section>
 <div>
  <header>
    <h1>title 
      <span>created <time datetime="2019-05-01 10:00">may</time></span>
    </h1>
    <button type="button">Zeige die nächsten Bilder</button>
  </header>
 </div>
</section>

Die Bilder werden dann unter dem </header> eingebunden? Die Frage ist was mache ich mit dem letzten, sprich dieses sollte zwar auch ein Bild sein, aber verblasst mit der Anzahl wie viele Bilder noch in der Galerie sind, das heißt ich benötige dafür ein DIV?

Und warum ein button und nicht einfach ein Link? Damit gelangt man einfach in die Galerie also in die Detailansicht. Wäre da nicht besser einfach eine Grafik als link?

[Felix Riesterer]

Lieber Bernd,

<section>
 <div>
  <header>
...
  </header>
 </div>
</section>

Wozu diese Verschachtelung? Was soll dieser Unsinn?

Du hast eine große Box: <section>
In der Box gibt es einen Überschriftenbereich <header> und eine Liste von sechs Bildboxen/Links <ul>. Daraus leitet sich folgendes Markup ab:

<section>
  <header>
  </header>
  <ul>
  </ul>
</section>

Jetzt kannst Du den Überschriftenbereich mit der Überschrift (<h1>) befüllen, sowie die Datumsangabe und den Weiter-Button eintragen (siehe Markup-Vorschlag von @Matthias Apsel). Die Liste bekommt Listenelemente (<li>), die einen Hyperlink (<a>) zu einem Linkziel enthalten.

Die Bilder werden dann unter dem </header> eingebunden? Die Frage ist was mache ich mit dem letzten, sprich dieses sollte zwar auch ein Bild sein, aber verblasst mit der Anzahl wie viele Bilder noch in der Galerie sind, das heißt ich benötige dafür ein DIV?

Nein. Die Bilder sind <img>-Elemente innerhalb der <a>. Das letzte Bild ist kein Bild, sondern Text, der aus einer Zahl und dem Plus-Zeichen besteht.

Und warum ein button und nicht einfach ein Link?

Ich fände einen Link auch besser. Also machst Du einen Link daraus.

Damit gelangt man einfach in die Galerie also in die Detailansicht. Wäre da nicht besser einfach eine Grafik als link?

Warum? Du kannst den Text-Link mit CSS-Mitteln (Hintergrundgrafik) zu einer scheinbaren Grafik umgestalten. Das bleibt Dir überlassen. Hier also das volräufige Endergebnis:

<section>
  <header>
    <h1>Ich bin ein Titel</h1>
    <p>
       Created <time datetime="2019-03-25 10:19:25">March 25</time>
      <a href="#more">more</a>
  </p>
  </header>
  <ul>
    <li><a href="#bild1"><img src="placeholder.png" alt="graue Fläche"></a></li>
    <li><a href="#bild2"><img src="placeholder.png" alt="graue Fläche"></a></li>
    <li><a href="#bild3"><img src="placeholder.png" alt="graue Fläche"></a></li>
    <li><a href="#bild4"><img src="placeholder.png" alt="graue Fläche"></a></li>
    <li><a href="#bild5"><img src="placeholder.png" alt="graue Fläche"></a></li>
    <li><a href="#+96">+96</a></li>
  </ul>
</section>

Der Rest ist CSS.

Liebe Grüße,

Felix Riesterer.

[Bernd]

Wozu diese Verschachtelung? Was soll dieser Unsinn?

Unsinn? Warum? Ich habe eine große <section> wo alle Galerien drin liegen. Um jede Galerie anzuordnen benötige ich ein <div> drumherum?

[Felix Riesterer]

Lieber Bernd,

Unsinn? Warum?

weil wir nur und ausschließlich von einer Box reden, wie sie in Deinem OP in der Grafik zu erkennen ist. Dafür ist das Markup gedacht.

Ich habe eine große <section> wo alle Galerien drin liegen.

Das mag sein, hat aber mit Deinem Eingangsposting überhaupt nichts zu tun. Und ja, man kann <section>s verschachteln. Warum Du eine große <section> für alle Deine Galerien zusammen benötigst, weißt nur Du. Ich hätte da jetzt eher ein <main> erwartet...

Um jede Galerie anzuordnen benötige ich ein <div> drumherum?

Nein, ein <section>. Siehe Beispielcode.

Liebe Grüße,

Felix Riesterer.

[dedlfix]

Tach!

Unsinn? Warum?

weil wir nur und ausschließlich von einer Box reden, wie sie in Deinem OP in der Grafik zu erkennen ist. Dafür ist das Markup gedacht.

Du hast da den einleitenden Satz über dem Markup überlesen?

dedlfix.

[Bernd]

weil wir nur und ausschließlich von einer Box reden, wie sie in Deinem OP in der Grafik zu erkennen ist. Dafür ist das Markup gedacht.

Wer lesen kann ist klar im Vorteil, hat man schon in der Schule gelernt!

[Tabellenkalk]

Hallo,

Wer lesen kann ist klar im Vorteil, hat man schon in der Schule gelernt!

Dort hätte man übrigens auch lernen können, dass „gestalten“ nix mit „Stall“ zu tun hat… Schreiben können hat also auch Vorteile!

Gruß
Kalk

[Felix Riesterer]

Lieber Tabellenkalk,

ich weiß nicht, wer Deinen Rant zur Korrektschreibung hier wieder gut fand. Du hättest aber wenn schon auch gleich die Korrektschreibung im Threadtitel bemängeln können. Im Übrigen bist Du bei mir knapp an einer Negativbewertung damit vorbei.

Liebe Grüße,

Felix Riesterer.

[Tabellenkalk]

Hallo,

ich weiß nicht, wer Deinen Rant zur Korrektschreibung hier wieder gut fand.

Von mir aus darfst du meinen Kommentar als Rant bezeichnen, ein Rant ist nach meinem Verständnis aber irgendwie ausufernder...

Du hättest aber wenn schon auch gleich die Korrektschreibung im Threadtitel bemängeln können.

Ich hatte das längst verdrängt und hätte auch das andre locker ignoriert, aber kennst du das Sprichwort mit dem Splitter im Auge? (Lukas 6,42)

Gruß
Kalk

[Bernd]

Oh mein Gott, dir ist wohl noch nie ein Rechtschreibfehler unterlaufen oder hat die Autokorrektur dir einen Streich gespielt? Es gibt schlimmeres!

[Tabellenkalk]

Hallo,

Oh mein Gott, dir ist wohl noch nie ein Rechtschreibfehler unterlaufen oder hat die Autokorrektur dir einen Streich gespielt? Es gibt schlimmeres!

Wer auch immer mir da ein +1 gegeben hat, hat verstanden, dass es eben nicht um den Verschreiber geht…

Gruß
Kalk

[marctrix]

Hej Bernd,

Oh mein Gott, dir ist wohl noch nie ein Rechtschreibfehler unterlaufen oder hat die Autokorrektur dir einen Streich gespielt? Es gibt schlimmeres!

Stimmt, dein Benehmen gegenüber Helfern zum Beispiel. Wundert mich schon lange, dass dir überhaupt noch einer antwortet…

Marc

[Bernd]

Bla Bla Bla! Mehr muss ich dazu nicht sagen. Ich frage mich warum du dich überhaupt einmischt.

[marctrix]

Hej Bernd,

Bla Bla Bla! Mehr muss ich dazu nicht sagen. Ich frage mich warum du dich überhaupt einmischt.

Weil du dich nicht wertschätzend benimmst — dein Ton tut dem Forum nicht gut und das stört mich. dass sich jemand dazu äußert, musst du bei Deiner Wortwahl hinnehmen.

Marc

[Bernd]

AHA! Mit dir diskutiere ich gar nicht mehr! Von dir lese ich auch nichts mehr. Dazu ist meine Zeit zu schade.

[marctrix]

Hej Bernd,

AHA! Mit dir diskutiere ich gar nicht mehr! Von dir lese ich auch nichts mehr. Dazu ist meine Zeit zu schade.

Die Antwort war vorhersehbar. Ich habe nicht mit rationalem, einsichtigem Verhalten gerechnet.

Marc

[Bernd]

Ich muss doch noch etwas sagen, denn so ein Misst kann ich nicht stehen lassen. Ich habe mich mehrfach bei @Felix Riesterer und ursus contionabundo für die Hilfe bedankt! Siehst du natürlich nicht. Naja kein Wunder! Einfach hetzen wo es nur geht.

[Felix Riesterer]

Lieber Bernd,

Ich habe mich mehrfach bei @Felix Riesterer und ursus contionabundo für die Hilfe bedankt! Siehst du natürlich nicht.

Moment! Du hast mich auch recht scharf angemacht, als ich die Schachtelung kritisiert hatte. Trotzdem habe ich in der Sache weiter geholfen, anstatt darauf herumzureiten. Das hätte ich als kindisch empfunden.

Naja kein Wunder! Einfach hetzen wo es nur geht.

Das empfinde ich nicht als erwachsenes und gemäßigtes Verhalten. Schade.

Liebe Grüße,

Felix Riesterer.

[Bernd]

Hallo,

Moment! Du hast mich auch recht scharf angemacht, als ich die Schachtelung kritisiert hatte. Trotzdem habe ich in der Sache weiter geholfen, anstatt darauf herumzureiten. Das hätte ich als kindisch empfunden.

ich habe nur geschrieben "wer lesen kann ist klar im Vorteil" Findest du das scharf angemacht? Dann entschuldige ich mich dafür. So etwas hört man doch mehr als oft wenn man etwas falsch gelesen hat? Ich persönlich würde mich da nicht angegriffen fühlen, weil man es mir schon selbst öfters gesagt hat, auch von jüngeren!

Und ich habe hier https://forum.selfhtml.org/self/2019/may/1/bildler-boxen-gestalten/1747777#m1747777 ja von Boxen und nicht von einer Box geschrieben. Deshalb auch meine Reaktion!

[marctrix]

Hej Bernd,

Moment! Du hast mich auch recht scharf angemacht, als ich die Schachtelung kritisiert hatte. Trotzdem habe ich in der Sache weiter geholfen, anstatt darauf herumzureiten. Das hätte ich als kindisch empfunden.

ich habe nur geschrieben "wer lesen kann ist klar im Vorteil" Findest du das scharf angemacht?

Das war nicht alles. Du musstest als Hilfesuchender den Helfenden zusätzlich noch darauf hinweisen, das „man“ das in der Schule lernt und hast dann auch noch sehr pikiert reagiert, als man Dir gesagt hat, dass man mit so viel Rechtschreibfehlern nicht über die Schulbildung anderer lästern soll.

Erst das ganze Bild (ungerechtfertigt harsche Kritik an einem Helfenden verbunden mit extremer Überempfindlichkeit bei Kritik an der eigenen Person) ergibt den mir unangenehmen Gesamteindruck.

Im Nachhinein fand ich meine Reaktion dennoch als unnötig — als Äußerung nach mehrfach ähnlichem Auftreten fand ich meine Reaktion aber auch nicht so übertrieben, dass ich sie zurück genommen hätte.

Es war der berühmte Tropfen im Fass.

Dann entschuldige ich mich dafür.

Hierfür hatte ich bereits ein Plus gegeben, aber dann ging es weiter:

So etwas hört man doch mehr als oft wenn man etwas falsch gelesen hat? Ich persönlich würde mich da nicht angegriffen fühlen,

Doch und zwar kurz darauf gleich hier in demselben Thread…

Das war erstens sofort nach deiner Entschuldigung eine Relativierung und dann auch noch eine falsche Behauptung hinterher.

Und ich habe hier https://forum.selfhtml.org/self/2019/may/1/bildler-boxen-gestalten/1747777#m1747777 ja von Boxen und nicht von einer Box geschrieben. Deshalb auch meine Reaktion!

Also war @Felix Riesterer schuld an deinem Verhalten, weil er zwei Buchstaben überlesen hat?

Das ist ein Grund einen Helfer zurecht und auf unzureichende Bildung hinzuweisen?

In meiner Welt nicht. Mag sein, dass du dich mit deinesgleichen umgibst und dass da so ein Ton herrscht (klingt nach AfD: ständig kräftig am austeilen, aber selber bei der kleinsten Kleinigkeit hochgehen)…

So ist das Plus weg und das negative Gesamtbild neuerlich bestätigt.

Auch deine Reaktion auf meine Kritik und auf meinen Fehler im Wiki gehen in dieselbe Richtung. Denn den Fehler hättest du ja auch beseitigen können, nachdem du ihn gefunden hattest (eine halbe Stunde nachdem du mir versprochen hattest, meine Beiträge nicht mehr zu lesen, weil deine Zeit dafür zu schade ist…).

Aber Konstruktivität ist deine Sache nicht…

So macht selbst dieser misslungene Entschuldigungsversuch klar, dass es dir nur auf eines ankommt: dich selber.

Du lässt dir helfen, aber einen Fehler im Wiki lässt du stehen. Ein schönes Dankeschön!

Marc

[ursus contionabundo]

Aber Konstruktivität ist deine Sache nicht…

Ich sags mal so. Bernd hat sich eigentlich genau in dieser Frage schwer gebessert und die eigene Toleranzschwelle enorm angehoben. Es ist aus meiner Sicht eine "eher ungute Idee", das Erreichte durch ausufernde Kritik und eigene, niedrige Toleranzschwellen zu gefährden.

Mit Blumenstrauß vor dem Gesicht: Wollen wir nicht alle (im Sinne eines gewissen Boethius) Philosophen bleiben?

[marctrix]

Hej ursus,

Aber Konstruktivität ist deine Sache nicht…

Ich sags mal so. Bernd hat sich eigentlich genau in dieser Frage schwer gebessert und die eigene Toleranzschwelle enorm angehoben. Es ist aus meiner Sicht eine "eher ungute Idee", das Erreichte durch ausufernde Kritik und eigene, niedrige Toleranzschwellen zu gefährden.

Ich habe zuletzt weniger von ihm gelesen und will dir das gerne so glauben. Vielen dank daher für den Hinweis und ja, ich bin gerne dabei!

Frieden, @Bernd?

Marc

[Bernd]

Alles klar! Wenn ich also etwas sage ist es nicht ok, wenn ein paar Stammposter hier etwas sagen ist es OK obwohl sie mehr als beleidigend sind! Gut zu wissen wie du denkst und tickst. Aber lassen wir es. Damit ist das Thema für mich erledigt!

Zum Thema Verbessern, ich fummel nicht an fremden Texten rum. Wenn etwas schief geht bi nich der Depp! Nein, das habe ich bei Wikipedia einmal gemacht und nie wieder.

[Christian Kruse]

Hallo Bernd,

Zum Thema Verbessern, ich fummel nicht an fremden Texten rum. Wenn etwas schief geht bi nich der Depp! Nein, das habe ich bei Wikipedia einmal gemacht und nie wieder.

Das ist nur eine Ausrede.

LG,
CK

[Bernd]

Hallo,

nein ist es nicht. Außerdem wenn ich auf Bearbeiten gehe sehe ich folgendes

== Weblinks ==
*MDN: [https://developer.mozilla.org/de/docs/Web/CSS/clip clip]
{{Kategorie|CSS}}
[[Kategorie:Eigenschaft (CSS)]]

Vom Text weit und breit nichts zu sehen.

[marctrix]

Hej Bernd,

nein ist es nicht. Außerdem wenn ich auf Bearbeiten gehe sehe ich folgendes

== Weblinks ==
*MDN: [https://developer.mozilla.org/de/docs/Web/CSS/clip clip]
{{Kategorie|CSS}}
[[Kategorie:Eigenschaft (CSS)]]

Vom Text weit und breit nichts zu sehen.

Nimm den „Bearbeiten“-Button ganz oben 😉

Marc

[Bernd]

Ich habe nur ganz unten einen

[ursus contionabundo]

Ich habe aus "unerwünscht" mal die besser zutreffende Formulierung

"veraltet" bzw. "abgekündigt"

gemacht.

[marctrix]

Hej ursus,

Ich habe aus "unerwünscht" mal die besser zutreffende Formulierung

"veraltet" bzw. "abgekündigt"

gemacht.

Also zu meiner Zeit wurde das “deprecated” immer als “unerwünscht“ übersetzt.

Auch wenn deine Wortwahl angemessener ist, war das mal ein feststehender Begriff.

Marc

[Tabellenkalk]

Hallo,

Ich habe nur ganz unten einen

Der zwischen „Lesen“ und „Fragen“ ist relativ weit oben…

Gruß
Kalk

[Bernd]

Hallo,

Der zwischen „Lesen“ und „Fragen“ ist relativ weit oben…

ach da, ganz oben. Der geht total unter. Ich habe ihn wie auch unten direkt neben der Überschrift gesucht und erwartet.

[ursus contionabundo]

Das ist nur eine Ausrede.

Ich würde jetzt nicht behaupten, dass Bernd es nicht könnte wenn er es unbedingt wöllte - aber so manche Schwierigkeiten bietet das Bearbeiten eines Wikis durchaus - weswegen das so mancher nach dem Motto "Ich kann's nicht gut, also mach ich's nicht!") gern anderen überlässt. Insofern halte ich das obige für zu hart.

[Christian Kruse]

Hallo ursus,

Das ist nur eine Ausrede.

Ich würde jetzt nicht behaupten, dass Bernd es nicht könnte wenn er es unbedingt wöllte - aber so manche Schwierigkeiten bietet das Bearbeiten eines Wikis durchaus - weswegen das so mancher nach dem Motto "Ich kann's nicht gut, also mach ich's nicht!") gern anderen überlässt. Insofern halte ich das obige für zu hart.

„Ich kann es nicht gut, also mache ich es nicht“ ist (vermutlich) ehrlich und deshalb keine Ausrede. Arschig, aber höchstwahrscheinlich keine Ausrede.

„Ich tus nicht weil ich nicht verantwortlich sein will wenn es kaputt geht“ ist eine Ausrede weil nicht ehrlich.

LG,
CK

[ursus contionabundo]

„Ich tus nicht weil ich nicht verantwortlich sein will wenn es kaputt geht“ ist eine Ausrede weil nicht ehrlich.

Gute Güte. Warum nur will man das eigentlich implizite "Ich kann's nicht (gut)." so explizit hören oder lesen?

[Christian Kruse]

Hallo ursus,

„Ich tus nicht weil ich nicht verantwortlich sein will wenn es kaputt geht“ ist eine Ausrede weil nicht ehrlich.

Gute Güte. Warum nur will man das eigentlich implizite "Ich kann's nicht (gut)." so explizit hören oder lesen?

Wenn man ehrlich kommuniziert kann man über die wirklichen Probleme reden, ohne sich an Nebenkriegsschauplätzen aufreiben zu müssen.

Und Ausreden haben immer auch einen Hintergrund. Ich will hier nicht Bernds Verhalten öffentlich analysieren, das halte ich für respektlos und für einen Eingriff in die Privatsphäre. Aber ein solches Verhalten unkritisch stehen zu lassen führt nicht zu einem besseren Wiki.

LG,
CK

[ursus contionabundo]

Aber ein solches Verhalten unkritisch stehen zu lassen führt nicht zu einem besseren Wiki.

Wenn man jemanden dazu bringen will, freiwillig etwas zu tun, dann sollte die Kritik an (s)einem Nichttun wohl sehr verhalten, mithin als freundlicher Vorschlag formuliert sein. Das gilt noch mehr für Kritik, die geübt wird, wenn das Resultat des Tuns nicht jedem gefällt.

[Christian Kruse]

Hallo ursus,

Aber ein solches Verhalten unkritisch stehen zu lassen führt nicht zu einem besseren Wiki.

Wenn man jemanden dazu bringen willst, freiwillig etwas zu tun, dann sollte die Kritik an (s)einem Nichttun wohl sehr verhalten, mithin als freundlicher Vorschlag formuliert sein. Das gilt noch mehr für Kritik, die geübt wird, wenn das Resultat des Tuns nicht jedem gefällt.

Ja. Deshalb war meine Kritik ja auch verhalten und nicht anklagend.

LG,
CK

[ursus contionabundo]

Deshalb war meine Kritik ja auch verhalten und nicht anklagend.

Das Empfinden ist da sehr unterschiedlich. Sobald das Wort "Ausrede" dem Empfänger als persönlicher Vorwurf erscheint wird er Dir nicht zustimmen. Etwas wie "Es gibt eigentlich keine Ausrede, denn Markdown wird auch hier im Forum verwendet und man kann es leicht reparieren oder rückgängig machen." würde wohl ganz anders empfunden.

[marctrix]

Hej ursus,

Deshalb war meine Kritik ja auch verhalten und nicht anklagend.

Das Empfinden ist da sehr unterschiedlich. Sobald das Wort "Ausrede" dem Empfänger als persönlicher Vorwurf erscheint wird er Dir nicht zustimmen.

Bitte beziehe doch in deine Überlegungen auch mal die Art des postings ein, auf das ck geantwortet hat.

Und beziehe in deine Empathie auch Menschen mit ein, deren Name nicht mit „B“ beginnt und mit „ernd“ endet.

Nachdem die Diskussion auch ohne mein Zutun hier eh nicht aufhört, wollte ich das dann doch mal loswerden. Auch in der Hoffnung zu vermitteln. Es ist ausdrücklich nicht meine Absicht, Öl ins Feuer zu gießen…

Herzliche Grüße,

Marc

Ceterum censeo Google esse delendam

[ursus contionabundo]

Bitte beziehe doch in deine Überlegungen auch mal die Art des postings ein, auf das ck geantwortet hat.

Ich weiß. Überlege, ob wohl alle meine Überlegungen öffentlich stattfinden …

[Christian Kruse]

Hallo ursus,

Sobald das Wort "Ausrede" dem Empfänger als persönlicher Vorwurf erscheint wird er Dir nicht zustimmen.

Warum sollte jemand „Ausrede“ als Vorwurf empfinden? Ich will nicht trollen, es ist mir tatsächlich nicht erklärbar. Ausreden für unser Verhalten finden wir doch alle ständig. Das ist ein völlig normaler Mechanismus, der uns vor Dissonanzen zwischen Selbstwahrnehmung und Handlungsweise sowie Verhaltensänderungen schützt.

Etwas wie "Es gibt eigentlich keine Ausrede, denn Markdown wird auch hier im Forum verwendet und man kann es leicht reparieren oder rückgängig machen." würde wohl ganz anders empfunden.

Ja, das ist vermutlich richtig.

LG,
CK

[Bernd]

„Ich tus nicht weil ich nicht verantwortlich sein will wenn es kaputt geht“ ist eine Ausrede weil nicht ehrlich.

Ok, dieses sage ich demnächst mal einem Maler der in meiner Wohnung mein Herd umstellen soll obwohl er es abgelehnt hat wegen Starkstrom.

[Christian Kruse]

Hallo Bernd,

„Ich tus nicht weil ich nicht verantwortlich sein will wenn es kaputt geht“ ist eine Ausrede weil nicht ehrlich.

Ok, dieses sage ich demnächst mal einem Maler der in meiner Wohnung mein Herd umstellen soll obwohl er es abgelehnt hat wegen Starkstrom.

Nicht alles, was hinkt, ist ein Vergleich. Mit einem Edit im Wiki bringst du dich nicht um, noch hat ein Fehler, den du dort eventuell machst, irgendwelche Konsequenzen für dich.

Wenn du keinen Bock hast, etwas im Wiki zu verbessern, dann steh dazu. „Ich will nicht verantwortlich sein, wenn was kaputt geht“ ist eine Ausrede. Denn das bist du nicht. Der Verein ist es.

LG,
CK

[Bernd]

Ich beende damit die Diskussion! Du hast deine Meinung und dieses ist auch OK! Ich diskutiere mit solchen Menschen nicht die nur das negative sehen!

[Christian Kruse]

Hallo Bernd,

Ich beende damit die Diskussion!

😂

Ich diskutiere mit solchen Menschen nicht die nur das negative sehen!

🤷‍♂️ wenn du das denkst, dann ist das halt so. Ich halte das aber nur für ein Ablenkungsmanöver.

LG,
CK

[marctrix]

Hej ursus,

Das ist nur eine Ausrede.

Ich würde jetzt nicht behaupten, dass Bernd es nicht könnte wenn er es unbedingt wöllte - aber so manche Schwierigkeiten bietet das Bearbeiten eines Wikis durchaus - weswegen das so mancher nach dem Motto "Ich kann's nicht gut, also mach ich's nicht!") gern anderen überlässt. Insofern halte ich das obige für zu hart.

Wieso? Du sagst doch dasselbe wie @Christian Kruse — das Wort Ausrede kann man doch kaum besser beschreiben als mit "Ich kann's nicht gut, also mach ich's nicht!"

Aber machen wir nicht noch so ein Thema auf. Nachdem ich auf das Nachtreten von Bernd nicht eingegangen sind, müssten sich jetzt auch alle anderen einfach mal zurückhalten, dann kehrt auch wieder Ruhe ein 😉

Marc

[Matthias Apsel]

Hallo Bernd,

Und warum ein button und nicht einfach ein Link? Damit gelangt man einfach in die Galerie also in die Detailansicht.

Dann ein Link weil es eine neue Seite ist. Wenn einfach nur die nächsten Vorschaubilder angezeigt werden sollen, dann button.

Bis demnächst
Matthias

[Felix Riesterer]

Lieber Matthias,

Dann ein Link weil es eine neue Seite ist. Wenn einfach nur die nächsten Vorschaubilder angezeigt werden sollen, dann button.

also in etwa so: Verändert JavaScript das DOM auf der aktuellen Seite, dann <button>, ansonsten <a href>.

Liebe Grüße,

Felix Riesterer.

[Rolf B]

Hallo Felix,

das würde ich weniger technisch als fachlich abgrenzen und mir die Funktionsweise der Seite in der Fallback-Version für "kein JavaScript" vorstellen.

Bleibt man in der aktuellen Ansicht und modifiziert etwas darauf, ist es eher ein Button (ohne JS: Postback). Gelangt man in eine andere Ansicht, ist es eher ein Link.

Bei Bernd würde ich eher einen Link sehen: ich verstehe den Pfeil so, dass man von der Galerieübersicht zu einer einzelnen Galerie navigiert.

Rolf

[Bernd]

Hallo,

mein Ergebnis sieht derzeit so aus:
https://codepen.io/anon/pen/axgdJB

Die Frage die noch offen ist, wie bekomme ich nur mit CSS? den Pfeil rechts hin oder nehme ich da eine Grafik? Wie bekomme ich den Pfeil dann nach rechts? Und wie kann ich das letzte <li><a href="">+96</a></li> gestalten dass es so ausschaut wie auf meiner Grafik?

[Bernd]

Ok, das letzte sprich das sechste li innerhalb meiner ul habe ich hinbekommen:
https://codepen.io/anon/pen/axgdJB

Ich hätte es zwar gerne so, weiß nur nicht wie ich dieses gestalten soll:

[Felix Riesterer]

Lieber Bernd,

in etwa so: Blaue Hintergrundfarbe und einen nach innen gerichteten Box-Shadow

	background: #8cf;
	box-shadow: 0 0 20px 5px #eee inset;

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

Lieber Bernd,

wie bekomme ich nur mit CSS? den Pfeil rechts hin

.gallery-container header {
  position: relative;
}

.gallery-container header a {
  font-size: 200%;
  font-weight: bold;
  height: 1em;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 1em;
}

Liebe Grüße,

Felix Riesterer.

[Bernd]

DANKE! Und den Pfeil als SVG Grafik bzw. png?

[Felix Riesterer]

Liebe(r) Bernd,

DANKE!

bitte. :-)

Und den Pfeil als SVG Grafik bzw. png?

Die Idee war, mit der Kombination aus padding-left und overflow eine Art freien Bereich zu schaffen, in dem etwas anderes als der übliche Linktext angezeigt werden kann. Mit der Pseudoklasse :before und der content-Eigenschaft habe ich ein Textzeichen in diesen freien Bereich gesetzt. Du kannst anstelle der Pseudoklasse auch nur ein passendes Hintergrundbild verwenden. Bedenke aber, dass bei SVG-Grafiken vielleicht noch eine background-size-Eigenschaft benötigt wird, da SVG-Bilder unter Umständen anders skalieren.

Liebe Grüße,

Felix Riesterer.

[Bernd]

Halle,

danke für eure Hilfe. Daraus habe ich jetzt folgendes gemacht:
https://codepen.io/anon/pen/PgrNpo

Verbesserungsvorschläge? Gerne!

[Felix Riesterer]

Lieber Bernd,

Verbesserungsvorschläge? Gerne!

die Box mit +96 erscheint bei mir mit etwas größerem Umfang. Auch ist der anklickbare Link nicht über die gesamte Fläche dieser Box verteilt. Vielleicht sollte man lieber nicht das sechste <li> stylen, sondern nur den Link darin? Mit display:block wäre dieser schon auf die gesamte Breite ausgedehnt - allerdings komme ich noch aus der prä-grid-Ära...

Liebe Grüße,

Felix Riesterer.

[Bernd]

Hallo,

keine Ahnung, bekomme ich leider nicht hin.

[Felix Riesterer]

Lieber Bernd,

keine Ahnung, bekomme ich leider nicht hin.

habe es gerade ausprobiert:

.gallery-container ul li:nth-child(6) a {
  align-items: center;
  background: #7ea0b9;
  box-shadow: 0 0 25px 2px #efefef inset;
  color: white;
  display: grid;
  font-size: 1.8em;
  height: 100px;
  justify-content: center;
  text-decoration: none;
  width: 100px;
}

[EDIT]Ach ja, die Regel .gallery-container ul li:nth-child(6) {...} dabei ersatzlos streichen.[/EDIT]

Liebe Grüße,

Felix Riesterer.

[Bernd]

DANKE! Jetzt funktioniert es wunderbar.

Jetzt muss ich mal schauen wie ich automatisch Bilder beschneiden kann, wenn diese hochkant sind. Da kann ich wohl mit CSS nichts machen?

[ursus contionabundo]

Jetzt muss ich mal schauen wie ich automatisch Bilder beschneiden kann, wenn diese hochkant sind. Da kann ich wohl mit CSS nichts machen?

Mit etwas wie

img.autoscale {
  max-width: 100%;
  height: auto;
  max-height: 100%;
  width: auto;
}

kannst Du womöglich skalieren. (Ich habe nicht getestet, ob das mit beiden Dimensionen auf einmal geht!) Du fragst aber nach "Beschneiden".

Eigentlich ist für das Beschneiden clip zuständig.

.clipRect {
  position: absolute;
  overflow: hidden;
  clip: rect(100px, 135px, 125px, 90px);
}

Dann hab ich noch einen Tipp gefunden:

"Will man einfach nur einen Bildausschnitt darstellen, ohne dass das Bild gestaucht wird, kann man die CSS-Eigenschaften object- verwenden."*

.cropCenter {
  height: 300px;
  width: 100% !important;
  object-fit: cover;
  object-position: top center;
}

[Bernd]

Hallo,

danke für deine Antwort. Das würde dann bedeuten ich müsste die Bilder irgendwie als Hintergrundbilder einbinden und nicht als <img>? Müsste also meinen kompletten Code umbauen.

[ursus contionabundo]

Das würde dann bedeuten ich müsste die Bilder irgendwie als Hintergrundbilder einbinden und nicht als <img>?

Nein, nicht als Hintergrund. Ersetze mal die relativen Größenangaben (100%) durch fixe (Pixel, rem).

Nachtrag: beim clip müsstes Du die Größe des Bildes schon auf dem Server ermitteln und als inline-CSS mitgeben (oder via Session/oder get-Parameter eine berechnete CSS-Datei nachliefern Sonst müsstest Du immer von unten und links abschneiden.

Hier übrigens mal anhand meines heutigen kitschigen Desktophintergrundes (Foto wurde von mir selbst gemacht) als Beispiel, warum Beschneiden manchmal suboptimal ist.

Linker Bildschirm (1920x1080px):

Rechter Bildschirm (1280x1024px)

Das erste ist nur Kitsch, das zweite sieht auch noch so aus, dass manchem so manche unangemessene Wörter als passend erscheinen könnten… Ich sage dazu, dass ich den zweiten (rechten) Bildschirm zum Glück nicht immer angeschaltet habe und wenn überhaupt, dann deshalb weil ich darin ganz fix ein Anwendungsfenster vor dem Mist habe...

[Bernd]

Dankeschön, scheint zu funktionieren:
https://codepen.io/anon/pen/rbEmZv

[Bernd]

Ok, ich kann auch ein

.crop-bottom {
	height: 100px;
  width: 95% !important;
  object-fit: cover;
  object-position: bottom center;
}

nutzen, dann wird mir das Bild direkt anderes dargestellt:
https://codepen.io/anon/pen/rbEmZv

Die Frage ist halt, ich müsste die Class dann einem Bild im Admin-Bereich mitgeben können, denn ich weiß im Voraus nicht, welcher Bildausschnitt am besten ist. Ich frage mich wie dieses große Seite wie Twitter, Instagram oder Facebook machen. Bei diesen sieht dieses immer wunderschön und passend aus.

🤔 Hmmmm

[ursus contionabundo]

Ich frage mich wie dieses große Seite wie Twitter, Instagram oder Facebook machen.

Also, falls die das automatisch machen, dann bietet z.B. Linux schon mit ImageMagick, erst recht mit gimp (ohne GUI!) einige Möglichkeiten.

https://superuser.com/questions/216177/command-line-to-automatically-crop-an-image

[Bernd]

Hallo,

ImageMagick habe ich im Einsatz. Allerdings kann ich damit nicht sagen nimm den besten Ausschnitt und schneide alles andere drum herum ab. Außer ich mach es händisch mit z.B. http://odyniec.net/projects/imgareaselect/ oder http://www.croppic.net/

[ursus contionabundo]

Allerdings kann ich damit nicht sagen nimm den besten Ausschnitt und schneide alles andere drum herum ab.

Ja. Das ist auch klar. Wie 1unitedpower schreibt brauchts dafür quasi-Intelligenz (Machine-Learning):

Man stellt ein paar Regelsätze auf wie wohl das mutmaßlich eigentliche Objekt zu finden sei, sucht also mit statistischen Methoden die mutmaßliche Position in dem man das Bild in ein Raster mit durchschnittlichen Farb- und Helligkeitswerten aufteilt (und hofft das das mutmaßlich interessante Objekt z.B. in oder nahe der Mitte ist (Es gibt auch dafür Grundregeln an welche sich die Fotografierenden hoffentlich bewusst oder unbewusst halten) und zwischen 25 und 75% der Bildfläche einnimmt), berechnet dann das Cropping (ebenfalls nach einem Satz von Grundregeln). Vorher kann man auch versuchen ein oder mehrere Gesichter, Gebäude oder z.b. Blüten zu finden (auch dafür gibt es mathematische Regeln) oder, bei Landschaftsaufnahmen, Linien wie den Horizont…

[1unitedpower]

Ja. Das ist auch klar. Wie 1unitedpower schreibt brauchts dafür quasi-Intelligenz (Machine-Learning):

Man stellt ein paar Regelsätze auf wie wohl das mutmaßlich eigentliche Objekt zu finden sei, sucht also mit statistischen Methoden die mutmaßliche Position in dem man das Bild in ein Raster mit durchschnittlichen Farb- und Helligkeitswerten aufteilt (und hofft das das mutmaßlich interessante Objekt z.B. in oder nahe der Mitte ist (Es gibt auch dafür Grundregeln an welche sich die Fotografierenden hoffentlich bewusst oder unbewusst halten) und zwischen 25 und 75% der Bildfläche einnimmt), berechnet dann das Cropping (ebenfalls nach einem Satz von Grundregeln). Vorher kann man auch versuchen ein oder mehrere Gesichter, Gebäude oder z.b. Blüten zu finden (auch dafür gibt es mathematische Regeln) oder, bei Landschaftsaufnahmen, Linien wie den Horizont…

So könnte man das Problem auch angehen, das wäre aber kein Machine-Learning-Ansatz.

Beim ML stellt man keine Regeln auf, man erstellt ein Modell, trainiert es auf einem hinreichend großen Trainings-Datenset, und hofft, dass das trainierte Modell brauchbare Schlüsse über neue Daten ziehen kann.

Regeln, wie "der interessaten Bildbereich liegt nahe der Mitte", stecken höchstens implizit in dem trainierten Modell, sie werden aber nicht von den EntwicklerInnen vorgegeben, noch können wir das Modell inspizieren, um zu sehen, ob es eine solche Regel gelernt hat und anwendet.

[1unitedpower]

Die Frage ist halt, ich müsste die Class dann einem Bild im Admin-Bereich mitgeben können, denn ich weiß im Voraus nicht, welcher Bildausschnitt am besten ist. Ich frage mich wie dieses große Seite wie Twitter, Instagram oder Facebook machen. Bei diesen sieht dieses immer wunderschön und passend aus.

Klingt nach einem klassischen Machine-Learning-Problem. Glimpse, zum Beispiel, kann intelligent Bilder zuschneiden und basiert auf dem Machine-Learning-Framework Tensorflow. Die Bibliothek ist speziell für Android, aber vermutlich gibt es ähnliches für andere Plattformen.

[Bernd]

Hallo,

danke für die Links. Genau so etwas suche ich. Ich hoffe dieses Tool kommt irgendwann mal für PHP raus. Mit Android komme ich derzeit nicht weiter.

[marctrix]

Hej ursus,

clip ist deprecated.

Was du versuchst, bekommst du mit object-fit und overflow: hidden leichter hin.

Marc

[marctrix]

Hej marctrix,

Was du versuchst, bekommst du mit object-fit und overflow: hidden leichter hin.

Sorry, zu schnell geantwortet, da kam ja noch das object- 😂

Marc

[marctrix]

Hej marctrix,

clip ist deprecated.

Ich habe einen entsprechenden Hinweis im Wiki am Artikelbeginn ergänzt…

Marc

[Bernd]

Alles klar!

Beachten Sie, dass die Eigenschaft clip inzwischen als nicht erwünscht (deprecated) eingestuft ist.

[Bernd]

Hallo,

woher kommen die große Abstände zwischen den Boxen?
https://codepen.io/anon/pen/PgrNpo

[Bernd]

Ok, jetzt passt es:
https://codepen.io/anon/pen/PgrNpo