clint: schattierte Auswahl-Reiter, NICHT als Grafik bzw Button

SELF-Forum

schattierte Auswahl-Reiter, NICHT als Grafik bzw Button

clint
– Informationen zu den Bewertungsregeln

Nabend,
jeder kennt die Navigations-Methode über Reiter.
Der Aktive wird meist in einer anderen Farbe dargestellt wie die inaktiven (z.B. bei ebay.de)

Meine Frage:
Wie programmiert man sowas am besten ?

Die naheliegiegenste Möglichkeit wäre natürlich über Grafiken.
Also die Reiter in Photoshop erstellen und als Grafik einbinden.

Bei ebay ist dies nicht so, denn der Text auf dem Reiter ist noch als solcher markierbar.
Nur die Zwischenstücke zwischen den Reitern sind Grafiken (da sich ja immer zwei überlagern).

Ok, den Reiter an sich könnte man ja nun mit einer Tabelle machen und der Zelle die entspr. Hintergrundfarbe verpassen.

Soweit so gut, NUR:

Bei ebay.de sind die Reiter schattiert, also nicht einfarbig.

Ich hab mal versucht den Quelltext zu verstehen.
Es sieht so aus, als ob der Schatten eine 1-Pixel-Grafik ist, der über die entspr. Breite des reiters gestreckt wird.

Kann das sein ?
Gibt es eine andere/bessere Möglichkeit ?

Bin auf eure Antworten gespannt...

bye
clint

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. schattierte Auswahl-Reiter, NICHT als Grafik bzw Button

    Christian
    – Informationen zu den Bewertungsregeln

    Hi,

    Ich hab mal versucht den Quelltext zu verstehen.
    Es sieht so aus, als ob der Schatten eine 1-Pixel-Grafik ist, der über die entspr. Breite des reiters gestreckt wird.

    Ja genau so wird es wohl sein. Anders kann ich mir das auch nicht erklären. Aber es dürften in der Höhe wohl so ca 5 px sein.

    Kann das sein ?
    Gibt es eine andere/bessere Möglichkeit ?

    Du kannst auch ein Grafik erstellen und diese als Hintergrund nehmen. Dann muss die <td> oder das <div> oder was du für den Reiter nehmen willst, genauso so groß sien wie die Grafik.

    Dann ist der Text noch marikierbar.

    Gruß
    Christian

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. schattierte Auswahl-Reiter, NICHT als Grafik bzw Button

    Sebastian Becker
    – Informationen zu den Bewertungsregeln

    Nabend, Clint,

    ich hab' hier zunächst noch ein paar textbasierte Beispiele für Dich ...

    http://www.filemaker.de
    https://www.helixcommunity.org
    http://www.trendmicro.com/vinfo/

    Es müßte eigentlich möglich sein, die Tabs komplett mit CSS zu erzeugen - Trend Micro macht das glaub ich so ...

    Und hier drei sehr interessante, aber sicherlich nur eingeschränkt zu empfehlende DHTML-Tab-Lösungen ...

    http://webfx.eae.net/dhtml/tabpane/demo.html
    http://www.developer-x.com/projects/tabs/
    http://dhtmlkitchen.com/dhtml/node/index.jsp

    Den Schatten könntest Du evtl. auch mit CSS-Filtern erzeugen ...

    Grüße,

    Sebastian

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln