phpwcms Support Forum

Hallöle

Habe einen Versuch auf meiner Test-Subdomain gemacht:

http://www.testarea.mediasolution.com.sg/

Das Teil ist zwar sehr sehr hässlich, aber es geht ja nur um einen Versuch.

Nur gibt es da ein Problem: Weil die Buttons sich der Länge des Textes anpassen sollen, musste ich für die linke und rechte Buttonseite je einen separaten CSS-Tag schreiben. Beim inaktiven und aktiven Status gehts prima. Natürlich funktioniert der Rollover-Effekt nicht wie gewünscht. Fährt man mit der Maus von oben oder unten in den Button, wird der Effekt richtig dargestellt. Jedoch von links oder rechts nicht mehr. Hat jemand eine Idee wie das Problem zu lösen ist?

Für alle die mir helfen oder das Teil für sich haben wollen:

Container mit RT:

Code: Select all

<div class="nlu_horiz1">{NAV_LIST_UL:F,0,1,act_path,active}</div>

CSS:

Code: Select all

/* ==== Main Settings ================================== */
.nlu_horiz1{ background-color: transparent; background-repeat: repeat-x; background-attachment: scroll; background-position: 50% top; text-align: left; width:600px; height:100px; padding: 20px; border: solid 1px #c00; }
.nlu_horiz1 ul { margin:0; font-size:12px; font-weight:bold; padding-left:0; padding-top:0; list-style:none; }
/* ==== Passive Settings ================================== */
.nlu_horiz1 li { background-image: url(navitest1/but_left.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: left top; float:left; margin-right:10px; padding:0 0 0 20px; }
.nlu_horiz1 a { float:left; display:block; text-decoration:none; color:#c00; background-image: url(navitest1/but_right.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: right top; height: 43px; padding: 10px 20px 7px 0; }
/* ==== Rollover Settings ================================== */
.nlu_horiz1 ul li:hover { background-image: url(navitest1/but_left2.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: left top; }
.nlu_horiz1 ul li a:hover { text-decoration:none; color:#ffdc70; background-image: url(navitest1/but_right2.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: right top; }
/* ==== Active Settings ================================== */
.nlu_horiz1 ul li.act_path { background-image: url(navitest1/but_left3.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: left top; }
.nlu_horiz1 ul li.act_path a { text-decoration:none; color:#ffffff; background-image: url(navitest1/but_right3.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: right top; }
/* ==== Rollover Active Settings ================================== */
.nlu_horiz1 ul li:hover { background-image: url(navitest1/but_left2.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: left top; }
.nlu_horiz1 ul li.act_path a:hover { text-decoration:none; color:#ffffff; background-image: url(navitest1/but_right2.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: right top; }

Grüsse

Ralph

Noch eine paar Ergänzungen

Für alle die Lust auf Buttons bekommen haben:

Den Button im Grafikprogramm erstellen, jedoch viel viel breiter als normal. Mindestens so breit, dass sicher jeder einzelne Menüpunkt darin Platz haben wird. Keine Sorge. Die CSS ist so erstellt, dass der nicht benötigte Teil beim Rendern der Seite abgeschnitten wird.

Dann für die linke Buttonseite nur gerade soviel wie nötigt rauskopieren und abspeichern (Wenn man zum Beispiel abgerundete Ecken hat, einfach bis zum Beginn der Geraden oder 1-2 Pixel mehr)

Für die rechte Buttonseite so viel wie möglich, ohne den bereits kopierten linken Teil (also ohne die Rundung).

Dann für die verschiedenen Zustände (aktiv, inaktiv...) andere Farbvariationen erstellen.

-------------------

Wer die Navigation trotz des Rollover-Mängels verwenden will, kann auch die entsprechenden Rollover-CSS-Einträge löschen.

--------------------

Es können noch weitere Zustände in der CSS dazugeschrieben werden (z.B. Zustand wenn Subebene vorhanden ist....)

Santscho

Mhh, so würde es komplett funktionieren: horiz. Menue dynamic bg image/width

Life: ikom-bonn .de

Knut

Uuuuuups! Und da möchte ich, als absoluter CSS-Laie in meinem Lern-Enthusiasmus das Rad neu erfinden

Natürlich ist Deine Variante perfekt

und ich werde sie genauer unter die Lupe nehmen.

Doch es hat Spass gemacht!

Danke Knut

Wollte mich nicht vordrängeln, nur deine Lösung ist mit viel mehr Aufwand in den Griff zu bekommen.
Das Grundprinzip der von mir gezeigten Lösung ist auch nicht auf meinem Mist gewachsen. (Schiebetür-Technik)
Ich habe es halt nur ausgearbeitet und auf die NAV_LIST_UL adaptiert.

Knut

Hey! Überhaupt kein Problem.
Momentan bin ich einfach voll auf dem CSS-Trip. Probiere viel aus und möchte was dabei lernen.

Übrigens: Nächste Woche nehme ich hier in Singapur an einem dreitägigen Microsoft-Seminar teil. Wäre sicher auch für Dich sehr interessant, aber Du wolltest mich ja nicht besuchen kommen

------------------
Technology seminar with hands-on labs for developers & designers.

It's time to think beyond the browser! As the need to deliver new & unique experiences over the Web increases by the day, it's imperative to embrace the technologies that can make the difference.

future trends of digital design. This edition of Mini Mix is your chance to learn how you can build more interactive & responsive experiences with the latest Web technologies from Microsoft.
The presentations, demos, videos in the morning will be followed by instructor-led, hands-on labs in the afternoon. What's more, you'll also walk away with ideas to make the task of creating dynamic customer connections more enjoyable!

Morning sessions:
- Introduction to Microsoft’s Vision for Web Development
- Introduction to the future platform for Web Solutions: IIs7
- Microsoft Support for AJAX Development
- Introduction to Silverlight
- Basic Silverlight Development
- Advanced Silverlight Development
- A tour of the Expression Suite
- Introduction to Visual Studio 2008 (ORCAS)

Afternoons:
- Hands-On Lab Session

phpwcms Support Forum

Horizontale Navigation mit dynamischen Buttons und Rollover

Horizontale Navigation mit dynamischen Buttons und Rollover