Textnavigation mit Bild

Hallo zusammen,

ich muss für eine webseite eine Navigation bauen, welche bei ein Bild unterhalb des Textes darstellen soll.
Das Bild soll dann bei aktivem Link stehenbleiben => siehe Bild.

Anhang 14467

ich habe bereits versucht, das ganze mit Background zu lösen, geht aber nicht, da entweder

das Hintergrundbild nur in höhe des Textes angezeigt wird, oder
die Hintergrundleiste dann über die gesamte Höhe der Navigation (Texthöhe + Bildhöhe) dargestellt wird.

Habe schon überlegt, das ganze mit Submenü zu lösen, würde aber gerne darauf verzichten, Unterseiten anzulegen.

zu sehen ist das ganze auf reinwald.arillus.at

verwendetes Navi-template:

PHP-Code:

---

<ul class="<?php echo $this->level; ?>" role="<?php echo ($this->level == 'level_1') ? 'menubar' : 'menu'; ?>">
  <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
      <li class="<?php echo $item['class']; ?> <?php echo $item['pageAlias'] ?: $item['alias']; ?>"><span class="<?php echo $item['class']; ?>" role="menuitem"<?php if (!empty($item['subitems'])): ?> aria-haspopup="true"<?php endif; ?>><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?></li>
    <?php else: ?>
      <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?> <?php echo $item['pageAlias'] ?: $item['alias']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ?: $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?> role="menuitem"<?php if (!empty($item['subitems'])): ?> aria-haspopup="true"<?php endif; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
    <?php endif; ?>
  <?php endforeach; ?>
    <li id="line"> </li>
</ul>

---

ich steh voll auf der Leitung, womöglich gibt es einen ganz einfachen Weg
Danke schon mal für eure Hilfe

lg
Andy

Auf den ersten Blick eigentlich ganz einfach nur per CSS und Backgroundimage für die Klassen active und hover.

Du musst halt jedem Strukturpunkt im Feld Klasse einen Wert vergeben. Somit kannst du das auch gezielt ansprechen.

Beispiel für den Strukturpunkt Blog mit der CSS Klasse "blog"

HTML-Code:

---

.mod_navigation ul li.blog.active{background-image:url("../../files/xyz.png") center bottom;}

---

Außerdem musst du dafür sorgen das die Navipunkte (li) hoch genug sind damit man die BG Grafik sieht.

VG

Hallo Kahmoon,

so habe ich es zZ gelöst.
Problem: der Hintergrund wird ebenfalls über die gesamte Höhe gelegt.

zu sehen unter http://reinwald.arillus.at/

Das verstehe ich nicht?

Zitat:

---

Problem: der Hintergrund wird ebenfalls über die gesamte Höhe gelegt.

---

Bei Grafikdesign ist es doch korrekt? Bzw. die Grafik ist zu groß aber es ist an der Stelle wo du es wolltest oder nicht?

Edit:
Dein #mainmenu hat noch eine Hintergrundfarbe. Entferne das mal.

Zitat:

---

Bei Grafikdesign ist es doch korrekt? Bzw. die Grafik ist zu groß aber es ist an der Stelle wo du es wolltest oder nicht?

---

die Grafik ist noch zu groß, ja. Ich bekomme die fertigen Icons erst.

Zitat:

---

Edit:
Dein #mainmenu hat noch eine Hintergrundfarbe. Entferne das mal.

---

das sollte auch so sein, da ich das Menü eine Hintergrundfarbe haben sollte

Ja, dann passt ja alles oder?

Zitat:

---

Ja, dann passt ja alles oder?

---

nicht ganz:

IST:
Anhang 14468

SOLL:
Anhang 14469

Naja, wie gesagt...du musst die Hintergrundfarbe beim li rausnehmen. Gibt diesen Wert einfach dem a und span. Dann ist die Grafik ohne Hintergrundfarbe. Und alle li brauchen generell eine feste Höhe.

hmm... li hat keine Hintergrundfarbe,
die hintergrundfarbe kommt vom #mainmenu und das wird grösser,
wenn die Grafik unterhalb angezeigt wird

mainmenü BG Farbe weg. a und span die Farbe geben. Dann ist der Hintergrund von li transparent.