Beiträge von MrMurphy

  • Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

    Richtig. Masonry ist es egal welche HTML-Container verwendet werden.

    In diesem Fall verweist der Seitenersteller aber im CSS und wohl auch im JavaScript (id + ' > li)? auf li Elemente. Die dürfen sich nach den HTML-Regeln wiederum nur direkt in ul- oder ol-Elementen befinden. Von daher ist der Aufbau mit ul + li- Elementen ohne Änderungen im CSS und JavaScript hier zwingend.

    div-Elemente sind zudem nach den HTML-Regeln direkt als Kindelemente von ul-Elementen nicht zulässig. Die Browser versuchen zwar jeden Mist-Quellcode irgendwie vernünftig anzuzeigen, trotzdem kann man jede Menge Ärger vermeiden, wenn der Quellcode nach den HTML- und CSS-Regeln erstellt wird.

    Von daher solltest du erst mal die Seiten komplett runterladen, so dass die auf deinem Rechner funktionieren. Die Dateien dann vom unnötigen Ballast befreien und den Rest sinnvoll sortieren und strukturieren. Dabei dann auch schon mal ein paar eigene Bilder zum Testen einfügen. Und zum Beispiel Klassen sinnvoll umbenennen. Dabei immer wieder kontrollieren ob die Seite noch funktioniert. Dann bleiben im Endeffekt nur die notwendigen Quellcodes übrig, die sich dann deutlich einfacher in die eigene Webseite einbauen lassen.

  • Sticky Element erzeugt weißen Streifen

    Dein Problem resultiert aus den sogenannten "Collapsing Margins".

    Das ul-Element und die li-Elemente haben von Haus aus jeweils einen Außenabstand nach oben. Die beiden erzeugen dann den Abstand.

    Eine sinnvolle Lösung ist deshalb im CSS jeweils beim ul-Element und für die li-Elemente (also zwei Einträge) ein "margin-top: 0;" einzufügen. Dann kannst du auf dein den negativen margin beim Button verzichten, der zwar funktioniert, aber im allgemeinen als unschöner CSS-Code angesehen wird.

    Noch ein Tip, weil ich nicht weiß ob es vor dir so gewollt ist: Mach mal das Fenster schmaler und schaue wie sich der Button verhält. Bei schmalen Fenstern ist der nicht mehr erreichbar.

  • bootstrap custom-file border color ändern

    Das habe ich aus analogen Informationen gelernt - also Büchern. Nach YouTube-Videos habe ich noch nicht gesucht. Mit der Suche nach "CSS Geschwister-Selektoren einfach erklärt" werden aber jede Menge deutschsprachige Videos angeboten. Die Qualität wird gemischt sein, da musst du dich dann etwas durchklicken:

    https://www.youtube.com/results?search…ch+erkl%C3%A4rt

    Auf die schnelle habe ich diese beiden Videos speziell zu Geschwister-Selektoren (es gibt noch das plus-Zeichen) gefunden:

    https://www.youtube.com/watch?v=DInky_FW69I

    und

    https://www.youtube.com/watch?v=eBAiOQzpJzo

  • bootstrap custom-file border color ändern

    Die Tilde ist ein sogenannter Geschwister-Selektor.

    Damit werden Elemente auf der gleichen Ebene ausgewählt. Die meisten anderen Selktoren können nur Elemente auf tieferstehenden Ebenen ansprechen.

    Ich habe die Einstellungen mit meinen Erfahrungen gesucht.

    Meinst du mit "Firefox debugger" die Möglichkeit "Element untersuchen"? Da ist die CSS-Anweisung etwas tricky zu finden. Dort habe ich sie erst im nachhinein gefunden.

    Und zwar muss beim input-Element die :focus angeklickt werden und dann müssen im Label-Element die CSS-Anweisungen kontrolliert werden. Heißt: Beim an- und abklicken von :focus ist kein Unterschied zu sehen, da der bei dem Label-CSS angezeigt wird. Ohne zu wissen dass im Bootstrap-CSS die "Geschwister-Anweisung" hinterlegt ist helfen die Firefox-Infos da nicht weiter.

  • bootstrap custom-file border color ändern

    Die Schwierigkeit dir zu helfen ist, dass wir das Problem nicht nachvollziehen können.

    Mit deinen Quelltextschnipseln können wird das Problem nicht nachbauen. Zudem passt deine Grafik nicht zu deinen Quelltextschnipseln.

    Wenn dein Quelltext die komplette Webseite ist solltest du zunächst die Fehler beseitigen. Zum Beispiel fehlende Elemente wie body enfügen.

    Soweit ich deiner Grafik entnehmen kann ist nicht das Label-Element das Problem. Der Rahmen liegt um einen der umgebenen Container wie form oder div. Das kann ich aber anhand deiner Angaben leider nicht nachvollziehen.

    Am besten wäre du würdest die Seite online stellen. Oder den Quelltext der gesamten Seite zeigen.

  • Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

    Tip von mir:

    Deine Testbilder haben alle die gleiche Grundgröße und dieselben Breiten-/Höhenverhältnisse. Verwende besser auch zum Testen schon die Bilder (oder echte unterschiedliche Bilder zum Testen), die du wirklich verwenden willst. Sonst kann es sein dass du dir mit den einheitlichen Bildern ein passendes Layout zurecht zimmerst, das dir dann aber mit den realen Bildern um die Ohren fliegt.

  • bootstrap custom-file border color ändern

    Der blaue Rand erscheint bei mir nicht.

    Ich verstehe aber auch nicht was du mit

    Zitat

    Wenn du auf den Brwose button druckst, dann im Windows File Menu auf abbrechen clickst, erscheint in Firefox der balue rand

    meinst. Der Button in deinem Beispiel hat auch nicht die Beschriftung "Browse" sondern "Upload".

    Hast du hier den richtigen Quelltext gepostet?

  • Schriftgröße automatisch auf Fensterbreite skalieren

    Es ist leider nicht klar was du willst. Was soll passieren wenn sich die Fensterbreite wie ändert?

    Bei CSS kann mit geeigneten Einheiten einiges gemacht werden.

    Aber: Änderungen der Schriftgröße haben sich nicht bewährt und sind häufig benutzerunfreundlich. Wenn die Schrift eine passende Größe hat ist sie in allen Fenstergrößen auf allen Endgeräten gut zu lesen. Da muss nichts angepasst werden.

    Da Schriftgrößenänderungen zwar möglich sind, in der Praxis Webseiten aber eher schlechter machen, finden sich dazu auch wenig Informationen.

    Was man überhaupt nicht machen sollte: Mit kleineren Fensterbreiten die Schriftgröße verkleinern. Für Besucher ist es in der Regel anstrengend den Text dann noch zu lesen. Zumal zum Beispiel Smartphones häufig unterwegs unruhig in der Hand gehalten werden. Dann sollte die Schrift eher etwas größer sein.

  • Menüpunkt hervorheben

    Den Aria-Kram braucht kein Mensch (mehr).

    ARIA (Accessible Rich Internet Applications) dient dazu Webseiten barrierefreier zu machen.

    Das stammt noch aus Zeiten von HTML4 und CSS2, als HTML-Elemente keine Bedeutung hatten. In HTML5 haben aber alle (ALLE) Elemente eine Bedeutung. Durch Anwendung der dafür gedachten HTML-Elemente kann ohne viel Aufwand eine barrierearme Webseite erstellt werden. Barrierefreie Webseiten sind ein Schlagwort, in der Praxis nicht möglich.

    Bei korrekt angewandten HTML-Elementen ist ARIA nicht erforderlich. Falsch angewandte HTML-Elemente mit ARIA-Attributen zu "verbessern" ist ein Widerspruch in sich.

    Es ist also in jedem Fall sinnvoller die HTML-Grundlagen zu lernen.

    Wenn ARIA verwendet werden soll dann aber auch komplett. Ein paar ARIA-Attribute in eine Webseite einzubauen ist wie eine 3 m lange Leiter mit 6 Sprossen.

    So eine Leiter kann aus noch so stabilem Holz mit wunderschöner Maserung handgerfertigt sein. Sie ist trotzdem unbenutzbar.

  • Sidebar bei OnePage Website einblenden lassen

    Ich verstehe das so, dass die Sidebar nicht angezeigt werden soll, wenn der oberste Teil der einseitigen Webseite angezeigt wird. Erst wenn auf der Seite weiter runtergescrollt wird soll die Sidebar erscheinen.

    Offensichtlich schwebt PeterLustig9 vor, dass jeweils eine Fensterhöhe (zumindest ungefähr) eine Seite der einseitigen Webseite ist. Mir fällt dazu auch kein besserer Begriff ein.

  • verschiedene Dynamische Bildergebnisse aus fremder Webseite zusammenstellen

    Der TE lehnt iFrame-Lösungen zwar ab, aber ich denke dass Andere daran vielleicht Interesse haben. Meiner Erfahrung nach ändern sich sich Seiten wie die der Börsenkurse nur höchst selten. Mit iFrames kommt man zudem schnell zu einem Ergebnis und es lassen sich bei Bedarf mit nur wenigen Änderungen auch andere in sich gleicharte Infoseiten einbinden, die man sonst vielleicht regelmäßig nacheinander anklickt.

    Meine Lösung dazu sieht folgendermaßen aus:

    Das CSS basiert auf meiner Standardtestseite. Heißt: Sie enthält für diese Lösung auch nicht benötigtes CSS. Durch die Struktur sollte aber klar werden, welches CSS erforderlich ist. Im HTML-Teil sollte auch erkennbar sein, wie die iFrames eingebunden sind und damit auch wie zusätzliche hinzugefügt werden können.

  • Auf der Suche nach Galerie Templates

    Mal ein paar Gedanken zu Image-Gallerien:

    Deutlich über die Hälfte, wahrscheinlich fast schon 2/3, aller Endgeräte werden über einen Touchscreen gesteuert. Die kennen aber keine hover-Effekte.

    Heißt: Die haben keine Chance an die hover-Informationen zu kommen.

    hover-Effekte können zwar nachgebildet werden. Entweder wird die Information angezeigt, solange der Screen berührt wird. Dann sind aber Finger und Hand über der Information. Oder sie erscheinen mit einem ersten Antippen und verschwinden mit einem zweiten Antippen. Die Informationen arten dann in eine Antipp-Orgie aus, die kein Besucher lange mitmacht. Du selbst wahrscheinlich auch nicht.

    In deinem ersten Beispiel in dem Eröffnungsbeitrag haben die Bilder zudem hover- und Klick-Effekte (Informtionen aufrufen und Bild aufrufen). Hast du das mal mit einem Touchscreen-Gerät ausprobiert?

    Es mag dir zwar vielleicht langweiliger erscheinen, aber die Informationen zu den Bildern sollten direkt angezeigt werden. Das ist benutzerfreundlicher.

    Das Einschweben der Bilder mag im ersten Moment schön wirken. Beim Scrollen nervt es aber eher, da es dem Besucher viel Zeit klaut. Nennt sich Zeitdiebstahl und gehört zu den "Extras", die Besucher nerven. Erst recht bei eher langsamen Verbindungen, also bei Smarphones und Tablets.

    Wie geschrieben: Ruf solche "schicken" Seiten mal mit einem Smartphone und / oder Tablet auf. Und noch sinnvoller: Bitte Andere das zu tun und ihre Meinung dazu kundzutun.

    Die Zeiten von Bewegungen auf Webseiten sind seit 20 Jahren vorbei. Sowas lenkt nur ab. Vor über 20 Jahren war das Internet noch neu und eine Spielwiese, da war alles interessant. Sowas nervt die meisten Besucher nur noch. Die wollen schnell und problemlos an die angebotenen Informationen. Und dabei nur rauf-/runter-scrollen müssen.

    Entsprechend wirst du auf erfolgreichen, professionellen Seiten kaum Bewegung finden. Wenn, dann meist Werbung, die niemand braucht und die gedanklich gleich mal als unwichtig eingestuft wird.

  • Text soll Bild umfließen (responsive)

    Für mich ist erst mal entscheidend, dir die aktuellen Möglichkeiten von HTML / CSS zu zeigen und dass es sich lohnt, sich mit denen zu beschäftigen. Speziell, wenn du dich doch mal intensiver mit der Erstellung von CSS-Seiten beschäftigen willst.

    Wenn Andere das lesen und Informationen mitnehmen - umso besser und schöner für mich.

  • Text soll Bild umfließen (responsive)

    Zitat

    Mal kurz ein bisschen Info. Ich hab vor mehr als 15 Jahren so einige Webseiten erstellt, in Zeiten von tables

    Damals gab es auch weder Smartphones noch Tablets. Und das Layout war starr wie Stahlbeton.

    Ich habe noch ein Beispiel angepasst an dein ursprünliches Design erstellt. Dazu einspaltig mit einer maximalen Breite von 1000px. Dazu waren wie von mir geplant nur ein paar zusätzliche Einträge in den dafür von mir vorgehaltenen, bislang leeren, CSS-Block erforderlich:

  • Text soll Bild umfließen (responsive)

    Das ist technisch kein Problem. Grid ist dazu weder erforderlich noch sinnvoll.

    Du kannst also einfach das "display: grid;" löschen oder auskommentieren. Die anderen Grid-Anweisungen sind damit inaktiv und stören nicht.

    Gleichzeitig gibst du .buchvorstellung an gleicher Stelle eine maximale Breite und margin links und rechts ein auto mit auf den Weg. Das kann nach den Änderungen folgendermaßen aussehen:

    Code
    .buchvorstellung {
         max-width: 800px;
         margin-left: auto;
         margin-right: auto;
         /*display: grid;*/
         gap: 1rem;
         grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
         grid-auto-rows: 1fr;
      }

    Mehr ist nicht notwendig. Außer ich habe dich falsch verstanden.

  • Text soll Bild umfließen (responsive)

    Ich habe deinen Beitrag erst jetzt gesehen.

    Zitat

    Lässt sich das denn auf mein Design ummünzen?

    Das sollte möglich sein. Dafür habe ich den leeren Block vorgesehen. Dein Design entsteht ja durch Abstände, Rahmen und Farben.

    Zitat

    Kann ich das beim Grid-Layout auch machen, dass jede Grid untereinander kommt?

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

    Zitat

    Ich glaube, es würde verdammt viel Sinn machen, das bei mir dann umzubauen.

    Du solltest mein HTML und CSS einfach übernehmen und mit eigenen Inhalten anpassen können. Mein persönliches CSS vielleicht in der Form

    Dann hat es keine Auswirkungen auf das restliche Layout außerhalb von .buchvorstellung.

  • Text soll Bild umfließen (responsive)

    Noch mal zum Thema alle Cards mit gleicher Höhe.

    Im folgenden Beispiel, bei dem nur die Bilder und der Inhalt getauscht wurden, ist meiner Ansicht nach gut zu erkennen, dass das nicht unbedingt sinnvoll ist, wenn alle Cards gleich hoch sind. Wenn der 3. Container unterhalb der beiden anderen steht ist der Leerraum eher unschön.

    Gleichzeitig ist auch ersichtlich, dass das Layout auch bei geänderten Inhalten sehr stabil ist. Das ist also grundsätzlich für viele Zwecke geeignet.

    Wenn nur die Cards in den einzelnen Reihen gleich groß sein sollen muss im CSS nur die Zeile

    Code
    grid-auto-rows: 1fr;

    gelöscht oder auskommentiert werden. Die kommt nur einmal vor. Das kannst du ja mal ausprobieren.