flex-item-left>h1 finde ich aber ich weiß nicht genau, was Du erreichen willst? Soll diese Überschrift über dem Text stehen? Dann musst Du entweder flex-direction: column; hinzu fügen oder einfach das display: flex; weg lassen, dann bauen sich die Elemente ohnehin übereinander auf.
Beiträge von Sempervivum
-
-
Dass es da schon einen Block gibt, hatte ich gar nicht gesehen. Dann brauchst Du nur das flex-wrap: wrap; in den unteren zu übernehmen und kannst auf den ersten verzichten.
#filter>ul bedeutet, dass das ul ein direktes Kind ist während ein Leerzeichen bedeutet, dass es irgend ein Nachfahre sein kann, also auch Enkel, Urenkel etc.
Das ist hier ganz gut beschrieben:
-
-
Versuche es, mir gefällt es mit center am besten, weil dann die großen Zwischenräume in der Mitte nicht auftreten.
-
Das liegt an diesem CSS:
Zitatjustify-content: space-between;
Wie der Begriff schon sagt, wird der leere Raum zwischen die Elemente gelegt und in diesem Fall ist ziemlich viel leerer Raum: 2 Elemente + gab. Versuch mal center statt dessen.
-
-
-
2. habe ich mir jetzt angesehen. Das liegt daran, dass es in der Galerie ganz am Ende ein Dummy-Element gibt, das mit :after erzeugt wurde:
Ich vermute, Du hast das eingefügt, um die Darstellung für eine bestimmte Anzahl von Spalten und Elementen passend zu machen? Aber in diesem speziellen Fall bringt das die Anordnung durcheinander.
-
-
1. Das ist allerdings suboptimal und liegt daran, dass Fancybox alles im Bauch hat nachdem es erst Mal initialisiert ist.
Die Lösung ist aber relativ einfach: In der Callback-Funktion für das Filtern die Fancybox zerstören und neu initialisieren:
Code
Alles anzeigenconst liItem = document.querySelectorAll('#filter ul li'); const figureItem = document.querySelectorAll('div.image-gallery figure'); liItem.forEach(li => { li.onclick = function () { //active liItem.forEach(li => { li.classList.remove('active'); }) li.classList.add("active"); //Filter const value = li.textContent; figureItem.forEach(figure => { if (figure.dataset.filter == value.toLowerCase() || value == "All") { figure.classList.remove('hidden'); } else { figure.classList.add('hidden'); } }); Fancybox.destroy(); Fancybox.bind('[data-filter="' . filter . '"] a'); } });
(ganz unten)
2. sehe ich mir jetzt an ...
-
Hier verschafft sich Flex Vorrang wegen dieser Anweisung: justify-content: space-between;. Wenn Du das auf center setzt, rücken die Bilder sofort zusammen.
-
Zu 1.: Nein, da liegen wir vollkommen auseinander. Bei mir sind sie gleich sichtbar aber Du musst offenbar erst eine Filtertaste drücken.
Lade doch mal mit Strg+F5 neu, dein CSS ist ausgelagert und es könnte ein Problem mit dem Cache sein.
Zu 2.: Das würde bewirken, dass die Taste hervor gehoben wird aber ich erwarte nicht, dass das die Bilder sichtbar macht.
Übrigens: In meinem vorigen Posting habe ich vergessen, das CSS zu kommentieren: Es soll bewirken, dass Überschrift und Filterleiste immer oben am Platz bleiben und nicht vertikal springen wenn man den Filter umschaltet.
-
Auf jeden Fall sind jetzt die Bilder gleich nach dem Laden sichtbar, das ist schon Mal sehr gut.
Was ich beobachte ist, dass die Galerie immer vertikal mittig im Container liegt, deshalb verschieben sich Überschrift und Filterleiste je nach Filterung.
-
Jetzt verstehe ich überhaupt nichts mehr: Bei meinem Posting #57 waren nach dem Laden alle Bilder sichtbar und keine Klasse "hidden" im figure. Also alles in Ordnung.
Jetzt ist die Klasse jedoch drin, auch in der Quelltextansicht und folgerichtig keine Bilder sichtbar. In dem folgenden Screenshot habe ich mit dem Seiteninspektor die Klasse gelöscht und sofort wird das eine Bild sichtbar.
Auf jeden Fall muss diese Klasse heraus aus dem HTML. Wenn Du sie in deinem Editor nicht siehst, müssen wir weiter forschen.
-
Ich verstehe das jetzt auch nicht: Wenn ich jetzt miflo.de lade, sind die Bilder am Anfang sichtbar und keine Klasse "hidden" am figure.
Dieses:
hatte ich aus miflo.de kopiert, allerdings aus der Inspektor-Ansicht, d. h. diese Klasse kann genau so gut durch JS gesetzt worden sein. Da habe ich wohl ein wenig Verwirrung gestiftet, tut mir Leid.
Da die Bilder jetzt nach dem Laden sichtbar sind, ist aber jetzt alles OK, hoffe ich?
-
-
Du hast im HTML schon die Klasse "hidden" gesetzt, das brauchst Du nicht, sie wird erst beim Filtern durch JS gesetzt für die Elemente, die nicht angezeigt werden sollen.
-
Man ist ja neugierig und ich wollte wissen, wie man das auch mit PHP machen kann. Dies ist das Ergebnis:
1. Mit String-Manipulation des HTML:
Code
Alles anzeigen$parent = $_SERVER["SCRIPT_NAME"]; preg_match_all('/href="([^"]+)"/', $html, $matches); var_dump($parent); var_dump($matches); for ($i = 0; $i < count($matches[1]); $i++) { $href = $matches[0][$i]; $url = $matches[1][$i]; if (strpos($parent, $url) !== false) { $htmlModStr = str_replace($href, $href . ' class="active"', $html); } } var_dump($htmlModStr); echo $htmlModStr;
2. Mit Parsen durch DOMDocument:
Code
Alles anzeigen$parent = $_SERVER["SCRIPT_NAME"]; $dom = new DOMDocument; $dom->loadHTML($html, LIBXML_NOWARNING | LIBXML_NOERROR); $links = $dom->getElementsByTagName('a'); foreach ($links as $link) { $url = $link->getAttribute('href'); if (strpos($parent, $url) !== false) { $link->setAttribute('class', 'active'); } } $htmlModDom = $dom->saveHTML(); var_dump($htmlModDom); echo $htmlModDom;
Bei beiden wird zunächst das HTML als String in der Variablen $html definiert, z. B.:
Code$html = ' <nav> <ul> <li> <a id="navi01" href="index.php">Startseite</a></li> <li> <a id="navi02" href="master-1.php">Seite 1</a></li> <li> <a id="navi03" href="master-2.php">Seite 2</a></li> </ul> </nav>'; $parent = $_SERVER["SCRIPT_NAME"];
Beides erfordert keine Änderungen in der Elterndatei und ist nicht viel komplizierter als die Lösung mit Javascript.
-
Zitat
Dabei ist mir aufgefallen, dass ich viel weniger und verständlichen html- Code habe als zb. mit Bootstrap.
Das ist genau der Grund, warum ich selbst kein Freund von Bootstrap bin. Freut mich, dass Du das auch so siehst.
Was die Animation mit dem Gleiten zum Platz betrifft, so habe ich das schon bei Isotope gesehen, das Du am Anfang gepostet hattest. So weit ich das überblicke werden dort die Positionen nicht mit Flex oder Grid fest gelegt sondern komplett mit Javascript berechnet.
Auf der einen Seite bin ich nicht so dafür, das Rad neu zu erfinden aber auf der anderen wäre es eine interessante Herausforderung, so etwas wie bei Ben Yahia selbst aufzubauen. Der Effekt, dass die Bilder von unten her eingleiten, wäre noch relativ einfach zu machen: Wie bisher die Positionen durch Flex festlegen lassen, aber direkt nach dem Filtern durch transform:translate die Position nach unten verschieben und dann mit transform: translate(0,0) an den endgültigen Platz gleiten lassen. Die Animation kann man dabei durch CSS machen lassen, man braucht nur die Positionen am Anfang und Ende zu setzen.
-
Yep, weil diese Aufgabe hin und wieder vorkommt, habe ich etwas in der Schublade. Man kann das mit wenigen Zeilen Javascript erledigen:
Codeconst url = document.location.href; document.querySelectorAll('nav li a').forEach(item => { if (url.includes(item.href)) { item.classList.add('active'); } });
Den Selektor musst Du ggf. anpassen. Und basierend auf der Klasse "active" kannst Du dann den Link hervorheben wie Du es möchtest.