• Es gibt nach dem Softwareupdate eine Reihe von Änderungen und Neuerungen in unserem Forum. Genaueres dazu findet Ihr in dieser Ankündigung. Hinweise, Kritik, Anregungen, Lob und Tadel bitte hier diskutieren.

Menü mit Bildern

Bina90

Granny Smith
Mitglied seit
12.02.17
Beiträge
17
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
SandraBildschirmfoto 2018-07-24 um 09.57.08.png
 

jack_pott

Transparent von Croncels
Mitglied seit
15.12.07
Beiträge
315
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):
HTML:
@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.:

HTML:
#navigation {font-family:'PT Sans Narrow', 'Arial Narrow', sans-serif;}
Viele Grüße
V–
 
Zuletzt bearbeitet:

Bina90

Granny Smith
Mitglied seit
12.02.17
Beiträge
17
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

Granny Smith
Mitglied seit
12.02.17
Beiträge
17
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:
Bildschirmfoto 2018-07-25 um 11.12.27.png

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
Bildschirmfoto 2018-07-26 um 16.59.27.png
 

Soso

Jamba
Mitglied seit
29.08.09
Beiträge
56
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

Granny Smith
Mitglied seit
12.02.17
Beiträge
17
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 :D
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);

}