Damit kann ich erst mal weitermachen
Beiträge von Emess
-
-
Wieder code gespart.
Habe mit Hilfe deiner verlinkten Seite "Selfhtml" sie Section "about me" angegangen und habe es auch jetzt responsive hinbekommen.
Allerdings verzweifel ich an der Überschrift flex-item-left>h1 die baut sich einfach links vom Text auf. Ich denke das wird in meinem Fall mit jedem
tag passieren. Ich steh da auf dem Schlauch.
Die wilden Farben auf der Seite dienen nur meiner Orientierung um zu erkennen wo sich beim testen was ändert
-
Ich werd verrückt!
Doch zu Verständnis. Ich habe jetzt zwei ul Regeln was genau ist der feine Unterschied
CSS
Alles anzeigen#filter ul{ display: flex; flex-wrap: wrap; row-gap: 0.5em; } #filter>ul{ width: 100%; display: flex; justify-content: center; margin-top: 10px; border-bottom: 2px solid rgba(2, 2, 2, 0.57); padding-bottom: 10px; box-sizing: border-box; margin-bottom: 10px; }Die untere Regel betrachtet die ul als Kind. Nehme ich an?
Aber was macht die erste? Davon abgesehen, dass sie mein Problem löst.
-
Habe gerade etwas mit der Aboutme section experimetiert.
Dabei ist mir aufgefallen, dass der Filter Selektor noch nicht responive ist.
Habe im Inspector etwas rumgedoktort um eine media querry zu erstellen. Das ist aber gescheitert. jedenfalls bekam ich es nicht hin.
Deshalb dachte ich mir, dass die filter.js der schlüssel sein könnte.
Wenn du Zeit und lust hast könntest du ja mal drüberschauen.
-
Mal sehen was die Freund sagen?
Jedenfalls Tausend Dank für deine Hilfe
-
Ich habe es mi start und stretch probiert macht kein unterscheid.
Oder meinst du center passt doch besser?
-
Ich versuche mal was und melde mich dann
-
-
jetzt habe ich wenn ich selektiere außer bei "ALL" keine Möglichkeit weiter zu klicken. Die Box verhält sich wie bei einem Einzelbild.
Also keine Pfeile vor/zurück kein Kreuz zum beenden. Nichts.
-
Ok! Punkt 2
Verstanden das bekomm ich hin
Punkt 1
Angesehen und kopiert etwas nachvollziehbar ist es schon. Aber was ist ein Bezeichner?
-
Hab mal ein paar Bilder hinzugefügt. beim testen sind mir 2 Sachen aufgefallen.
1.
Das selektieren der Filter klappt gut. Doch wenn ich eine Sparte auswähle und mir diese dann in der Box anschaue. Dann verhält sich die Box als ich ich "ALL" selektiert. Das ist ja sehr suboptimal.
2.
Wenn ich "Natur" selektiere stimmt der Abstand des letzten Bildes nicht. ich kann aber keinen Fehler finden.
Vielleicht fällt dir ja was dazu ein?
-
das war ja alles auf center. Doch das hat mich auf die richtige Spur gebracht.
Der Inspector hat mir den Fehler gezeigt.
In der style.css sind die Bilder "width:350px;
In der filter.css waren sie mit nur 300px deklariert.
Jetzt stimmt es.
-
Immer wenn alles super ist. Fällt einem noch eine Kleinigkeit auf.
Wo wird eigentlich der vertikale abstand der Bilder im css geregelt.
mit "column-gap" kann ich den Abstand nur vergrößern aber nicht verkleinern.
CSS
Alles anzeigen#galerie { background-color:rgb(56, 52, 59); min-height: 100vh; padding-bottom: 40px; justify-content: flex-start; } #galerie>h1{ font-family: Arial, Helvetica, sans-serif; color: bisque; font-size: 2rem; } .heading-text { margin: 0 0; padding-top: 10px; font-size: 2rem; text-align: center; } .image-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; column-gap:10px; } .image-gallery>figure { margin: 0; flex-basis:310px; /* width: 350px; */ position: relative; cursor: pointer; } .image-gallery::after { content: ""; flex-basis: 310px; } .image-gallery figure img { object-fit: cover; max-width: 100%; height: auto; vertical-align: middle; border-radius: 5px; } -
Zu 1
Habe allen Cache gelöscht und sogar den Firefox und andere Browser probiert. Aber!
Zu 2 das können wir vergessen da erledigt bzw kapier
-
Auf jeden Fall sind jetzt die Bilder gleich nach dem Laden sichtbar, das ist schon Mal sehr gut.
1.
Das heißt im Augenglick ist es so, dass ich erst einen Filter betätigen muss.
Sind wir uns da einig?
2.
Wie wäre es wenn wir den ersten Link auf class="active" setzen?
-
ok jetzt ist es so
HTML
Alles anzeigen<div class="image-gallery photo"> <figure data-filter="dog"> <a data-fancybox="gallery" href="img/galerie/dog/dog1.jpg"> <img src="img/galerie/dog/dog1_t.jpg" alt="Gerdtrud" /> <figcaption class="overlay">Gerdtrud</figcaption> </a> </figure> <figure data-filter="food"> <a data-fancybox="gallery" href="img/galerie/food/kul1.jpg"> <img src="img/galerie/food/kul1_t.jpg" alt="" /> <figcaption class="overlay">Entenschinken luftgetrocknet</figcaption> </a> </figure>was mich etwas irritiert, ist dass h1 Überschrift und ie Filterauswahl erst mittig angezeigt wird und erst bei Filteranwendung alles hochrutscht und man die Bilder sehen kann.
CSS#galerie { background-color:rgb(56, 52, 59); min-height: 100vh; padding-bottom: 40px; }vielleicht ist hier was falsch?
-
Ich hab das jetzt so verstanden
Code
Alles anzeigen<div class="image-gallery photo"> <figure data-filter="dog" class="hidden"> <a data-fancybox="gallery" href="img/galerie/dog/dog1.jpg"> <img src="img/galerie/dog/dog1_t.jpg" alt="Gerdtrud" /> <figcaption class="overlay">Gerdtrud</figcaption> </a> </figure> <figure data-filter="food" class="hidden"> <a data-fancybox="gallery" href="img/galerie/food/kul1.jpg"> <img src="img/galerie/food/kul1_t.jpg" alt="" /> <figcaption class="overlay">Entenschinken luftgetrocknet</figcaption> </a> </figure>Das hat bei mir keine Auswirkung. Nach dem Hochladen und klick auf Galerie in der Navigation kommt das
Erst wenn ich auf einen Filter klicke kommen entsprechen Bilder. Aber die Thumbnails sollten ja gleich zu sehen sein.
-
Bin ich blöd? langsam bekomm ich zweifel
Code
Alles anzeigen<div class="image-gallery photo"> <figure data-filter="dog"> <a data-fancybox="gallery" href="img/galerie/dog/dog1.jpg"> <img src="img/galerie/dog/dog1_t.jpg" alt="Gerdtrud" /> <figcaption class="overlay">Gerdtrud</figcaption> </a> </figure> <figure data-filter="food"> <a data-fancybox="gallery" href="img/galerie/food/kul1.jpg"> <img src="img/galerie/food/kul1_t.jpg" alt="" /> <figcaption class="overlay">Entenschinken luftgetrocknet</figcaption> </a> </figure> <figure data-filter="heimat"> <a data-fancybox="gallery" href="img/galerie/heimat/heimat1.jpg"> <img src="img/galerie/heimat/heimat1_t.jpg" alt="" /> <figcaption class="overlay">Heimat</figcaption> </a> </figure> <figure data-filter="snake"> <a data-fancybox="gallery" href="img/galerie/snake/korn1.jpg"> <img src="img/galerie/snake/korn1_t.jpg" alt="" /> <figcaption class="overlay">Abgestreift</figcaption> </a> </figure> <figure data-filter="food"> <a data-fancybox="gallery" href="img/galerie/food/kul2.jpg"> <img src="img/galerie/food/kul2_t.jpg" alt="" /> <figcaption class="overlay">Scaloppina Parmigiana</figcaption> </a> </figure> <figure data-filter="dog"> <a data-fancybox="gallery" href="img/galerie/dog/dog2.jpg"> <img src="img/galerie/dog/dog2_t.jpg" alt="Gerdtrud" /> <figcaption class="overlay">Welpen-Gerdtrud </figcaption> </a> </figure> <figure data-filter="snake"> <a data-fancybox="gallery" href="img/galerie/snake/korn3.jpg"> <img src="img/galerie/snake/korn3_t.jpg" alt="" /> <figcaption class="overlay">Kornnatter</figcaption> </a> </figure> <figure data-filter="heimat"> <a data-fancybox="gallery" href="img/galerie/heimat/heimat2.jpg"> <img src="img/galerie/heimat/heimat2_t.jpg" alt="" /> <figcaption class="overlay">Heimat</figcaption> </a> </figure> <figure data-filter="snake"> <a data-fancybox="gallery" href="img/galerie/snake/korn2.jpg"> <img src="img/galerie/snake/korn2_t.jpg" alt="" /> <figcaption class="overlay">Kornnatter</figcaption> </a> </figure>ich find da keine class="hidden" . Sorry aber ich vertsteh dich da gerade nicht
-
Also wenn ich das
Codefigure.hidden { /* flex-basis: 0; */ display: none; }deaktiviere, funktioniert der Filter nicht. Im html-tag >figure> wird diese aber doch mitgegeben
-
Vielleicht wäre das ja für dich eine Herausforderung . Für mich ist es ein nettes Gadget auf das ich warte bist jemand es umgesetzt hat.
Also erstmal unwichtig.
Was mir wirklich aufgefallen ist und mir nicht gefällt ist:
Wenn ich die Seite aufrufe und über den Link Galerie zu dieser wechsel ist erst mal leer erst bim betätigen eines Filters werden die Bilder angezeigt.
Ich habe das
CSSfigure.hidden { /* flex-basis: 0; */ display: none; }im verdacht.
Da müsst wohl noch was dazu
