Zum Inhalt springen

link gestaltung mit css


Empfohlene Beiträge

Geschrieben

Servus...

ich flipp gleich aus.

Ich mache eine dynamische navigation und möchte, dass der gerade gewählt menüpunkt meiner navigation hervorgehoben wird (habe keine frames).

Der code wir überwiegend mit php generiert. Nun habe ich es geschafft, dass dyamisch in den zu hervorhebenden link ein

class="aktivlink"

hineinbekomme. Aber im browser sieht man keine Auswirkung. Da werden die links immer mit farben von "besuchten" und "aktiven" links dargestellt.

Wenn ich mit css a:active und a:hover was reinschreib dann wird meine css class auch wieder ingoriert.

Geschrieben

Ich mache eine dynamische navigation und möchte, dass der gerade gewählt menüpunkt meiner navigation hervorgehoben wird

<a href="..." onclick="this.className='aktivlink';">

probier das mal.

Damit schaltest du nur die anderen nicht aus. Du könntest aber eine Schleife über alle Links im Dokument machen und die Klasse dort auf nicht aktiv setzen.

EDIT: kannst du auch mit onmouseover etc. machen

Geschrieben

JavaScript wird garnicht benötigt für sowas. Gibt es überhaupt im CSS eine Klasse, die aktivlink heißt? Wie's aussieht nämlich nicht. Btw. der aktive Menüpunkt sollte kein Link sein.

Via CSS geht es z. B. so:

a.aktivlink:hover { color: yellow; text-decoration: underline; }

Geschrieben

also "aktivlink" war eine von mir erstellt klasse.

Da ich viel mit php mache funktionieren die a:visited a:active nicht bei mir. Deshalt wollte ich den links dynamisch klassen zuweisen für die Formatierung. Aber die werden nie so dargestellt wie ich das festgelegt habe, sonder immer nach diesen a:xy Formatierungen.

Wie kann ich das "abstellen"?

Javascript möchte ich vermeiden.

Geschrieben

nächstes Problem.

Generiere diesen Quelltext

<td><span class='aktivlink'>Startseite</span></td>
(Natürlich in einer kompletten Tabelle) In der html datei wird auf eine css Datei verwiesen in der das steht:

aktivlink{

	color:#33FF33;

}

Aber es wird nicht so dargestelllt (Browser ist nicht schuld; getestet)

Das Stylesheet wird schon "erkannt" da andere Formatierungen funktionieren.

Geschrieben

vielleicht an den Haaren herbeigezogen, aber schon mal daran gedacht, das ganze umzubenennen? Es gibt ja die Pseudoklassen active und link.

Es müssen dort ja alle Werte gesetzt werden, da sie sonst die eigene Definition ignorieren. Das ist dann auch kein Browserbug sondern eine Festlegung von CSS.

Geschrieben

also dummer Fehler von mir. Hab den . vor der klasse vergessen.

Also es funktioniert jetzt, da ich ja den "aktiven" Menüpunkt kein link mehr ist.

Aber könnte man theoretisch einen link nicht auch mit einer eigenen Klasse formatieren? Oder ist das so festgeschrieben, dass die a:active a:rollover das immmer "überschreiben"?

Geschrieben

hallo du kannst für jeden Link extra formatierungen durchführen, natürlich nicht wieder den Punkt vergessen :)

A:hover.r

das r ist natürlich optional, es werden aber zusätzlich die Formatierungen von a:hover übernommen, also alles was anders sein soll, mit aufnehmen.

Gruss

Sabine

Geschrieben
JavaScript wird garnicht benötigt für sowas. Gibt es überhaupt im CSS eine Klasse, die aktivlink heißt? Wie's aussieht nämlich nicht. Btw. der aktive Menüpunkt sollte kein Link sein.

Dav mit Hover funktioniert aber nur, solange die Maus über dem Link ist. Mit Javascript kannst du auch den gerade aktuell gewählten Link entsprechend markieren (von daher stammt mein Beispiel auch).

Und wie du sagst, muss es ein Link sein. die Pseudo-Klassen :hover etc. gibt es ansich für alle Tags, nur der IE kennt das ganze eben nur für Links. :rolleyes:

Geschrieben

ich glaub ihr versteht nicht ganz was ich meine

ich möchte, dass das funktioniert:

<td><a class="meineklasse" href="xy.php">blabla</a></td>

tut es aber nicht wegen dem a:hover und so

Geschrieben

Irgendwie kapiers ich nicht :)

A:link.meineklasse {

.... }

A:visited.meineklasse{

...}

A:hover.meineklasse {

... }

A:active.meineklasse {

}

sollte so funktionieren, wenn du was auslässt, werden die Formatierungen von den A:link, usw übernommen.

Gruß

Sabine121

Geschrieben

:confused: du hast recht, habe gerade in meiner CSS Fibel nachgeschaut,

:eek: aber wie ich es gemacht habe, funzt das auch :OD

kommt davon, wenn man einfach losschreibt und nicht nachschaut

Gruß

Sabine

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...