Bild unter Menüpunkt anzeigen

unkown89

Auf meiner Seite http://www.kochbox-info.de möchte ich oben rechts im Menü unter den Menüpunkten jeweils ein passendes Bild zum Menü haben. Wie kann ich das machen und wie kann ich anschließend die Größe anpassen?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

pixselig

Das einfachste wird wohl sein, dass du die einzellnen li-Elemente der Nav vergrösserst und dann das gewünschte Bild als background-image setzt. Das kannst du alles via CSS machen und wenn du mit einem ChildTheme arbeitest bleiben dir alle Veränderungen auch nach einem Update erhalten.

unkown89

Zitat von pixselig

Das einfachste wird wohl sein, dass du die einzellnen li-Elemente der Nav vergrösserst und dann das gewünschte Bild als background-image setzt. Das kannst du alles via CSS machen und wenn du mit einem ChildTheme arbeitest bleiben dir alle Veränderungen auch nach einem Update erhalten.

Könntest du mir das mal erklären? Kenn mich da nicht so aus.

pixselig

Code

#mainnav ul li {
    display: inline-block;
    height: 90px;




}


#menu-item-19 {background-image: url();}
#menu-item-21 {background-image: url();}
#menu-item-22 {background-image: url();}
#menu-item-23 {background-image: url();}

Alles anzeigen

unkown89

url wird durch die Bildadresse ersetzt oder kommt die in Klammern?

pixselig

kommt in die Klammer

unkown89

Zitat von pixselig

kommt in die Klammer

Danke ich versuchs ma :D

pixselig

Den Code findet du nirgends - den musst du hinzufügen.

unkown89

so gefunden .. nu sieht das allerdings aber sehr ungünsig aus :D

pixselig

style.css .

unkown89

Zitat von pixselig

style.css .

siehe edit

pixselig

Mein Freund ich kann dich nicht an die Hand nehmen -> Eigeninitiative ist gefragt!

Zur Positionierung:
http://de.selfhtml.org/css/eigenschaf…ground_position
http://www.w3schools.com/cssref/pr_background-position.asp

Damit das Bild auch beim Mouseover erhalten bleibt:
http://de.selfhtml.org/css/eigenschaf…us_hover_active
http://www.css4you.de/hover.html

unkown89

Danke solltest ja nicht direkt an die Hand nehmen :D habs soweit hinbekommen alles. Eine Frage hab ich aber noch .. wie kann man die Menüpunkte am Ende trennen voneinander?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bild unter Menüpunkt anzeigen

Jetzt mitmachen!