Horizontale Navigation mit unterschiedlichen Bildern

Push-Nachrichten von MacTechNews.de

Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?

Forum>Entwickler>Horizontale Navigation mit unterschiedlichen Bildern

Pinguin05.05.1016:19

Ihr Lieben,

Anleitungen für eine horizontale Navigation via ul, li und so weiter gibt es zu hauf, die kann ich auch nachvollziehen und reproduzieren. Was nun, wenn ich aber anstatt von Text Bilder verwenden will, welche alle unterschiedlich lang sind?
Versteht ihr was ich meine? Wenn nicht, sagt bescheid

Liebe Grüße,

Pinguin

Kommentare

Pinguin05.05.1016:25

Die Bilder sollen aber nicht als img-tags, sondern als Attribute zu den einzelnen li-Elementen eingebunden werden und dabei noch verlinkt werden ... Schwierig, wie es mir scheint.

Shumweight05.05.1017:49

Wenn Deine Navi statisch ist, d.h. wenn sie nicht dynamisch (CMS) generiert wird, geht folgende Lösung. Zwar nicht elegant, aber funktioniert:

1. Mach Klassen aus den LIs…

<li class="n1">Navi1</li>
<li class="n2">Navipunkt2</li>
<li class="n3">NavipunktDrei</li>

2. Weise ihnen im Stylesheet die entsprechende Breite zu (hier nur Beispielwerte, habe es nicht ausgetestet):

li.n1 {
width = 1em;
}
li.n2 {
width = 2em;
}
li.n3 {
width = 3em;
}

Shumweight05.05.1018:02

3. das Wichtigste habe ich vergessen: noch jeweils das Bild verlinken …

li.n1 {
width = 1em;
background:url("bild1.png") no-repeat;
}
li.n2 {
width = 2em;
background:url("bild2.png") no-repeat;
}
li.n3 {
width = 3em;
background:url("bild3.png") no-repeat;
}

bmc desgin05.05.1019:44

li kann doch auch Symbole zugeordnet werden...
Oder war das ol???

Egal, in beiden Fällen kann man auch darüber Bilder einbinden.

Cheers

„Ask your questions...“

Pinguin06.05.1011:57

Ihr Lieben,

ich hab es dann doch alleine hinbekommen, tatsächlich bin ich auf den gleichen Trichter wie Shumweight gekommen!
Danke euch allen!

Liebe Grüße,

Pinguin

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.

Apple Silicon M4: Die versteckte Innovation der...

Bald viel mehr HomeKit-kompatible Geräte? Apple...

Mac mini: Kontroverse Position des Einschalters...

iPad Pro M4: Hinweise auf geringere Nachfrage

M4 Mac mini im Effizienztest: Hohe Ersparnis im...

iPhone SE 4 von allen Seiten – Dummy aufgetauch...

Interview: Größte private Mac-Sammlung

20 Jahre Mac mini