Beiträge von MrMurphy

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?

Wenn du uns deinen aktuellen Quelltext zeigst, der das Problem nachvollziehbar macht, mit ziemlicher Sicherheit ja.

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.

Ich kenne Finereader nicht.

Die Abstände zwischen den Absätzen werden mit der CSS-Anweisung margin geregelt. Browser fügen grundsätzlich einen oberen und unteren Abstand hinzu. Der Abstand kann mittels CSS kleiner gemacht oder auf Null gesetzt werden.

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.

Zitat

werde ich mich aus dem Forum zurückziehen.

So eine emotionale Erpressung hast du doch überhaupt nicht nötig. Die Vielfalt der Antworten macht das Forum doch viel wertvoller.

Danke, aber das Script passt wahrscheinlich nicht zu meinen Vorstellungen.

Danke, genau das war mein Ziel.

Mir geht es nur ums Rauf-/Runterscrollen. Wenn ein HTML-Element zum ersten mal beim Scrollen teilweise im Viewport (Browserfenster) erscheint soll einmalig eine bestimmte CSS-Anweisung ausgeführt werden.

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.

function isElementInViewport(element) {
 var rect = element.getBoundingClientRect();
 return (
  rect.top >= 0 &&
  rect.left >= 0 &&
  rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
 rect.right <= (window.innerWidth || document.documentElement.clientWidth)
 );
}

var elements = document.querySelectorAll(".mein-element");
 
function callbackFunc() {
 for (var i = 0; i < elements.length; i++) {
  if (isElementInViewport(elements[i])) {
 elements[i].classList.add("visible");
}

 /* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */
  else { 
   elements[i].classList.remove("visible");
  }
 }
}
 
window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);

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

.getElementById

durch

.getElementByClass

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

.getElementsByClassName

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

.getElementById

genau eine Antwort zurückgegeben wird, bei

.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.