Horizontale Navi mit Tab-Optik - mit drei Hintergrundgrafiken - ist das lösbar ?

Hallo liebe Contao-Gemeinde,

ich bin gerade am tüffteln und versuche verzweifelt folgende Aufgabe zu lösen:

Diese Navi hier:

HTML-Code:

---

<ul class="level_1">
<li  class="naviitem first" ><a href="link1.html" title="link1" class=" naviitem first " ><span>Link1</span></a></li>
<li  class="naviitem" ><a href="link2.html" title="Link2" class=" naviitem " ><span>Link2</span></a></li>
<li  class="naviitem" ><a href="link3.html" title="Link3" class=" naviitem " ><span>Link3</span></a></li>
<li  class="naviitem" ><a href="link4.html" title="Link4" class=" naviitem " ><span>Link4</span></a></li>
<li  class="naviitem last" ><a href="link4.html" title="Servicebereich" class=" naviitem last " ><span>LInk4</span></a></li>
</ul>

---

Beim Überfahren soll ein ein Link mit einem roten Tab versehen werden ( Siehe Beispiel ) Mein Problem ist nun, dass ich theoretisch eine Ecke links, eine Ecke rechts und ein sich kachelnder Hintergrund beim Hover-Effekt erzeugen muss. Und genau daran scheiter ich :o . Ich hab schon versuch über diverse Möglichkeiten die drei Ansteuerungen unter zu bringen. Leider scheitert es immer daran das ich maximal zwei Grafiken ansteuern kann... die dritte Anweisung bekomme ich nicht so hin das sie wirksam ausgeführt wird.

Meine Frage an Euch:
- Kann mir jemand folgen mit meinem Problem :)
- Habt ihr einen Lösungsansatz?

Zur Verdeutlichung hänge ich euch noch die Hintergrundgrafiken dran.... für Tips wäre ich sehr sehr dankbar.

Hallo creativx,
für sowas brauchst du nur 2 Bilder, damit das dynamisch mitwachsen kann.

Hier ein Beispiel für dich wie das gehen kann -> http://www.yaml.de/fileadmin/example...ding_door.html

Viele Grüße

Hi MacKP,

vielen Dank für den Tip. Sowas hatte ich auch schon versucht, aber natürlich nicht in dem raffinierten Stil von YAML. Das werd ich mal testen und berichten ob es funzt.

Grüße und schönes WE

Hier ist noch die Quelle von YAMLs Sliding-Door: http://www.thestyleworks.de/tut-art/listnav3.shtml

Ich hatte mal einen Fall, da brauchte ich unbedingt eine Klasse in dem Listenpunkt rechts und links neben dem aktiven Punkt.

HTML-Code:

---

<ul>
  <li class="preActive"></li>
  <li class="active"></li>
  <li class="postActive"></li>
</ul>

---

Solltest du das auch benötigen, kannst du mein angehängtes Template benutzen.

Grüße

Hallo Spezialisten,
ich muss mich hier einfach mal dranhängen, da ich im Moment das gleiche Problem habe wie oben beschrieben.
Die Hinweise von MacKP und Andreas haben mir soweit geholfen, dass ich nur 2 Grafiken brauche, welche wie eine Schiebetür übereinander geschoben werden sollen. Auf der Seite http://www.thestyleworks.de/tut-art/listnav3.shtml ist das ganze auch ganz gut erklärt, aber ich bekomme es leider trotzdem noch nicht hin.
Bei mir soll es auch etwas anders funktionieren als auf der Seite beschrieben.
Im normal Zustand sollen die Navigationspunkte als Tab (2 Hintergrundgrafiken z.B. nav_norm_left und nav_norm-right) angezeigt werden.
Bei MouseOver und bei aktivem Zustand soll der Hintergrund des Tab anders aussehen. Im Beispiel wären das dann die 2 Grafiken nav_act_left und nav_act_right).
Ich weiß jetzt nicht, welche Klassen ich wie ansprechen muss, dass dieser MouseOver Effekt und der aktive Zustand richtig angezeigt wird. Auf der oben genannten Seite ist wird das leider nicht deutlich. Jedenfalls nicht für mich.
Ich hoffe Ihr könnt das einem Greenhorn mal etwas deutlicher erklären.
Ich danke Euch.
Newbie138

Hallo Newbie138,
was genau ist dein Problem?
hover musst du dann anpassen und .active
Eventuell auch noch .trail, wenn die Navipunkte auch anders aussehen sollen, wenn man in einem Unterpunkt ist.

Eigentlich brauchst du auch nicht 2 neue Grafiken für den aktiven Zustand. Es reicht, wenn du den Zustand unter die anderen Grafiken in einem Bild machst und das dann einfach verschiebst (Sliding nennt man das).
Hier ist das genau so zu finden wie du das möchtest: http://www.alistapart.com/articles/slidingdoors2/

Viele Grüße

Und hier die deutsche Übersetzung:
http://www.thestyleworks.de/tut-art/listnav4.shtml

Hallo MacKP,
hallo creativX,

zunächst schönen Dank für die Hilfe.
Leider komme ich mit der Schilderung auf der angegebenen Seite nicht so ganz klar.

Ich habe folgendes Problem:
Das linke Hintergrundbild, welches unter navi li eingebunden ist wird ja mit
navi:li hover
background-position: 0 -21 positioniert.
Das funktioniert noch.
Nun will ich aber, dass bei dem aktiven Menüpunkt dieses Hintergrundbild ebenfalls noch angezeigt wird. Und das bekomme ich nicht hin.
Hier einmal der Auszug aus der CSS.
Vieleicht kann mir jemand mal helfen, was ich falsch mache.

HTML-Code:

---

#navi
{
        height:30px;
        top:100px;
        position:absolute;
}
#navi ul
{
        margin:0 0 0 5px;
        padding:0;
        list-style-type:none;
}
#navi ul li
{
        float:left;
        margin:0;
        padding:0 0 0 5px;
        background:url("tl_files/Layout/bg_nav_left.png") left top no-repeat;
}
#navi a,
#navi span
{
        float:left;
        display:block;
        margin-right:5px;
        padding:4px 5px 3px 0;
        text-align:center;
        background:url("tl_files/Layout/bg_nav_right.png") right top no-repeat;
        font-size:11px;
        color:#000;
}
#navi a:hover,
#navi a:focus,
#navi a:active,
#navi span.active
{
        background:url("tl_files/Layout/bg_nav_right.png") right top no-repeat;
        color:#fff;
        background-position:100% -30px;
}
#navi ul li:hover
{
        background:url("tl_files/Layout/bg_nav_left.png") left top no-repeat;
        background-position:0% -30px
}

---

Wenn ich bei #navi ul li:hover noch eine Anweisung mit active hinzufüge wird das linke Hintergrundbild ebenfalls nicht angezeigt.

Ich wäre Euch wirklich sehr dankbar, wenn Ihr mit helfen könntet.

Danke

Hallo Newbie138,
der aktive Zustand ist normalerweise #navi span.
Dem musst du das also auch noch zuweisen (einzeln, nicht bei dem wo auch das a Formatiert wird).

Wie du was genau ansprechen kannst in Contao (oder bei jeder anderen Internetseite) kannst du wunderbar mit Firebug sehen (ist ein Addon von Firefox).

Viele Grüße

Hi zusammen,

danke für den Tip - das passt soweit ganz gut.... ich musste mich zwar mit meinem Designerprügeln weil keine Schattierungen in der Navi drin waren... aber man kann nicht alles haben :cool:

Danken nochmals...