Beiträge von MrMurphy

  • Button für Telefonanruf anklickbar

    Eine Klasse ist nicht notwendig. Dafür gibt es bereits seit Jahrzehnten Selektoren. Zum Beispiel:

    a[href^="tel"] {
      Anweisungen
    }
    a[href^="tel"]::before {
      Anweisungen
    }

    Oder mit Beispielinhalt:

    a[href^="tel"] {
      display: inline-block;
      padding: 1rem 1rem 1rem 1rem;
      border: 1px solid grey;
      border-radius: 0.5rem;
      margin: 1rem 0rem 1rem 0rem;
    }
    a[href^="tel"]::before {
      content: "📞";
      font-size: 0.8rem;
      margin-right: 0.5rem;
    }

    Das hat den Vorteil das nicht bei jeder Telefonnummer eine Klasse eingefügt werden muss. Oder das die CSS-Anweisungen einfach in den CSS-Teil einer anderen Webseite eingefügt werden kann.

  • Cards in Flexbox ausrichte.

    Ich verstehe das jetzt so, dass bei schmaler werdendem Bildschirm zunächst die mittlere Card zentriert in die zweite Zeile rutscht?

    Dann musst du mittels der CSS-Anweisung order beim Entstehen der zweiten Zeile die Reihenfolge der Cards entsprechend ändern, so dass die mittlere Card als letztes angezeigt wird. Dann rutscht sie als erstes nach unten.

  • Text soll sich im div wo möglich die volle Breite nehmen

    Wenn ein Text andere Elemente (meist Bilder) umfließen soll, funktioniert das weder mit Flexbox noch mit CSS-Grid. Die sind ausschließlich dafür gedacht, Elemente, die sich in einer Zeile befinden, nebeneinander darzustellen.

    Damit Text (in deinem Fall) ein Bild umfließen kann, ist in CSS float vorgesehen. Das gibt es bereits seit den ersten CSS-Versionen. Um es korrekt zu verwenden muss einiges bedacht werden, wobei die Anwendung in der Praxis dann nicht schwierig ist.

    Infos zu float findest du zum Beispiel unter:

    Die CSS float-Eigenschaft verstehen und anwenden
    Elemente können mit CSS nach links oder rechts gefloatet werden, was dazu führt, dass Fließtexte auf der jeweils anderen Seite herumlaufen. Die Technik kann…
    kulturbanause.de

    Ich habe mal ein Beispiel auf deiner Grundlage erstellt. Da mir dein Bild nicht vorlag musste ich ein anders verwenden. Folge: Da dein Bild eine andere Größe hat musst du eventuell einige Größenangaben anpassen. Aber erst mal ersetzen und dann Änderungen vornehmen. Im CSS-Teil des Quelltextes habe ich Einträge von dir, die stören, auskommentiert und fehlende Angaben hinzugefügt:

  • Ausrichten von containern und boxen in einer section

    Natürlich funktioniert das. Du benutzt das CSS falsch. Außerdem solltest du mehr auf Tipfehler / Rechtschreibfehler achten.

    Auf deiner Beispielseite schreibst du

    Code
    justify-content: left;

    Das funktioniert aber bei bei Flex- oder Grid-Containern. Zumindest beim Firefox geben das auch die Entwicklerwerkzeuge aus.

    Ich weiß auch nicht was ich von

    Code
    #my-new.section

    halten soll.

  • Ausrichten von containern und boxen in einer section

    Ein main-Element ist für eine korrekte HTML-Seite nicht erforderlich. Das kannst du also auch weglassen.

    Eine id ändert an einem HTML-Element überhaupt nichts. Damit kannst du einem header-Element also auch keine bestimmte Bedeutung geben. Was für eine Bedeutung das header-Element hat hängt allein von seiner Stellung im HTML-Quelltext ab.

    Innerhalb des main-Elements bezieht es sich auf das main-Element. Wenn du in deinem Beispiel das main-Element weglässt bezieht es sich auf die gesamte Webseite. Entsprechend sollte auch jeweils der Inhalt sein.

    Wenn das header-Element bislang für die gesamte Webseite gedacht war hättest du es als direktes Kind vom body-Element in den Quelltext einfügen müssen. Wo es als direktes Kind vom body-Element steht spielt wiederum keine Rolle. Die Bezeichnung "header" sagt nicht aus, dass es sich oben im Quelltext befinden muss, sondern welche Informationen es enthält.

  • Listenpunkte durch Fontawesome Symbole erstzen

    Eine lange Auflistung kenne ich nicht. Schau dir mal folgende Seite an:

    SYMBL (◕‿◕) Symbole, Emoji, Zeichen, Schriften, Alphabete, Hieroglyphen und der gesamte Unicode
    Webservice für die Suche nach Unicode-Zeichen. Suchen, kopieren und fügen Sie beliebige Zeichen ein: 😎 Emoji, ❤ Herz, 💲 Währungen, → Pfeile und mehr 🚩
    symbl.cc

    Du musst dich da etwas durchklicken, ich finde die Seite etwas unübersichtlich. Ein direktes Beispiel

    👀 - Augen Emoji 👀 Körperteile aus der Kategorie 🙏 Menschen & Körper, Unicode-Nummer: U+1F440 📖 Bedeutung erfahren und ✂ Symbol kopieren
    Emoji symbol: 👀, Name des Zeichen: augen, Unicode-Nummer für das Zeichen: U+1F440, das Zeichen ist im Block enthalten: Miscellaneous Symbols and Pictographs.
    symbl.cc

    Oder dein 1F44D:

    👍 - Daumen hoch Zeichen Emoji oder Daumen Hoch 👍 Geschlossene Hand mit den Fingern aus der Kategorie 🙏 Menschen & Körper, Unicode-Nummer: U+1F44D 📖 Bedeutung erfahren und ✂ Symbol kopieren
    Emoji symbol: 👍, Name des Zeichen: daumen hoch zeichen, Unicode-Nummer für das Zeichen: U+1F44D, das Zeichen ist im Block enthalten: Miscellaneous Symbols and…
    symbl.cc

    Wenn du die Bezeichnung hast und wissen willst welches Zeichen dahintersteckt kannst du die Bezeichnung also direkt in die Adressleiste deines Browsers eingeben.

  • Listenpunkte durch Fontawesome Symbole erstzen

    Oder auch mit etwas übersichtlicherem HTML:

    HTML:

    CSS:

    Code
          .check3 li {
         list-style-type: "✔";
      }
      .check4 li {
         list-style-type: "\1F44D";    
      }

  • Wie kann man erzwingen, dass die Höhe eines Flex-Elements im gleichen Verhältnis wie seine Breite schrumpft?

    Ohne den Quelltext (HTML und CSS) sowie die Bilder können wir dir nur ganz allgemein helfen und auch nicht ausprobieren, ob unsere Lösungen funktionieren.

    Ich würde zwei Möglichkeiten ausprobieren:

    a) Die Bilder zu Blockelementen machen und ihnen ein max-width mit auf den Weg geben

    oder

    b) eine geeignete Einheit wie vw verwenden.

    Eventuell ist auch CSS-Grid geeigneter als Flexbox.

  • Brauche bitte Hilfe

    Um dir helfen zu können benötigen wir entweder

    a) einen Link zu der Seite

    oder

    b) den Quelltext aller HTML- und CSS-Dateien sowie die Bilder.

    So kann man nur mehr raten als vermuten, dass die vorhandene CSS-Angabe zu dem aktuellen Hintergrundbild angepasst werden kann.

  • Browsercache bringt mich zur Verzweiflung

    Zitat

    weil ich mich nicht ständig in Foren neu anmelden möchte, kommt ein Löschen des Cache nur als Notlösung in Frage.

    Meiner Kenntnis nach hat das Löschen des Caches nichts mit dem Anmelden bei Foren zu tun. Meine Forenanmeldungen waren nie weg wenn ich den Cache geleert habe, egal von welchem Browser.

    Zum Testen habe ich von den gebräuchlichen Browsern (Firefox, Chrome, Opera, ...) immer Versionen ohne Änderung der Einstellungen oder zusätzlich installierten Apps.

    Da hatte und hat Chome nie Probleme mit dem Cache. Wenn ich geänderte Seiten erneut aufrufe werden die Änderungen direkt angzeigt.

    Wenn das bei dir nicht der Fall ist kann das unterschiedliche Ursachen haben. Zum Beispiel

    - Du hast Einstellungen geändert und das vielleicht vergessen, weil das aus Versehen geschehen ist.

    - Eine von dir installierte App hat Einstellungen geändert, vielleicht weil sie nicht sauber installiert ist.

    - Du hast dir (eventuell trotz Schutzmaßnahmen) Schadsoftware eingefangen

    - Wenn du Windows benutzt kann die Registry defekt sein

    - Cookies können Probleme bereiten

    und, und, und ...

    Ohne an deinem Rechner zu sitzen kann man da nur raten. In Suchmaschinen wirst du ja schon nach dem Problem gesucht haben.