Beiträge von MrMurphy

    Gefällt, das sieht gut aus.


    Du könntest noch zwei Verbesserungen vornehmen:


    Bei der Klasse grid können die beiden rows-Anweisungen gelöscht werden. Die bewirken nichts.


    Bei der Klasse socialmedia wäre eigentlich grid-column: 3 / 4; korrekt. Wenn ein Container nur eine Spalte füllen soll reicht auch immer die erste Zahl, also grid-column: 3;


    Ich habe mal ein Online-Beispiel erzeugt um zu zeigen, wie wenige Anweisungen für CSS-Grid erforderlich sind, um das drei- /zwei-Spalten-Layout zu erzeugen. Außer den Grid-Anweisungen habe ich nur CSS-Anweisungen benutzt um die Container optisch anzuzeigen.


    https://www.w3schools.com/


    Nach dem Starten mittels des grünen Run-Buttons kann die Fensterbreite durch Verschieben des Mittelstegs geändert werden. Die grid-column: auto; Anweisungen sind in diesem Fall überflüssig, da die Seite nach den Mobile-First-Konzept erstellt ist und das die Standardvorgaben bei CSS-Grid sind.


    Die grid erzeugenden Anweisungen in den beiden Containern grid-zwei-spalten und grid-drei-spalten sind identisch und könnten auch noch zusammengefasst werden. Dann bleiben nur die folgenden CSS-Anweisungen für das Grid-Layout übrig:



    Alles andere ist überflüssig. 5 CSS-Angaben mit 3 Größenangaben.


    Da im Grid-CSS keine HTML-Elementnamen verwendet werden können die beliebig geändert werden, nur die einfache Struktur muss passen.


    rows-Anweisungen sind nicht notwendig, wie es bei CSS-Grid häufig der Fall ist.

    Ich hab' mal ein Online-Beispiel erzeugt, dass die Bilder zunächst in Originalgröße / -verhältnis zeigt und dann mit deinen Angaben.


    https://www.w3schools.com/


    Der Mittelsteg kann zur Änderung der Fensterbreite verschoben werden.


    Ich sehe die gleiche Breite der Bilder, nicht jedoch die gleiche Höhe. Das Seitenverhältnis ist also unterschiedlich.


    Lösch mal einfach zum Spaß die Angaben aspect-ratio und object-fit in dem Online-Beispiel und kontrolliere, was sich ändert (indem du erneut auf "Run" klickst) - nämlich nichts. Die beiden CSS-Angaben haben in dem Zusammenhang überhaupt keine Auswirkungen. Nur die width-Angabe.

    Zitat

    Direkt das Seitenverhältnis des <img> geändert ohne dass das Bild dabei verzerrt wird.

    Du weißt offensichtlich überhaupt nicht was du schreibst. In dem Beispiel wird mit aspect-ratio direkt auf das Bild angewandt verhindert, dass es seine Seitenverhältnisse ändert. Also genau das, was ich geschrieben habe. Du hast jedoch behauptet


    Zitat

    Das stimmt nicht. Mit Hilfe von aspect-ratio und object-fit kann man auch Bilder selber in das gewünschte Verhältnis bringen.

    Mit aspect-ratio können verschiedene Bilder also grade nicht selbst in ein gewünschtes (einheitliches) Seitenverhältnis gebracht werden ohne zu verzerren, wie Simuletsplay es wünscht. Er hat offensichtlich Bilder mit unterschiedlichen Seitenverhältnissen, die er ohne zu verzerren alle in dem gleichen Seitenverhältnis anzeigen will. Das geht nur wie von mir geschrieben.

    Du hast den Blogeintrag offensichtlich überhaupt nicht durchgelesen oder verstanden. Dort wird nirgends beschrieben wie direkt das Seitenverhältnis von Bildern mit aspect-ratio geändert werden kann. Das geht sachlich einfach nicht.


    Entweder werden die Bildern in Containern angezeigt, die ein bestimmtes Seitenverhältnis haben. Oder, direkt auf Bilder angewendet, wird vermieden, dass deren Seitenverhältnis geändert werden kann.


    Ich habe inzwischen nach den Verwendung von aspect-ratio gegoogelt und dort auch genau das bestätigt gefunden.


    Mein Angaben sind richtig. Es wäre nett wenn du dich selbst zunächst informieren würdest, bevor du die als falsch darstellst. Oder zeige ein konkretes Beispiel.

    Danke für die Info. Das


    Zitat

    aspect-ratio und object-fit

    kannte ich noch nicht. Hast du mal ein praktisches Beispiel?


    Zitat


    Jedoch manchmal


    Das man nur Bilder bearbeiten kann, die auf dem eigenen Rechner vorliegen ist klar. Das ist aber die Regel, wie du offensichtlich auch erkannt hast. Wer gute Webseiten erstellen will muss halt Zeit investieren.

    Mir ist nicht ganz klar was du erreichen willst.


    Bilder können per CSS nicht in andere Seitenverhältnisse gebracht werden. Dann werden sie zwangsweise verzerrt.


    Sie können in Containern (üblicherweise dem figure-Element) angezeigt werden, der dann das gewünschte Seitenverhältnis hat.


    Dann muss entschieden werden, ob die Bilder, die ein anderes Seitenverhältnis haben, mit Rändern angezeigt werden sollen oder ob Teile des Bildes abgeschnitten werden sollen.


    Das lässt sich mit CSS bewerkstelligen. Dazu sind auch keine großartigen Berechnungen notwendig.


    Wenn die Bilder nacheinander oder in einem Pop-Up-Fenster angezeigt werden wird wohl auch JavaScript erforderlich sein. Das macht es wieder schwieriger.


    Arbeitest du immer noch mit Bootstrap? Und geht es immer noch um die Thematik aus deinem ersten Beitrag?


    Bootstrap Divs unterschiedlich breit


    Es wäre hilfreich das zu wissen.


    Noch ein Hinweis: HTML und CSS sind keine Bildbearbeitungsprogramme. Zu den Grundlagen und zum bewährten Vorgehen gehört, Bilder für Webseiten zunächst in einem Grafikprogramm vorzubereiten. Dazu gehört sie so zu verkleinern, wie sie maximal auf der Webseite angezeigt werden sollen. Und sie alle in das gewünschte Seitenverhältnis zu bringen, falls das für das Layout erforderlich ist.

    Hallo


    Wie kennen dein Bild nicht. Nachtrag: Eventuell habe dich auch mißverstanden, weil du "ein Text" geschrieben hast und villeicht doch die ganze div-Konstruktion meinst.


    Je nachdem, ob das Bild der Containergröße entspricht oder nicht müssen die CSS-Angaben angepasst werden.


    Im Moment sehe ich Lösungsmöglichkeiten mit CSS-Grid (display: grid;) oder mit "position: absolute;", wobei ich CSS-Grid bevorzuge.

    Du hast die beiden vorhandenen Container (div.wrapper und ul) mit float aus dem Dokumentenfluß entfernt. Dadurch sind sie für den umgebenden Container (div.wrapper) nicht vorhanden. Ohne Inhalt hat der .wrapper nur die Höhe vom oberen und unteren Border (4px).


    Das ist mit ein Grund dafür float nicht mehr für Gestaltungsmaßnahmen zu mißbrauchen. Vor der Einführung von Flexbox und CSS-Grid ging es nicht anders, die Zeiten sind aber seit Jahren vorbei.


    Warum Flexbox (display: flex;) nicht funktionieren sollte erschließt sich mir nicht und ist an Hand deines float-Beispiels nicht nachvollziehbar. Wie hast du es denn versucht?

    Die im Browser hinterlegten Grundfunktionen von :hover und :active haben mit dem CSS nichts zu tun und können entsprechend vom CSS auch nicht beeinflußt werden.


    Browser reagieren jeweils wieder unterschiedlich auf Maus-, Tastatur-, Touch-, oder ... Eingaben. Das Antippen eines Touchscreens bewirkt im Hintergrund andere Funktionen als das Anklicken mit der Maus. Erschwerend kommt hinzu, dass Touchscreens keine hover-Effekte kennen und versuchen, die bei Antippen trotzdem irgendwie sinnvoll darzustellen.


    Es gibt viele Lösungen für Hamburger-Menüs (ein Begriff, den es weder in HTML noch in CSS noch in JavaScript gibt) ohne JavaScript, die aber alle Nachteile für die Webseitenbesucher haben:


    https://www.google.com/


    Davon kannst du ja zunächst mal eine nachbauen, die deinen Vorstellungen am nächsten kommt.

    lagraf meint wohl Geräte mit Touchscreens. Da tritt das von ihm beschriebene Verhalten auf.


    Erst mal die Infos, die energiegeladene Webseitenersteller nicht gerne hören: Solche Naviagationen braucht kein Mensch, sie sind schlicht überflüssig. Auch wenn sie funktionieren stellen sie Barrieren dar. Gute Webseiten verzichten deshalb auf sie, nicht umgekehrt.


    Das heißt nicht, dass nicht Jeder seine Webseiten nach seinen Wünschen erstellen kann und darf, was in meine Angaben meist beleidigt hineininterpretiert wird.


    Die Folge der Unnötigkeit ist, dass es in HTML und CSS keine Unterstützung für solche Menüs gibt. Sinnvoll, barrierearm und einigermaßen gut bedienbar lassen sich Aufklapp- und sogenannte Hamburger-Menüs nur mit Verwendung von JavaScript erstellen.

    Bilder werden bei der Beantwortung deiner Frage nicht weiterhelfen. Zumal das, ich als Sidebar bezeichnen würde, schon rechts ist.


    Für die Erstellung eines Grundlayouts sind allgemein eher Flexbox (display: flex;) oder CSS-Grid (display: grid;) gedacht und geeignet.

    Zitat

    dass die Sprungmarken zu weit gehen


    Du könntest den section-Elementen ein oberes Padding in Höhe der Navigation mit auf den Weg geben. In deinem Beispiel ist leider nur wenig zu sehen, da vernünftiger Inhalt fehlt. Da wir deine Hintergrundgrafik nicht haben servierst du uns teilweise zudem weißen Text auf weißem Grund.


    Da die Navigation durch "position: fixed" aus dem Dokumentenfluß genommen ist, kann der Rest der Seite auf die nicht mehr reagieren. Du musst dich also selbst um die erforderlichen Abstände kümmern.

    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.