Layout trotz gleichem Template unterschiedlich

  • Sagt mal, hat da einer eine Idee? Sehe das gerade zum ersten mal und habe keinen Schimmer, warum das so ist. Meine Bildergalerie, obwohl das gleiche Template, nur halt andere Bilder ist auf einer Seite viel zu schmal. Wobei das noch nicht mal am Template der Galerie liegt, denn der Main-Container ist schon zu klein und der wird auf allen Seiten gleich definiert, steht im Header-Modul, das überall eingebunden ist.

    So sollte es sein:


    So ist es:

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

  • Vergleich doch mal den Quelltext und such nach classes oder divs, die fehlen.
    Oder guck mal, ob Du bei den unteren Fotos einen alt oder Beschreibungstext im Backend eingegeben hast.

    Edit: Hab ich schon erwähnt, das die Seite aussieht, als wäre sie von Alex designed worden?

    Wer zuerst "Datenschutz" sagt, hat verloren.

  • Das ist mein Problem. Die Klassen sind alle gleich und alle Divs vorhanden.

    Es gibt da ein komplett umliegendes Div, das die Zentrierung macht. Das ist bei beiden noch gleich. In dem Div sind zwei weitere, die Navi links und der Contentbereich rechts. Die Navi ist bei beiden gleich. Der Content steht auf 100% ist im unteren Bild aber ca. 210px schmaler als im oberen.

    Die Bilder im Unteren haben keinen alt-Tag, also schon, aber der ist leer. Oben ist er jeweils mit den "Bildunterschriften" befüllt.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

  • Naja. Dann hast ja das Problem gefunden:
    Der leere alt-tag wird die umliegenden divs beeinflußen.
    Ich wette, da ist irgendwo ein padding oder margin um den alt-tag rum definiert.

    Abgesehen davon, finde ich das untere Beispiel eh schöner.

    Und hab ich schon erwähnt, das die Seite aussieht, als wäre sie von Alex designed worden?

    Wer zuerst "Datenschutz" sagt, hat verloren.

  • Ähm, nee, dann reden wird aneinander vorbei. Ich rede von dem alt da: <img src alt="leer">. Der Text darunter ist eine H3, die hat ein padding von 10px genauso wie das Bild selbst. Beides, also Bild und Bildunterschrift steckt in einem Div. Das hat eine Breite von 50%. Aber eben 50% vom zu schmalen Container drum rum.

    Ja gut, das untere hat gleichmäßige Bilder, aber dafür kann ich nix, wenn Kunden mal quer und mal hochkannt Fotos machen ;) Und nee, Alex hat damit nix zu tun :)

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

  • Warum? Das ist extrem sparsam. Da sind nur auch die ganzen Regeln von Leaflet und Datepicker mit drinnen. Die werden auf der Seite zwar nicht benötigt, aber ich habe so gut es geht alles zusammengefasst.

    Aber Du hast mich dennoch auf einen richtigen Weg gebracht. Ich weiß zwar nicht warum, aber es liegt irgendwie an der H3. Füge ich beim zweiten Bild auch nur eine einzige H3 hinzu, dann passt es. Verstehen muss ich es aber nicht, denn die H3 hat eben auch nur ein padding von 10px wie die Bilder selbst auch.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

  • Wäre es möglich, das das was mit dem Beschreibungstext zu tun hat?
    Wenn man die nämlich generell wegmacht, dann pappen die Bilder wie in Deinem unteren Bild aufeinander.

    PS: Alex is immer schuld! #fakt

    Abgesehen davon, das mir nicht klar ist, wieso man ein Thumbnail mit h3 versieht. Dafür gibts doch figcaption. Das mag google auch lieber.

    Wer zuerst "Datenschutz" sagt, hat verloren.

  • Der der Beschreibungstext ist es nicht. Es ist was mit der H3. Bei zwei Bilder nebeneinander jeweils eine H3 oder zumindest in den linken Bildern eine und eine bei den rechten, dann passt es.

    Komisch aber, wenn ich beim ersten Bild alle Unterschriften lösche, also alle H3, dann passt es dennoch :/

    Sage ja, scheint auch sehr selten zu sein. An der Galerie habe ich schon 4 Jahre nix mehr gemacht und heute das erste mal bemerkt.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

  • Und dann machst Du Dir nen Kopp drum?
    Solange sich keine Kunden beklagen, ist das doch eh egal.
    Bastle lieber am Aussehen der Seite rum - DAS werden Dir die Kunden danken^^
    Alleine der Header... Ein Köter ohne Stirn und Schnüffel, lieblos in den schmaler Header reingequetscht und dann noch das "Suchen"-Feld im Auge.
    Und das Logo kann auch keiner angucken oder gar lesen, ohne Augenkrebs zu kriegen.

    Wer zuerst "Datenschutz" sagt, hat verloren.

  • Bastle lieber am Aussehen der Seite rum - DAS werden Dir die Kunden danken^^

    Witzig, das Suchfeld ist neu, das wollte die Leute da oben haben. Da fehlen sogar noch die Felder für Anreise, Abreise und Personenanzahl. Logo stimmt, aber das ist beim besten Willen nie meins gewesen. Da habe ich kein Gespür für. Den Hund gibt es auch in "ganz", dann ist das Bild aber zu schmal oder der Header zu hoch. Ok, vielleicht komplett austauschen gegen ein anderes.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

  • So rein vom Optischen finde ich die Anordnung von "so ist es" ansprechender.

    „Arme Kinder sind genauso schlau und so talentiert wie weiße Kinder.“ :thumbup:

    US-Präsident Biden 2019 in einer Rede in Iowa,

  • Ihr macht mich alle, echt ?( Das "so ist es" ist das, was mal früher hätte sein sollen oder war. Genau das, was die letzten 4 Jahre hier im Forum bemängelt wurde, zu wenig Weißraum und so. Aber wie gesagt, ich bin weder Grafiker noch Designer. Ich höre auf Input, den ich bekomme oder eben auch hier anfrage.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

  • Ja gut, das untere hat gleichmäßige Bilder, aber dafür kann ich nix, wenn Kunden mal quer und mal hochkannt Fotos machen ;)

    Ja gut ....

    wenn 2 gleichgroße Bilder jeweils 50% bekommen, dann nutzen die auch 50%

    Wenn mal Quer und mal hoch .... dann sind da welche die ihre "100%" nicht nutzen können weil sie ja weniger wie die "partnerbilder" sind


    oder anders gesagt

    leg mal MemoryKarten (diese Quadratischen) untereinander ....

    ... das passt alles schön zusammen, wie dein "2"

    lege aber SkartKarten, abwchseln hoch und querr .... dann gibts da Weises Zeug

  • >> Du meinst wohl was wie BFE, oder ILT oder HSML, oder ? BFF passt aber auch

    Syno und auch Du Gato, ist es jetzt mal gut mit den Abkürzungen?

    Seit der Kater hier wieder schreibt nimmt es so langsam überhand. ^^

    „Arme Kinder sind genauso schlau und so talentiert wie weiße Kinder.“ :thumbup:

    US-Präsident Biden 2019 in einer Rede in Iowa,

  • Also zuerst würde ich dafür sorgen, das alle Bilder dieselbe Höhe bekommen.
    Dann würde ich nicht den Bildern einen Rahmen geben, sondern der class="thumbnail", weil die Quer- und Hochformat hochladen können.
    Mit 10-20px Abstand nach innen.
    Und die Bildbeschreibungen h3 und desc sollten auch innerhalb des Rahmens liegen, damit eine klare Zuordnung zu ersehen ist.
    Dann haste ein gleichmässiges Raster und Linien, nach denen sich das Auge richten kann. Denn das menschliche Auge mag Ordnung und das Hirn kann Daten schneller und einfacher erfassen.
    (Beispiel hier: https://seidenhandel.ch/gefaerbte-seidenstoffe/)

    Wenn Du schon h3 und desc verwendest, dann sorg dafür, das der Kunde auch das h3 ausgefüllt haben muß, bevor er desc benutzen kann.
    Auch würde ich die Schriftfarbe #000 vermeiden, sondern die leicht brechen, damit der Kontrast zum Hintergrund nicht so hart ist.

    So. Jetzt haste Input. :)

    Wer zuerst "Datenschutz" sagt, hat verloren.

  • Danke, dann werde ich das mal versuchen. Nur zwischen die Rahmen muss dann ein margin, also gehen die 50% Breite nicht mehr, also anderer Wert muss her. Allerdings kann es dann passieren, dass die Rahmen ungleich hoch sind bzw. die Boxen. Die Desc kann ja da sein, muss aber nicht, kann eine Zeile sein, aber auch 4. Daher habe ich um zwei thumbnail nebeneinander auch die class="thumbnail-line", damit die immer gleich sind und das Ding beim Float nicht anfängt zu springen, hängen, haken und sonst was ;)

    Farbe kann ich mal sehen. #000 verwende ich eigentlich eh selten, eher was im Bereich #444. Irgendwann hat Lighthouse aber angefangen zu meckern, weil der Kontrast nicht "AAA" ist.

    Das mit der Desc sollte eigentlich so sein, also nur möglich, wenn eine H3 auch da ist. Wenn es doch anders geht dann haste einen Systemfehler gefunden :)

    Ansonsten bin ich eh am testen mit den Bildgrößen. Also im Bereich "object-fit", da muss man aber viel umstellen, weil überall ein Container ums Bild muss. Das Gedöns habe ich vor nicht zu langer Zeit erst alles entfernt. Und teils schaut es mit "cover" auch sehr seltsam aus, weil die Bildformate wirklich sehr unterschiedlich sind. Manche laden sogar ein 360 Grad Bild hoch.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

  • Also zuerst würde ich dafür sorgen, das alle Bilder dieselbe Höhe bekommen.

    Das ist interessant, das sind sie in der Tat nicht. Auch sehr komisch. Muss vom CSS kommen. Bilder sind in der Galerie per default 200x150. Bilder die hochkant sind sollen auch 150 Höhe haben, dann halt entsprechend schmäler. Warum da nun aber ein Bild das nativ 200x266 hat mit 148 Höhe angezeigt wird, das kapiere ich gerade auch nicht.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(