[XHTML/CSS] Navigation --> aktuelle Seite hervorheben

Zweipunktnull · 21. Januar 2007

Hallo!

Ich habe eine Frage.

Also.. ich möchte bei einer Navigation es so machen, dass das Feld zur aktuelle Seite - die, wo der Benutzer gerade drauf ist - hervorgehoben wird, bspw. durch eine andere hintergrund farbe.

das problem ist, dass ich das nicht einfach in jeder HTML-datei machen kann, da die navigation eine datei ist und immer eingebunden wird, damit mans schnell verändern kann.

gibts da irgendwelche tricks in css oder so?
ahja: wenns geht würd ich auch nicht so gerne js benutzen..

mfg
computer freak

EDIT: Also hier mal ein Bsp. Bei der Navi wird die aktuelle Seite immer hervorgehoben und dies auch, wenn JavaScript deaktiviert ist. wie geht das?

hemorieder · 21. Januar 2007

ich denke mal da wird es mit php gelöst. käme denn das für dich auch in frage, weil mit php wäre das ziemlich easy

Zweipunktnull · 21. Januar 2007

meintest? gibts keine andere möglichkeit?

weil es gibt einige bücher, bspw. css grundlagen oder so, da kann man sich online das inhaltsverzeichnis anschaun und da gibts auch n kapitel wie bspw:

Tabbed Navigation – Navigation mit Registern................................................. 94
Vorbereitende Maßnahmen für den Navigationsbereich............................. 94
Die Hyperlinks im Navigationsbereich ändern ............................................ 95
Einen Rollover-Effekt für die Hyperlinks definieren..................................... 96
Sie sind hier: Aktuelle Seite hervorheben

also muss es doch auch nur mit css gehen oder?
denk net das die in nem css buch auf einmal mit php oder javascript anfangen

okay, aber mit php wär auch nich sooooo schlimm...

nur leider hab ich grad keine idee wie man das machen soll...

Keita · 21. Januar 2007

Es geht zwar mit CSS, aber das wäre IMHO durchs Knie in die Brust geschossen...
Du mußt jedem Navigationspunkt eine ID zuweisen, ferner bekommt ein Elternelement der Navigation eine innerhalb aller Seiten eineindeutige ID, bspw. das body-Element. Im Stylesheet kannst du nun für jede Seite der Kombination aus body-ID und Navigationspunkt-ID den Style zuweisen, der diesen Navigationspunkt als selektiert hervorhebt.

Code:

Home:
<body id='home'>

Über mich:
<body id='aboutme'>

Kontakt:
<body id='kontakt'>

Navigation:
<ul>
  <li id='link_home'><a href='index.html'>Home</a></li>
  <li id='link_aboutme'><a href='aboutme.html'>Über mich</a></li>
  <li id='link_kontakt'><a href='kontakt.html'>Kontakt</a></li>
</ul>

CSS:
#home #link_home,
#aboutme #link_aboutme,
#kontakt #link_kontakt
{
  font-weight: bold;
}

Ich würde allerdings eine serverseitige Lösung (PHP oder was auch immer) vorziehen, wobei das "wie" davon abhängt, wie die Seiten generiert werden und wie die Struktur ausschaut.

greetings, Keita

Zweipunktnull · 21. Januar 2007

das problem is halt nur, dass ich diese technik gern auf drei seiten einsetzen würde...

nur eine davon basiert auf php. die beiden anderen sind halt html internetauftritte... (deren server auch kein php unterstützt)
deswegen werd ich mir morgen mal dein css vorschlag anschaun. jetz geh ich erstma ins bett

HighTec · 22. Januar 2007

Naja man könnte allerding auch vorgeben es als bild zu weewchseln indem man einer id einfach ein bild zuteilt!!!

Suche

[XHTML/CSS] Navigation --> aktuelle Seite hervorheben

Zweipunktnull

Commander

hemorieder

Lieutenant

Zweipunktnull

Commander

Keita

Lt. Commander

Zweipunktnull

Commander

HighTec

Lieutenant

Ähnliche Themen