Beiträge von MrMurphy

Noch ein kleiner Tip am Rande:

Um den head-Bereich übersichtlicher zu gestalten kann die Einbindung der CSS-Dateien auch "ausgelagert" werden. Ich selbst verwende dafür eine "zentrale.css".

Statt

<link rel="stylesheet" href="fontawesome/css/all.css">

<link rel="stylesheet" href="stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="stylesheets/bootstrap_carousel.css">

<link rel="stylesheet" href="stylesheets/main.css">
<link rel="stylesheet" href="stylesheets/nav.css">
<link rel="stylesheet" href="stylesheets/footer.css">
<link rel="stylesheet" href="stylesheets/responsive.css">

würde im head-Bereich dann nur noch

<link rel="stylesheet" href="stylesheets/zentrale.css">

stehen.

In der zentrale.css werden die CSS-Dateien folgendermaßen eingebunden:

@import url(../fontawesome/css/all.css);

@import url(bootstrap.min.css);
@import url(bootstrap_carousel.css);

@import url(main.css);
@import url(nav.css);
@import url(footer.css);
@import url(responive.css);

Die Pfadangaben gehen vom Standort der zentrale.css aus.

So stehen alle CSS-Dateien direkt allen Webseiten zur Verfügung. Durch das "z" von zentrale.css sollte die Datei im Regelfall bei der üblichen Sortierung als letzte im Dateimanager angezeigt werden und ist deshalb schnell zu finden, falls dort Änderungen durchgeführt werden sollen.

Falls für eine Webseite ein zusätzliches, nur für die Seite gültiges CSS erforderlich ist, binde ich die dafür erforderliche CSS-Datei halt zusätzlich ein. So zum Beispiel für die Mitglieder-Seite:

<link rel="stylesheet" href="stylesheets/zentrale.css">
<link rel="stylesheet" href="stylesheets/mitglieder.css">

Immer noch übersichtlich. Und selbst wenn die Dateien nach langer Zeit mal wieder bearbeitet werden fällt sofort ins Auge, dass es für diese Webseite zusätzliche CSS-Regeln gibt. Das erleichtert die langfristige Pflege.

Vielleicht ist das für dich eine Überlegung wert.

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:

   /*.grid-zwei-spalten,
     .grid-drei-spalten*/
   @media all {
      .grid-zwei-spalten,
      .grid-drei-spalten {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 0.5rem;
      }
   }

   /*.grid-zwei-spalten*/
   @media only screen and (min-width: 821px) {
      .grid-zwei-spalten>:nth-child(1) {
         grid-column: 1 / 3;
      }
      .grid-zwei-spalten>:nth-child(2) {
         grid-column: 3;
      }
   }

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?

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.