Menü mit Bildern

[Bina90]

Hallo,

ich habe ein kleines Problem.
Bisher hatte ich eine Homepage mit Shop über DaWanda. Da die Plattform schließt, habe ich mich zu einen eigenen Webshop über Branchbob entschlossen.

Bei meiner bisherigen Homepage: www.yuniku.de
habe ich, statt eines Textmenüs, Bilder hinterlegt.

Das würde ich auch gerne bei der neuen Homepage so machen.
Von Haus aus gibts da nur ein Schriftmenü.
Das Problem ist nun, dass ich nicht wie bei der alten, de ganze CSS als Text vorliegen habe und dort ergänzen kann.
Ich muss über "Dieses Element untersuchen" und dann die Regeln rechts kopieren und diese dann in einer CSS App einfügen, wo ich sie verändern kann.
Damit komme ich aber irgendwie nicht klar. So sieht das ganze aus.
Ich seh links grob die richtige Stelle, aber nicht die einzelnen Elemente
(ich hatte bei nem Test schon mal überall das Bild als Hintergrund, die Schrift blieb aber)
Kann mir jemand helfen?
Was muss ich denn da eintragen, damit das klappt?

Viele Grüße
Sandra

 

[jack_pott]

Hallo Sandra,

der Inspektor zeigt in deinem Screenshot nicht das Menü an. Du musst nochmal genau auf einen Menüpunkt und "Untersuchen" anklicken. Generell würde ich aber eher Webfonts (zB von Google Fonts oder Font Squirrel) verwenden und nicht Bilder.

Gerade für Suchmaschinen ist das sehr wichtig.

Du würdest also entweder per @font-face (bei lokaler Speicherung der Schriftart; → so geht's) oder @import (bei gehosteten Fonts; → so geht's) eine Schriftart in CSS definieren und den Namen anschließend für das Menü-Element und alle weiteren, wo du die Schriftart haben möchtest, auswählen.

Bsp (Google Fonts):

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700);
#navigation {font-family:'PT Sans Narrow';}

Am besten immer eine passende Fallback-Option anbieten, falls der Besucher fremd eingebundene Schriftarten verbietet, z.B.:

#navigation {font-family:'PT Sans Narrow', 'Arial Narrow', sans-serif;}

Viele Grüße
V–

 

[Bina90]

Oh danke. Dass dass Auswirkungen auf die google Suche hat, hab ich nicht bedacht.
Schrift getauscht hatte ich auch schon mal. Das hab ich auch hinbekommen.
Zumindest für gängige Schriften, damits keine alternativ Option braucht.
Das mit dem einbetten werd ich aber mal im Hinterkopf behalten. Danke für den Link

Viele Grüße

 

[Bina90]

Ich nochmal
Das mit dem Schrift einbetten klappte nur mäßig. Das sah auf jedem Widergabegerät anders aus.
Daher bleibts bei ner Universalschrift von Word.
Ich hab mir nun überlegt, wenn ich die Bildchen als Hintergrundbild anlege, müsste es ja für die Google Suche egal sein oder?
Das hab ich jetzt mal versucht.
Das Ergebis ist jetzt folgendes:


Der dazugehörige Code ist:
.link--nav-arrow {
font-size: 1.25em;
padding: 138px 0 .2em;
margin: 0 1em;
border-bottom: 2px solid transparent;
-webkit-transition: border-bottom-color .3s;
-moz-transition: border-bottom-color .3s;
-o-transition: border-bottom-color .3s;
transition: border-bottom-color .3s;
height: 140px;
width: 140px;
background-image: url(https://my.branchbob.com/medien/shop...-schrift.jpg);
background-position: bottom;
}


Jetzt müsste ich es nur noch schaffen, dass es jeweils andere Bilder sind.
Das müsste ja dann über die Positionen gehen oder?
Nur wie muss ich das formulieren? Das klappt irgendwie nicht.
Ich hoffe mit den Infos kann man was anfangen

Die HTML Info zu dem Menü ist diese

 

[Soso]

So auf die Schnelle....

1.) den jeweiligen A-Tags eine individuelle Klasse zuweisen, die das jeweilige Hintergrundbild definiert

oder

2.) Über CSS > übergeordnetes Element > über den nth-Child unterschiedliche Hintergrund-Bilder zuweisen

 

[Bina90]

damals hab ich das auch mit A-Tags gemacht.
Allerdings bekomm ich das jetzt nicht mehr hin.
Spätestens wenn ich jetzt zeige was ich versucht habe, erkennt ihr auch, dass ich quasi keine Ahnung hab
Ich hab da jetzt viel rumprobiert, aber dann ist das Bild nicht zu sehen.
Unter anderem (nicht lachen) so:

.link--nav-item-8 a after {
height: 140px;
width: 140px;
content: url(https://my.branchbob.com/medien/shop/4831/pictures/s/post-it-kette-ohn-schrift.jpg);

}