Beiträge von Elly

Danke, das klingt erstmal logisch. Funktioniert bei mir aber immer noch nicht.

Ich will die Konfiguration ja eig eh über JS vornehmen, aber weil's da nicht ging, hab ich's im HTML dringelassen. Nehm ich da das Attribut jetzt komplett raus oder lass ich es nur leer? Bei mir geht's keine Variante der beiden.

Nicht, dass mir nur das mit der Größe nicht angenommen wird, also das ganze JS, sondern manchmal (je nach Browserfenstergröße) werden auch die Bilder falsch angeordnet - entweder eins verschoben oder hinter ein anderes gerutscht.

Hab die Seite nochmal aktualisiert.

//

Weiß eig jmd, wo mein gestriger Post hinverschwunden ist? Hat den noch jmd gesehen? Oder hab ich blöderweise nicht auf Senden geklickt? Mir ein Rätsel, was da passiert ist.

Hallo an alle hier,

ich habe gestern in diesem Thread nochmal was gepostet zu meinem Masonry, das ich grade aufsetzen wollte und hab noch gefragt, ob ich besser einen neuen Thread dazu aufmachen soll. Jetzt ist dort mein Post weg, aber Thread finde ich auch keinen dazu.

Na gut, nachdem es ja eig um JS geht, ist es im CSS-Forum eh fehl am Platz.

Hier mein erster Versuch. Ich habe das Masonry über HTML eingebunden, habe die jQuery-Bibliothek und die Masonry-JS geladen und aus der Layout-Anleitung ein paar Sachen übernommen, 1:1. Was rauskommt ist ein absoluter Schmarrn.

Dann habe ich mir das nochmal angeschaut, die übernommenen Dinge rausgenommen und nur die JS übernommen und das Masonry eingebunden. Dann hab ich per CSS noch die Größe eingestellt. Klappt tatsächlich! Hier mein Masonry, das vom Grundprinzip her schon mal läuft.

So, nun aber. Wenn ich in HMTL die Größe auf 200 einstelle, passiert gar nix. Die empfehlen ja das einzustellen.

Zitat

All options are optional, but columnWidth and itemSelector are recommended.

Gut, per CSS geht's. Aber wenn ich den jQuery-Code übernehme, passiert auch nix. Ich würde jetzt gern gutter:10 einfügen, das kommt ja auch da drunter, aber wie gesagt, es passiert nix.

Die Größe würde ich ja gern auf % einstellen. Die beschreiben das unter Layout / Responsive Layouts. Das habe ich eben gestern kopiert und das Ergebnis war, dass es alles zusammenschiebt. Verstehe ich nicht, das sollte ja einwandfrei funktionieren, kommt ja von Desandro selber. Ich kann schon im CSS 20% eingeben, das klappt für die Bilder, aber die columnWidth muss ja dann auch in % angegeben werden und das klappt im HTML auch nicht. Das macht genau nix.

<div id="container" class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 20%}'>

Wo liegt denn nun der Hund begraben?

Schau mal hier. So hättest du das Kontaktfeld immer unten stehen. Da musst du nur position:sticky; und bottom:0; ändern.

Ich hab zum Test einfach mal den Inhalt 1500px ausgedehnt.

Dass das zuerst gar nicht erscheint, krieg ich so mit dem JS-Codeschnipsel nicht hin. Liegt wohl daran, dass man bei scrollY ja oben bereits beginnt und das erst ab dem Button zählt. *grübel*

Hab noch ein bissl rumprobiert, aber ich krieg's auch nicht hin, dass das erst später eingeblendet wird. Sorry. Andere hier haben aber mehr Ahnung als ich, es gibt also noch Hoffnung.

Interessant. Ich hab gelesen, meine auf selfhtml, dass man aktive Links immer durch aria-current auszeichnen soll.

Ah, so nennt sich das dann. Danke!

Bin sehr beruhigt, dass du dich damit auch noch nicht beschäftigt hast!

Genau, so in etwa stell ich mir das vor. Und vor dem </body>-Tag kommen noch die JS-Dateien reingeladen. Denn würde ich nun das Script, das zur Navigation gehört, in die navigation.html packen, dann würde es ja vor dem Content geladen. Das habe ich gemeint vorhin.

Ich hab's gecheckt! Und das Wichtigste: Die vertikale Reihenfolge.

Wen das hier noch interessiert, Kulturbanause schreibt auch einen Artikel dazu.

Bin jetzt gespannt, ob ich das hinbekomme, das alles zu kombinieren, was ich da gerne hätte. Jetzt les ich mich erstmal ein...

Die Dateien werden doch genau an der Stelle inkludiert, wo der php-Befehl in der Hauptseite steht?

Mr. Murphy, danke für deinen Beitrag. Ich hab mir das mal durch den Kopf gehen lassen und finde das ganz interessant hier. Ich hab nämlich den Eindruck, dass gerade die heutigen Webseiten viel dynamischer sind und damit meine ich nicht das responsive Verhalten, sondern wirklich dass mal hier, mal dort was einfliegt oder fixiert wird am Rand etc. Gerade das mit dem JS load, so dachte ich, wäre von Vorteil, weil dann nicht der ganze Content geladen werden muss und somit die Seite beim ersten Laden weniger Zeit braucht. Vielleicht habe ich ja falsch gedacht, das Script muss ja natürlich auch noch geladen werden.

Was den Hover betrifft, so ist das auf Touchgeräten tatsächlich nicht sehr userfriendly, wenn auch es trotzdem funktioniert. Optimal ist es wohl nicht. Ich will ja bei mir auch noch einen Link aufs Bild setzen und eine Fancybox machen.

Ihr werdet jetzt lachen, aber ich dachte, ich könnte für die Galerie die Bilder in DIVs geben, mit flex versehen und dann wird alles schön angeordnet, auch responsive. Das geht ja doch normalerweise auch?

Dieses Mansonry, dass Erik JO da gebastelt hat, ist natürlich Hammer. Bin ja gespannt, ob ich mit dem was anfangen kann. Sieht doch ziemlich komplex aus. Und der Bildtitel soll dann auch noch drauf. Und beim Anklicken die Fancybox 3, nicht so wie er das gemacht hat.

Oder das hier. Das wär's doch. Und die Animationen sind hier CSS-basiert.

Ich muss gestehen, zeilenbasiert sieht nix aus. Da haben die Hochformatbilder dann ein Problem.

Zitat von Elly

Code

const url = document.location.href;
        document.querySelectorAll('.navigation .menu-list li a').forEach(item => {
            if (url.includes(item.href)) {
                item.classList.add('active');
            }
        });

Sollte man in Zeile 4 nicht noch irgendwie mit && hinzufügen, dass ein aria-current="page" eingefügt werden soll? Ich finde nur leider die Befehle dafür nicht.

Vl kann ich zur Abwechslung auch mal was beitragen.

Ich hab in meiner Navigation eine Klasse .sticky drinnen, die hinzugefügt wird, sobald man 20px nach unten scrollt. Das könnte man ja so verwenden, dass dieses Fensterlein erstmal hidden ist und durch die .sticky-Klasse auf visible gestellt wird.

window.onscroll = ()=>{
          this.scrollY > 20 ? navigation.classList.add("sticky") : navigation.classList.remove("sticky");
        }

Da hätt ich doch auch gleich mal ne Frage dazu. Wenn die Navigation JS braucht, das ja normalerweise am Ende des Body oder im Head eingefügt wird, lässt man das dann dort steht in jeder einzelnen Datei oder nimmt man das mit in die inkludierte Datei? Dann würde das Script ja praktisch mitten im Body irgendwo stehen.

Oder man inkludiert die ganzen Scripts auch nochmal.

Das mit dem intensiver beschäftigen will ich auf jeden Fall!

Zitat von Sempervivum

PS: Was das Bild-Hover betrifft, so hätte ich mir zuvor die Beispielseite ansehen sollen: Das ist ja gar kein Tooltip im üblichen Sinne, sondern die Beschreibung erscheint in der selben Größe wie das Bild. D. h. die Sachen, die die Positionierung betreffen, sind dort nicht relevant.

In derselben Größe nicht, nur beim Beispiel, nicht bei mir, da ich ja keine fixen Höhenangaben habe.

Was hältst du von meiner Idee, das mit der Bildbeschreibung so zu machen und blur zusätzlich über jQuery einzubauen?

Ah, da gibt's ja mehrere Antworten. Hab das Mail nur zum ersten bekommen.

Der Begriff Tooltip war mir neu. Hab mal ein bissl gegooglet und zB das da gefunden. Das ließe sich bei mir ws auch so umbauen, dass die Beschreibung auf dem Bild erscheint. Da wird mit visible/hidden gearbeitet.

Verstehe, bei Bootstrap steckt in den Templates wie vermutet sehr viel Code dahinter, der so nicht offensichtlich ist. Für den Anfang reicht mir erstmal was Einfaches, was ich auch selbst nachvollziehen bzw. schreiben kann.

Es muss ja gar nicht beim Verschieben der Browsergröße alles hin- und herfliegen. Beim Runterscrollen ja - sieht optisch schöner aus und es wird nicht gleich der ganze Content geladen (sollte dazu das Script nicht in den Header statt ans Ende des Body?) Und da war halt mein Gedanke, ob das nicht auch geht, wenn die Bilder nebeneinander angeordnet sind, eins nach dem anderen und sich trotzdem schön einpasst.

Und dass das dann auch responsive ist und sich auf 2 bzw. 1 Spalte reduziert bzw. dann unten anfügt. *grübel*

Wow! Sehr schön! Hier.

Und der Grund, das zu ändern ist, dass eine logischere Struktur dahinter steckt, oder? Und keine extra Klassen in den Elementen mehr benötigt werden, weil das ganze so einfach sauber ist? Jetzt weiß ich auch (noch mehr als vorher), warum du gestern gesagt hast, ich arbeite unstrukturiert.

Wie gesagt, vorerst lass ich das noch so, werde es dann aber noch umbauen, bevor ich mich dran mache, den Content auszufüllen.

Wie kann man euch hier eig danken?? Hab schon so viel gelernt hier!

Achso, diese. Verstehe. Alles klar!

So, next step. Das Bild-Hover für die Beschreibung.

Ich hab mir mal ein schönes Tutorial gesucht, das aber nur funktioniert, wenn die Bilder eine fixe Höhe haben. Das möchte ich ja nicht, weil ich ja Hoch- und Querformatbilder mischen können muss.

Diese rein CSS-basierte Lösung hab ich mir mal umfunktioniert und sie klappt im Grunde auch rein für die Beschreibung. Ich würde das blur dann mit jQuery lösen.

Es gibt sicher wieder mal zig Möglichkeiten. Könnt ihr für meinen Fall hier was anderes eher empfehlen?

In meinem Kopf habe ich sowas wie einen invisible Block, der über JS dann bei hover visible gemacht wird. Aber das geht ja sicher auch nur, wenn das Bild eine fixe Höhe hat. Wobei ja in dem Bootstrap-Beispiel von oben die Höhen auch unterschiedlich sind und das Hover ja farbig hinterlegt ist. Aber ich schätze, da steckt jede Menge JS-Code dahinter. Und ich will es ja lieber selber coden können als einfach irgendwas zu verwenden, das ich nie im Leben selbst geschrieben habe.

Eine andere Frage noch: Ich habe ja .gallery-col img - wenn ich das in .gallery-item img ändere, haben die Bilder ihre tatsächliche Breite und nicht die 100% von der Spalte. Eigentlich müsste das doch egal sein, denn img ist in item in col... Oder steuere ich damit wirklich, wovon das img seine 100% nimmt? Dann habe ich wieder was gelernt.

Achja und für die Responsability: Kann ich die Spalten irgendwie einfach untereinander anordnen bzw. nur 2 nebeneinander je nach Bildschirmgröße? Dann ist halt eine andere Bildreihenfolge drin. In dem Bootstrap-Beispiel bleibt die Reihenfolge erhalten, so als wären das davor keine Spalten gewesen.

Kann man das nicht ohne Spalten trotzdem einfliegen lassen? Wenn jedes Bild dieselbe Breite in Prozent hat, sind sie nebeneinander gleich breit. Die nächste Zeile sollte dann natürlich schön andocken und keine Linie bilden. Optisch so wie es jetzt auch ist, aber technisch so, dass die Reihenfolge beim Fenster verkleinern erhalten bleibt. Ich erwarte von euch keinen Code für sämtliche Bildschirmgrößen, ich mein nur das Grundgerüst.

Achja, ich denk manchmal zu kompliziert. Langsam glaub ich, mein Hirn braucht mal ne Pause. Sonst wurschtel ich weiter bei Dingen, die viel einfacher gehen könnten.

Mal kurz ein bisschen Info. Ich hab vor mehr als 15 Jahren so einige Webseiten erstellt, in Zeiten von tables... Daaamals. Und nun bin ich dabei, das ganze wieder aufzufrischen und upzudaten. Und in der Zeit hat sich einfach mit CSS3 so viel getan, wovon man damals nur hätte träumen können. Und responsive war halt damals auch noch nicht. Und jetzt hab ich so viel Spaß daran und probier 1000 Dinge gleichzeitig aus. Was es für mich nun schwierig macht, sind eben Flex und Grid. Mit Grid hab ich noch gar nicht gearbeitet und bei Flex - ich sag mal - fuchst mich immer was und dann komm ich hier im Forum drauf, dass es eine primitive Eigenschaft gibt, die mein Problem löst, von der ich haber (noch) keine Ahnung hatte. Ich hab mir zwar schon ein bisschen was zu dem Thema angeschaut, aber am Ende ist es halt dann learning by doing. Das fuchst dann und ich murks rum, aber Spaß macht's dann doch. Und ich hab schon eine Menge gelernt, vor allem hier von euch! Also fettes Dankeschön dafür!

Zitat von Sempervivum

Der Grund ist, dass ich von der Galerie in deinem Eingangsposting ausgegangen bin. Dort sind die Bilder in den Spalten unterschiedlich hoch und daher in der Höhe versetzt. Das würde nicht funktionieren, wenn man sie in Reihen anordnen würde. Und die Animation setzt voraus, dass bei übereinander liegenden Bilder der rechte und linke Rand in einer Linie ist, sonst würde es zu Überdeckungen kommen, wenn die Bilder von unten eingleiten.

Ah, das macht natürlich Sinn. Den letzten Satz verstehe ich jetzt allerdings nicht. Wenn der rechte und der linke Rand in einer Linie sein müssen, die Bilder aber unterschiedlich hoch sind - widerspricht sich das dann nicht?

flex:1 - Super, danke! Ich muss mich definitiv mehr in Grid- und Flex-Systeme einarbeiten!

Zitat von MrMurphy

Das verstehe ich nicht. Bei schmalen Fenstern sind die Cards ja untereinander. Oder meinst du etwas anderes?

Ja, ich dachte, ich mache alle Cards untereinander, nicht nur bei schmalen Fenstern.

Das mit dem "einfach übernehmen" ist zwar sehr lieb und freundlich von dir. Da hab ich dann aber ein Problem damit. Aber wie gesagt, das schau ich mir auf jeden Fall noch an.

Ich probier gerade ziemlich viel rum, auch die anderen Baustellen auf meiner Seite, dass mal das Grundgerüst steht und nachher kommt der Umbau und der Feinschliff. Auch wenn die Vorgehensweise nicht grad optimal ist.