Wie kann ich das Element auf der Webseite finden?

Bei lebegesund.de gibt es als Element ein Blatt, das aber nicht abgespeichert wird und auch wenn ich auf Untersuchen gehe, finde ich es leider nicht. Das was bei frisches Gemüse steht in der Mitte, das Blatt.

Könnt ihr mir helfen?

1 Antwort

JanaL161

04.01.2025, 15:21

Das ist in der Tat recht trickreich gemacht. Das Element existiert nicht direkt im Quellcode, es gibt aber im Container, welches das Bildelement hält, auch dieses Element:

<i class="icon-leaf"></i>

Jedem Element der Klasse "icon-leaf" wird durch eine CSS "content" Eigenschaft der Unicode Codepoint "U+E9A4" als Inhalt (Text) gesetzt; so gesetzter Text kann standardmäßig nicht ausgewählt werden. Dieser Codepoint ist nicht wie sonst an ein existierendes Zeichen (wie "E", "ẞ", "Њ", "务", "𓀟", "⊈", "🬥", auch Emoji "📚") vergeben, sondern zum "Private Use" (für sonstige Zwecke) ausgeschrieben.

Dazu ist die Schriftart "Lgv-Icon-Font" gesetzt, welche dieses spezielle Zeichen als das Blatt-Icon darstellt: https://www.lebegesund.de/themes/Frontend/Lgv/frontend/_public/src/fonts/Lgv-Icon-Font.ttf

Bild zum Beitrag

Solche Tricks sind in der Webentwicklung recht üblich; Icons so darzustellen, spart bei der Übertragung Daten ein und ist auch sonst sehr effizient.

Beachte jedoch, dass auch solche Dinge dem Urheberrecht unterliegen; du darfst diese nicht ohne Weiteres wiederverwenden.

—

Bild zum Beitrag

Woher ich das weiß:eigene Erfahrung – Langjähriger Poweruser & praktische Programmiererfahrung

Singer2010

Beitragsersteller

04.01.2025, 21:48

Nein ich verwende es nicht wieder. Ich hab es nur zum ersten Mal so gesehen. Darf ich denn das Blatt für mich privat kopieren? Wie kann ich denn an diese Tabelle kommen?

JanaL161

04.01.2025, 22:07

@Singer2010

Die Tabelle ist das freie Programm FontForge, durch welches Computer-Schriften erstellt und editiert werden können: https://de.wikipedia.org/wiki/FontForge

Es ist technisch möglich, das Blatt als Vektorgrafik zu exportieren. Für den strikt privaten Gebrauch ist das auch okay (nach meinem Verständnis; diese Angabe jedoch ohne Gewähr. Siehe: https://www.gesetze-im-internet.de/urhg/__53.html)

—

Der einfachste Weg ist hier, in dem Programm in der oberen Leiste unter "Encoding" die Darstellung auf "Compact" zu stellen, sodass nur zugewiesene Symbole angezeigt werden. Mit Doppelklick auf das Blatt kann das Zeichen im Bearbeitungsfenster geöffnet und in diesem unter "File" > "Export" in das gewünschte Zielformat (PNG, SVG) abgespeichert werden.

Singer2010

Beitragsersteller

05.01.2025, 00:40

@JanaL161

Ohje das klingt sehr kompliziert ich bin leider nicht so versiert wie du oder die Homepagemacher dort in Marktheidenfeld.

Meine Fragen:
1) Ich bin im Programm aber mit was soll man es denn öffnen? Mit einem Dokument geht es nicht und wie komme ich zur tabelle? Oben steht nichts von Encoding

JanaL161

05.01.2025, 01:02

@Singer2010

Im Programm solltest zunächst die Schriftdatei, welche von der Website herunter ladbar ist (https://www.lebegesund.de/themes/Frontend/Lgv/frontend/_public/src/fonts/Lgv-Icon-Font.ttf), geöffnet werden können können.

Ich habe meiner Antwort neue Bilder hinzugefügt. Hier sollte die Prozedur ausgehend vom blauen Rechteck anhand der roten Pfeile erklärt sein; ich hoffe, das funktioniert.

Singer2010

Beitragsersteller

05.01.2025, 17:53

@JanaL161

Super wenn nur jeder so toll erklären könnte wie du. Danke. allerdings hab ich es als PNG abgespeichert und da gefällt mir die qualität nicht so. Wenn man es als EPS abspeichert so wie du kann ich das nur mit Gimp öffnen wie soll ich das abspeichern?
Achso du schreibst das ist gängig bei Webseiten? Ich schaue mir öfters den Quelltext an aber hab sowas eben noch nicht entdeckt. Ich dachte das können nur die in Marktheidenfeld (Bayern).

JanaL161

05.01.2025, 18:05

@Singer2010

Der PNG Export in FontForge ist leider nicht so schön und EPS etwas frickelig; das ist richtig.

Ich würde das Dateiformat SVG in FontForge exportiern. GIMP kann solche sehr gut importieren dann als schönes PNG exportieren: https://docs.gimp.org/2.10/de/gimp-file-export-as.html (in Englisch: File > Export As || Hier einfach den Namen eingeben und als Dateiendung .png angeben, dann auf exportieren drücken)

https://praxistipps.chip.de/gimp-bilder-als-png-speichern-so-gehts_20602

Singer2010

Beitragsersteller

05.01.2025, 18:28

@JanaL161

Oh nein jetzt ist da nur das halbe blatt drauf es hat als eps runtergeladen aber öffne ich es in gimp ist nur das halbe blatt zu sehen und wird als solches auch nur halb abgespeichert, qualität ist gut.

JanaL161

05.01.2025, 18:29

@Singer2010

EPS funktioniert nicht sehr gut. Ich würde wie gesagt SVG empfehlen.

Sonst kannst du beim Importieren der EPS Datei die Breite anpassen um den abgeschnittenen Bereich zu retten.

Singer2010

Beitragsersteller

05.01.2025, 18:33

@JanaL161

Ok ich versuchs mal. Gefällt dir das Blatt eigentlich auch?
Interessant, dass das Programm direkt auf der Seite war also der Name. Wo findeich das nochmal genau?

JanaL161

05.01.2025, 18:40

@Singer2010

Das Blatt ist schön, ja! Leider hat es am beginn vom Stamm einen kleinen Fehler.

Interessant, dass das Programm direkt auf der Seite war also der Name. Wo finde ich das nochmal genau?

Könntest du das konkretisieren, ich bin mir leider nicht sicher, welches du meinst ^^

Singer2010

Beitragsersteller

05.01.2025, 19:00

@JanaL161

Ich meine wo das steht:
https://www.lebegesund.de/themes/Frontend/Lgv/frontend/_public/src/fonts/Lgv-Icon-Font.ttf)

auf der seite oder im quelltext genau. Danke. Ja das Blatt ist schön und die Produkte auch. Ich mag sie sehr.

Oh ja ich weiß welchen Fehler du meinst aber ich glaube es gibt auch Blätter draußen in der Natur die so sind also nicht ganz geschlossen unten oder?

Singer2010

Beitragsersteller

05.01.2025, 19:10

@JanaL161

Du bist ja Profi und hast einen guten Blick, wie gefällt dir eigentlich die HOmepage so von der aufmachung her?
Ich kenne die Homepage schon seit 25 Jahren und fand sie früher igendwie schöner, ich find sie jetzt nicht so übersichtlich irgendwie und wie gesagt zu viel zu klicken oder seh ich das falsch? Heutzutage sehen die ja irgendwie alle so aus. Daher würde mich deine Meinung interessieren

JanaL161

06.01.2025, 00:15

@Singer2010

Ich meine wo das steht: https://www.lebegesund.de/themes/Frontend/Lgv/frontend/_public/src/fonts/Lgv-Icon-Font.ttf

Das steht in den CSS-Regeln. Das HTML-Element, welches durch die Klasse "icon-leaf" das Blatt bekommt, ist ein "i" Element. Solche bekommen diese durch eine CSS-Regel in (https://www.lebegesund.de/web/cache/1727213863_8998432f5663422106a90c3077862706.css), welche im Head des HTML-Dokuments geladen wird. In Zeile 2025 im CSS ist demnach die "Lgv-Icon-Font" zugewiesen. Diese Schriftart ist in Zeile 1364 durch die CSS Font Loading API definiert; dort auch die URL.

Das stand jetzt. So etwas kann sich natürlich öfter mal ändern. Moderne Browser haben Tools, um zu sehen, welche Schriftarten dargestellt werden. Im Firefox Inspektor ist das in dem rechten Regal die "Fonts" Option. Dort steht auch die Quell-URL; so habe ich das ursprünglich gefunden.

Wie gefällt dir eigentlich die Homepage so von der aufmachung her?

Zunächst möchte ich abstreiten, Profi zu sein. Webtechnologien, Entwicklung und Design mache ich eher als Hobby oder für Freunde und Bekannte. Ich freue mich aber, hier hilfreich sein zu können.

Ja, wenn ich mir archivierte Kopien ansehe, hatte die Seite früher durchaus etwas mehr Charakter: https://web.archive.org/web/20250000000000*/https://www.lebegesund.de/

Ich kann aber auch verstehen, dass das abgeändert wurde. Es ist ja immer so, dass sich Design-Trends ändern, wobei man nicht zu sehr veraltet aussehen möchte. Besonders auf der Homepage sollen Dinge heute eher inszeniert werden, als direkt einen Nutzen zu schaffen. Generell ist heute alles weniger kompakt und mehr gepolstert, um Nutzer nicht zu verwirren. Die Funktionalität scheint sich auch etwas entwickelt zu haben, weshalb das vielleicht gewissermaßen auch Änderungen technischer Natur sind.

Ich finde das jetzige Design im Vergleich zu anderen Seiten alles andere als schlecht, aber Seiten mit mehr Charakter gefallen mir auch besser ^^

Singer2010

Beitragsersteller

06.01.2025, 03:32

@JanaL161

Oh das gibts auch noch ein Archiv wo man schauen kann wie es früher aussah, toll.
Ja genau Charakter, ich denke auch, dass man sich halt anpassen wollte und das Design jünger (?) gestalten wollte.

Singer2010

Beitragsersteller

07.01.2025, 22:57

@JanaL161

Kann man wenn man die Seite abspeichert dann noch nachträglich also wenn die Seite runterngenommen wurde diese Inofrmationen rausfinden also im quelltext? Eben bei der abgespeicherten seite

JanaL161

07.01.2025, 23:14

@Singer2010

Ja, aber nur, wenn auch die gesamte Seite gespeichert wurde. Oft werden Daten dynamisch über einen Server geladen, wenn du die Seite navigierst. So etwas wird dann nicht gespeichert.

Je nachdem, wie du die Seite speicherst, kann es auch sein, dass Schriftarten und Bilder nicht direkt dabei sind. Unter Firefox gibt es z. B. die Option, nur das HTML oder die gesamte bisher geladene Website zu speichern.

Singer2010

Beitragsersteller

08.01.2025, 02:51

@JanaL161

Ich weiß das versteh ich nie. Ich will es so wei es abgebildet ist und auf der besagten Seite hab ich damit probleme auf anderen Seiten geht das aber, komisch. Da muss ich dann immer noch eine Printversion abspeichern da ist dann der Teil richtig der falsch auf der gespeicherten Webseite darsestellt wird

Singer2010

Beitragsersteller

10.01.2025, 17:01

@JanaL161

Kennst du dich vielleicht auch aus mit Facebook Downloader? Egal welchen ich verwende, es steht zwar HD da aber das Video wird nicht in HD runtergeladen und ohne Ton.

Ähnliche Beiträge

Wie kann man bei "Untersuchen" auf "Console" gehen am Handy?

Hier befindet man sich bei "Console" Ich weiß dass man bei Elements vor der Webseite "view-source" schreiben muss, aber wie kommt man auf Console?

...zum Beitrag

Wie kann ich auf meiner Webseite F12 (Element untersuchen) deaktivieren?

Hallo, ich habe eine Internetseite bzw. Quiz Seite erstellt auf replit.com und möchte nun, das man nicht auf F12/Element untersuchen/Entwicklertools einfach den Code kopieren kann bzw. Die Lösungen sehen kann. Kann ich das ihrgendwie mit einem Java Script deaktivieren oder so? Liebe Grüße

...zum Beitrag

Webseite: Wenn ich rechtsklicke auf "Element untersuchen"?

warum kann ich das html-Ergebnis nicht kopieren? (dieses steht unter "Elements")

...zum Beitrag

Wie sehe ich den Dateipfad Bild Webseite?

Hallo, ich habe eine Webseite und weiß jedoch nicht wo ich die Bilder auf meiner Webseite abgespeichert habe. (Dateiname oder Dateipfad)

Gibt es eine Möglichkeit den Dateinamen oder Pfad einzusehen? (Vielleicht im Quellcode oder so)

...zum Beitrag

Webseite bauen in HTML?

Hallo,

bin Anfänger in HTML. Meine Frage:

Wie sollte eine Webseite grundsätzlich aufgebaut sein?

Kann man sich grundlegend an folgendem Schema orientieren?

Im <header> steht z. B.

one or more heading elements (<h1> - <h6>)
logo or icon
authorship information

...

...zum Beitrag

Wieso wird diese Webseite in React ohne Header und Footer gerendert?

Zur Aufgabe: Man soll drei Komponenten haben: Header, Main und Footer. Diese drei Komponenten müssen dann in die MainView und die MainView in die App.

Wenn ich die Webseite lade, ist zwar alles gut soweit, aber wenn ich über die Navigation auf Kontaktseite z.B. klicke, werden weder Footer noch Header angezeigt. Kann mir jemand bitte helfen?

import React from 'react';
import { Link } from 'react-router-dom';
import '../App.css';

const Header = () => (
  <header>
    <div id="logo">
      <Link to="/startseite">
        <img src="/img/Chicolio_Logo_trs_thumbnail.png" alt="Logo" />
      </Link>
    </div>
    <h1>Startseite</h1>
    <nav>
      <Link id="homepage" to="/startseite">Startseite</Link>
      <span>|</span> {/* Vertikaler Strich als visuelle Trennung */}
      <Link id="contactpage" to="/kontakt">Kontakt</Link>
      <span>|</span>
      <Link id="impressum" to="/impressum">Impressum</Link>
      <Link id="shoppingcart" to="/warenkorb">Warenkorb</Link>
    </nav>
  </header>
);

export default Header;

import React from 'react';
import '../App.css';

const Footer = () => (
  <footer className= "footer">
    <div>
      <p>&copy; Unsere Namen - 2024</p>
    </div>
  </footer>
);

export default Footer;

import React from 'react';
import Startseite from './Startseite';

const Main = () => {
  return (
    <div>
      <Startseite />
    </div>
  );
};

export default Main;

import React from 'react';
import Header from './Components/Header';
import Footer from './Components/Footer';
import Main from './Components/Main';
import './App.css';

const MainView = () => {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
};

export default MainView;

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import MainView from './MainView';
import Warenkorb from './Components/Warenkorb';
import Impressum from './Components/Impressum';
import Produkt from './Components/Produkt';
import Startseite from './Components/Startseite';
import Kontakt from './Components/Kontakt';
import './App.css';

// Wurzel-Appkomponente
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainView />} />
        <Route path="/warenkorb" element={<Warenkorb />} />
        <Route path="/impressum" element={<Impressum />} />
        <Route path="/produkt/:id" element={<Produkt />} />
        <Route path="/startseite" element={<Startseite />} />
        <Route path="/kontakt" element={<Kontakt />} />
      </Routes>
    </Router>
  );
}

export default App;

Das ist, wenn man nach dem Browsen in der Navigation auf Startseite klickt.

Und das wird direkt beim Öffnen angezeigt:

...zum Beitrag

website html speichern?

hallo,

ich habe folgendes problem. ich habe mein website template über den browser geöffnet. dann wollte ich ein wenig herumspielen und habe bei der Seite mit der (rechtsclick)untersuchen Funktion ein paar sachen im "elements reiter" bearbeitet. jetzt gefällt es mir jedoch so sehr das ich es speichern will. habe aber keine ahnung wie. villeicht kann mir ja da jemand weiterhelfen.

mfg marc

...zum Beitrag

JS console.log in HTML ausgeben?

Hallöchen!

Wir arbeiten gerade an einer simplen Webseite in der Schule. Dabei müssen wir sowohl HTML als auch Javascript verwenden. Nun habe ich am Ende der JS Funktion jedoch einen console.log command, welcher mir ein bestimmtes Element eines Array ausgibt. Dies ist dann auch das Endprodukt der Funktion. Wie kann ich diesen console.log command nun auf meiner Webseite ausgeben? Bzw. wie kann ich dieses Element auf meiner Webseite aus geben.

Der command:

console.log(Liste[XinOriginal)

Das Element:

"e ist der häufigste Buchstabe: " + e + " mal"

Danke für eure Hilfe!

...zum Beitrag

Gibt es eine Möglichkeit, die Einstellungen von "Element untersuchen" zu speichern?

Gibt es eine Möglichkeit, dass, was ich im Internet in "Element untersuchen" eingebe, zu speichern?
Mir ist bewusst, dass das für Entwickler gedacht ist und nicht dazu da ist, Webseiten (dauerhaft) zu bearbeiten, aber verschiedene Add-ons, wie z.B. die versch. Youtube-Downloader bauen doch auch diese Buttons in eine Webseite ein, also dachte ich mir, dass das doch irgendwie gehen muss.
Weiß einer von euch da besser bescheid, der mir helfen könnte??

...zum Beitrag

anklickbares/interaktives Bild?

Hallo,

auf dieser webseite: Karosserie- & Lackzentrum Zeesen – Ihr Partner für Karosseriebau und Autolackierung in Königs Wusterhausen (karosseriebauer-lackierer.de)

befindet sich ungefähr in der Mitte der Seite ein bild, welches man in anklickbare bereiche unterteilt kann. Wie geht sowas, bzw. wie nennt sich die Software um sowas zu erstellen für zum beispiel webseiten

...zum Beitrag

Wie klicke ich auf diese Elemente mit Python und Selenium?

Hallo,

Ich versuche, auf die folgenden Elemente auf dieser Webseite (https://www.bing.com/search?q=Bing+AI&showconv=1&FORM=hpcodx) mit Python und Selenium zu klicken.

//*[@id=“tone-options”]/li[3]/button

//*[@id=“camera-container”]/button

//*[@id=“camera-container”]/cib-flyout/cib-visual-search//div[3]/button[1]

Ich habe XPATH, CSS probiert.

Fehler:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id="tone-options"]/li[3]/button"}

(Session info: chrome=119.0.6045.200)

Stacktrace:

GetHandleVerifier [0x00007FF7D97B82B2+55298]

(No symbol) [0x00007FF7D9725E02]

(No symbol) [0x00007FF7D95E05AB]

(No symbol) [0x00007FF7D962175C]

(No symbol) [0x00007FF7D96218DC]

(No symbol) [0x00007FF7D965CBC7]

(No symbol) [0x00007FF7D96420EF]

(No symbol) [0x00007FF7D965AAA4]

(No symbol) [0x00007FF7D9641E83]

(No symbol) [0x00007FF7D961670A]

(No symbol) [0x00007FF7D9617964]

GetHandleVerifier [0x00007FF7D9B30AAB+3694587]

GetHandleVerifier [0x00007FF7D9B8728E+4048862]

GetHandleVerifier [0x00007FF7D9B7F173+4015811]

GetHandleVerifier [0x00007FF7D98547D6+695590]

(No symbol) [0x00007FF7D9730CE8]

(No symbol) [0x00007FF7D972CF34]

(No symbol) [0x00007FF7D972D062]

(No symbol) [0x00007FF7D971D3A3]

BaseThreadInitThunk [0x00007FF8125E7344+20]

RtlUserThreadStart [0x00007FF8130026B1+33]

kann mir jemand helfen? Danke.

...zum Beitrag

HTML, CSS, JavaScript: Komischer Rand entsteht, der da nicht hin soll. Wie entfernen?

Im Rahmen eines Projektes erstelle ich derzeit eine "Webseite". Das Problem ist, dass im blau umkreisten Menü ein Abstand entstanden ist, der dort nicht hingehört. Zur besseren Veranschaulichung wurden Elementen eine Farbe zugewiesen.

Link zum Code:
https://docs.google.com/document/d/15GRD_qnv_Rr4WNFKoEWZLnoZD5wKAh0WldTEo8ZLhuY/edit?usp=sharing

Screenshot

...zum Beitrag

Was sind CMS Elemente?

Guten Abend liebe Community,

ich bin gerade dabei mein Geschäft zu digitalisieren bzw. eine Webseite zu bauen. Jetzt wird mir von den verschiedenen Anbietern, die Webseiten im Baukasten Format anbieten, gesagt, mit Abo XY 5000 CMS Elemente inkludiert.

Was kann man sich darunter vorstellen als Laie. Werde ich bspw. nach 4 erstellten Unterseitenseiten dann begrenzt, weil meine Elemente ausgegangen sind?

...zum Beitrag

Element Untersuchen bei Browsern ohne rechtklick?

Man kann ja auf fast allen seiten per rechtklick nachgucken was der Programmierer der Seite gemacht hat. Element untersuchen heißt es wenn man auf der Seite rechtsklickt.

Wie kann man sowas nachgucken bei seiten wo der rechtsklick deaktiviert ist ?

Um den Quelltext einer Seite nachzugucken kann man ja ein Code vor die URL schreiben um zum Quellcode zu gelangen. Gibt es auch solch ein Code fürs Element untersuchen ???

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen