CSS - nach Button dynamisch Bild einblenden

[VMPR]

Hallo zusammen,

es fiel mir schwer einen passenden Threadtitel zu finden, aber lasst es mich kurz erklären:

Ich plane eine kleine Seite (Demo: http://www.patrickqueisler.de/wii/), auf der die Hauptnavigation mit Tabs realisiert werden soll.

Diese würde so ausgegeben:

<ul id="navigationlist">
   <li><a href="#" class="active">Blog</a></li>
   <li><a href="#">Reviews</a></li>
   <li><a href="#">Downloads</a></li>
   <li><a href="#">Friends</a></li>
</ul>

Wie ihr seht ist in diesem Fall der erste Menüpunkt "active" - soll also hervorgehoben werden.

Dieser wird nun also mit CSS so gestylt:

#navigation .active {
	color: #49c3f5;
	background-image: url(img/activetab_left.jpg);
	background-position:left;
	background-repeat: repeat-x;
	padding-left: 40px;
	padding-right: 30px;
}

Das Bild "activetab_left.jpg" ist 500px breit und zeigt quasi nur die linke, abgerundete Seite und erweitert sich dann halt über die Breite des Menüpunktes.

Nun soll natürlich auf der rechten Seite auch wieder diese Anrundung rein, das wäre dann das Bild "activetab_right.jpg".

Wie bekomme ich dies nun mit CSS hinter den Text im Button ("Blog")? Oder muss ich das mit PHP machen? Hilfe!

 

[mcintyre]

Tag, Pat!

Also ich würde für die Navigationsleiste eine Hintergrundgrafik erstellen (also mit einem entsprechenden Container) und dann für die jeweiligen Zustände der Menüpunkte eine Klasse definieren. Die dann noch den einzelnen Links zuordnen...fertig!

 

[VMPR]

Dann ist es aber nicht dynamisch. Das Menü wird ja per CMS gesteuert/angelegt. Ich müsste dann ja für jeden Menüpunkt einen eigenen Hintergrund anlegen, falls dieser aktiv ist, je nach Breite bzw. Länge des Textes. Was, wenn man einen neuen Menüpunkt anlegt?

Vielleicht hab ichs auch nur noch nicht kapiert, hast nen Beispiel? Ich meine das schonmal so oder so ähnlich gesehen zu haben und bin mir relativ sicher, dass es mit CSS geht, ich weiß halt nur noch nicht wie

 

[mcintyre]

Mmmmh, ok, das mit dem CMS habe ich dann wohl nicht mitbekommen...

Sollte aber auf gleiche Weise funktionieren. Du musst halt nur eine Klasse für die Navigation einrichten und dann eine zuätzliche Unterklasse "active" und dort dann das Hintergrundbild ändern.

Wobei mir einfällt, nicht jeder Browser kommt mt "ative" zurecht (Opera hat da, glaube ich, Probleme mit).

Mal sehen ob ich irgendwo ein Beispiel finde...

 

[mcintyre]

Boah, bin ich schnell: cssvault.com/

Ist das so wie Du Dir das vorgestellt hast?

 

[VMPR]

Ja generell schon, nur das mein Hintergrund für "active" eben aus 2 Teilen bestehen MUSS, wenn die Breite dynamisch sein soll

 

[VMPR]

Hoppala, jetzt funktioniert der Link zur Demo auch: http://www.patrickqueisler.de/wii/

 

[Pingu]

Hier drei Links, die Dir sicherlich weiterhelfen:

• alistapart.com/articles/mountaintop
• alistapart.com/articles/customcorners2
• alistapart.com/articles/slidingdoors

Pingu

 

[VMPR]

Hier drei Links, die Dir sicherlich weiterhelfen:

• alistapart.com/articles/mountaintop
• alistapart.com/articles/customcorners2
• alistapart.com/articles/slidingdoors

Pingu

Danke, genau DIE Seite habe ich schonmal gesehen, denke damit wirds klappen

 

[mcintyre]

Na, dann bin ich ja mal auf Deine neue Seite gespannt...

 

[VMPR]

Danke, geht schon weiter mit den Problemen, aber wird ja auch Zeit das ich CSS mal richtig fit werde, kann mich ja nicht nur auf Flash beschränken

https://www.macuser.de/forum/showthread.php?t=195966