navigation über css

donvito

hello,

folgendes problem:

also ich hab ne navi, die ich über css steuere. den momentan besuchten link will ich mit grau unterlegen. bei visited werden ja alle grau, die ich überhaupt besuche, aber ich will nur das was im moment besucht ist grau haben.

so im html der fläche grau geben kann ich nicht, weils über ein php include läuft, der das nicht checken würde. also welchen befehl kann ich im css geben, damit der momentan besuchte link grau hinterlegt ist?

help me!

Macintosch

du gibst einfach in dein Tag ein:

Code

onFocus="this.style='backgound: #deinefarbegrau;'" onLostFocus="this.style='background: #deinefarbe;'"

bzw. wenn du eine externe css datei nutzt:

Code

onFocus="this.className=menu1" onLostFocus="this.className=menu"

donvito

okay, das kenn ich gar nicht: ich geb dir mal ein beispiel:

sorry, aber wo füg ich das jetzt ein???

danke dir!

Macintosch

ähm, erst mal, warum setzt du angaben, wie align, width und height nicht in deine css-definition?

willst du deine ganze zelle grau, ober nur hinter deinem text?
bei ersterem: die angaben in das td-Tag ansonsten in das span tag...

P.S.: natürlich musst du für menu1 und menu deine eigenen defs einsetzen...

donvito

ja, den hintergrund. du weisst gar nicht wie ich hier am fluchen bin, wegen dem beschissen code, den ich hier bearbeite...

also ich setzte den code in die td ein.

aber die "this.className=menu1" und "this.className=menu". kannst du mir das nochmal kurz erläutern. wie gesagt ich hab das noch nie gesehen. kannst du das nochmal erklären? was soll ich da reinschreiben?

Macintosch

this.className setzt einfach beim auslösen des ereignisses deine class neu. eben in meinem beispiel auf menu1...

du hast also in deiner css-definitionen zwei klassen:
einmal menu mit den verschiedenen formatierungen wie hintergrund, text, textfarbe, ausrichtung, etc...
und menu1 mit anderen definitionen...
dadurch, dass du die class nach einen ereignis änderst, änderst du damit auch die art der anzeige deiner daten eben auf die neue class...

donvito

ja, den hintergrund. du weisst gar nicht wie ich hier am fluchen bin, wegen dem beschissen code, den ich hier bearbeite...

also ich setzte den code in die td ein.

aber die "this.className=menu1" und "this.className=menu". kannst du mir das nochmal kurz erläutern. wie gesagt ich hab das noch nie gesehen. kannst du das nochmal erklären? was soll ich da reinschreiben?

Macintosch

war des jetzt nur doppelt geschickt, oder verstehst du meine ausführungen nicht???

donvito

doppelt geschickt...

aber ich raste gleich aus: also im css hab ich folgendes definiert:
---------------------------------------------------------------------------------------
.navioff {
text-decoration: none;
display: block;
background-color:#fff;
padding-top: 2px;
width: 100%;
height: 100%;
vertical-align: middle;

}

.navion {
text-decoration: none;
display: block;
background-color:#666;
padding-top: 2px;
width: 100%;
height: 100%;
vertical-align: middle;

}
---------------------------------------------------------------------------------------

und html:

---------------------------------------------------------------------------------------
<td class="navi randrechts1px" align="center" width="150" height="21" onFocus="menuoff" onLostFocus="menuon">
<a title="zur Startseite" href="index.php?global[struct]=index.conf">
<span class="navigation">HOME
</span>
</a>
</td>
--------------------------------------------------------------------------------------

es funzt nur nicht. bin ich zu blöd oder übermüdet?

Macintosch

also erst mal: du definierst für dein td class="navi randrechts1px" diese class änderst du aber mit den ereignissen!!!
und diese müssten nach deinen angaben nicht onFocus="this.className=menuoff" und onLostFocus="this.className=menuon" heißen sondern:
onFocus="this.className=navioff" und onLostFocus="this.className=navion"

nebenbei musst du nicht bei color angaben 6 zahlen angeben? (hex)

und dann kannst du das span tag evtl auch weglassen... (Da du da wieder eine andere class definition nutzt, kann es sein, dass er da durcheinander kommt, bzw die neue nutzt und nicht mehr die alte)

ähm und setzt mal statt onLostFocus onBlur... Hab grad gesehen, onLostFocus gibts gar net...
Falls es mit diesen events net geht probiers mal mit onMouseover und onMouseout. (Mit diesen muss es aber klappen, denn mit denen gehts bei mir... )

P.S.: warum setzt du im css dein width und height und in deinem td-Tag nochmal?

Tags