VMPR
Aktives Mitglied
Thread Starter
- Dabei seit
- 17.02.2005
- Beiträge
- 1.096
- Reaktionspunkte
- 30
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:
Wie ihr seht ist in diesem Fall der erste Menüpunkt "active" - soll also hervorgehoben werden.
Dieser wird nun also mit CSS so gestylt:
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!
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:
Code:
<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:
Code:
#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!
Zuletzt bearbeitet: