PNG Datei als Icon?

[Felix Riesterer]

Liebe(r) thementholist,

Ich habe ein Pop-up Menu mit diesem guide: https://www.youtube.com/watch?v=RLCKShRRwG0 erstellt

keine gute Idee. Warum nicht? Nun, Du hast in Deinem HTML jede Menge DIV-Suppe. Das geht besser.

<div id="header">...</div> möchte bitte ein <header>...</header> sein. Dein CSS-Selektor lautet dann eben nicht mehr #header {}, sondern header {}.

Die Verschachtelung von zwei DIVs ist auch nicht sinnvoll:

<div id=header>
  <div class="header">
    <img ...>
  </div>
</div>

Hier genügt einfach das hier:

<header>
  <img ...>
</header>

Dazu wäre noch anzumerken, dass das Bild wohl eher kein Inhalt, sondern wohl schmückender Hintergrund ist, so dass man das Bild ins CSS auslagern sollte:

<header>Textinhalt des Banners</header>

Mit CSS-Mitteln kann man dann den lesbaren Header-Text nach Belieben unsichtbar machen und dafür das Banner als Hintegrundgrafik einsetzen.

und es funktioniert auch alles.

Das lass mal blinde User beurteilen!

<div class="container"onclick="expand()">

Bitte keine JavaScript-Attribute im HTML-Code! Überhaupt sollte das gesamte HTML, welches nur mit JavaScript einen Sinn hat, nicht im Dokument stehen, sondern von JavaScript dort generiert werden!

Besser wäre das hier:

<nav>
  <h2>Navigation</h2>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/contact">Kontakt</a></li>
    <li><a href="/links">Links</a></li>
  </ul>
</nav>

Das ist die Basis. Die kann nun von JavaScript in der Art aufgehübscht werden, wie Du das gerne hättest. Aber ohne JavaScript (es gibt JS-Blocker und User, die das JS aus Sicherheitsgründen nicht verfügbar haben) ist die Seite garantiert benutzbar!

Nun würde ich gerne einige dieser Icons ersetzen. Ich habe bereits ein eigenes Icon als Png und svg-datei erstellt.

SVG ist prima! Dazu muss man halt den CSS-Code anpassen. Deine Icons werden durch eine Schriftartendatei definiert und durch in CSS verwendete Sonderzeichen erzeugt. Da kann anstelle von content: "(Sonderzeichen)"; auch content: url(/path/icon.svg); stehen. Oder Du definierst anstelle von content eben background-image... es gibt sicherlich mehrere Möglichkeiten.

Geht dadurch der hover effekt verloren?

Der Hover-Effekt wird entweder über CSS gesteuert (da gibt es die Pseudoklasse :hover), oder über JavaScript. Verlinke doch ein Online-Beispiel, gerne auf so seiten wie jsFiddle oder CodePen, dann kann man das in Gänze sehen und überblicken! Ich biete Dir sogar an, aus Deinem Projekt ein Tutorial für unser Wiki hier auszuarbeiten. Dann kannst Du mit allem notwendigen Hintergrundwissen Dein Beispiel nicht nur technisch verbessern, sondern nach Belieben an Deine Bedürfnisse anpassen.

Liebe Grüße,

Felix Riesterer.