Beiträge von MrMurphy

    In dem folgenden Script vom Kulturbanausen (Demo dazu) wird einem HTML-Element eine Klasse hinzugefügt, sobald es vollständig im Viewport (Browserfenster) ist. So können Scrolleffekte erzeugt werden.



    Wie muss das Script geändert werden, damit die Klasse bereits hinzugefügt wird, wenn sich dass Element erst zu 20% im Viewport befindet?

    Vorweg: Ich habe keine Ahnung von JavaScript und habe es ähnlich wie du versucht, halt etwas im Nebel gestochert. Meine Ergebnisse dazu sind folgende (mit Fachbegriffen in Programmiersprachen kenne ich schon gar nicht aus, deshalb verwende ich die wahrscheinlich falsch):


    Zitat

    Im JS der HTLM-Seite hab ich nun auch Class statt ID drinnen.


    Nein, hast du nicht.


    Offensichtlich hast du


    Code
    1. .getElementById


    durch


    Code
    1. .getElementByClass


    ersetzt. Problem: .getElementById gehört zur JavaScript Programmiersprache, .getElementByClass gibt es nicht. Um Klassen anzusprechen gibt es


    Code
    1. .getElementsByClassName


    Damit funktioniert es aber auch nicht. Hintergrund ist wohl dass bei

    Code
    1. .getElementById


    genau eine Antwort zurückgegeben wird, bei


    Code
    1. .getElementsByClassName


    jedoch immer eine Matrix?, also ein Antwortgitter, auch wenn die Klasse nur einmal im Quelltext vorkommen sollte. Das Programm erwartet aber nur eine Antwort, keine Matrix.


    Das sind meine laienhaften Erkenntnisse.

    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.

    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.

    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/result…oren+einfach+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

    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.

    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.

    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.

    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?

    Was für ein blau meinst du?


    Dunkelblau? Normales Blau? Hellblau? Violett? Lila?


    Im CSS ist kein blauer Rand hinterlegt. Beim Anklicken wird zwar ein dünner, hellblau/lila Rand sichtbar. Das ist jedoch eine Art optische Täuschung durch die unterschiedlichen Grautöne.

    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.

    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.

    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.

    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.

    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.