Navigation Sidebar Linkhintergrundfarbe der aktiven Seite ändern

[Johannes1000]

hallo ich bin neu hier und würde eure prof. hilfe benötigen.
bin ein html neuling und würde daher genaue erklärungen benötigen, da mir fachwissen fehlt.

ich habe eine neue hp mit web expression gebastelt und auch schon fertig. nur ein problem macht mir kopfzerbrechen wie ich es mit html und css lösen könnte.

an der linken seite habe ich eine sidebar zur navigation mit den ganzen links zu den seiten. ich möchte nun wenn ich einen link der sidebar drücke und die neue seite erscheint sollte der link hintergrund
also back-color zum beispiel weiß bleiben. mit den einzelnen link-zuständen wie active, hover etc. geht das leider nicht, da die ja nur im augenblick der gedrückten maus oder wenn man
mit der maus drüberfährt aktiv werden.
ich hab mich auch schon dämliche gesucht in div. foren.
einmal hab ich gelesen man müsste dem link der seite ne klasse zuweisen und diese dann im css formatieren. leider wurde nicht erklärt wie das genau geht bzw. ob das in meinem fall
umsetzbar wäre.
vielleicht könnte sich mein problem mal jemand anschaun - hier die hp: Privat
Danke schon mal!
mfg. Johannes

 

[threadi]

Du suchst nach den CSS-Pseudoklassen focus und active:
SELFHTML: Stylesheets / CSS-Eigenschaften / Pseudoelemente und Pseudoklassen
:active: Aktiviertes Element: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
focus: Fokus: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Beispiel:

#sidebar a:link, #sidebar a:visited, #sidebar a:hover, #sidebar a:active, #sidebar a:focus {
 .. Standardeigenschaften des Links für alle Zustände ..
}

#sidebar a:active {
 .. abweichende Eigenschaften für den active-Zustand ..
}

 

[Tronjer]

Korrigiere mich, sofern ich hier falsch liegen sollte, aber die Linkformatierung für a:active wird in dem Moment aufgehoben, wo man die Maustaste loslässt.

Ich verstehe die Frage so, dass die Hintergrundfarbe des Links mit der aufgerufenen Seite korrespondieren soll. Das lässt sich in der Tat über CSS-Klassen realisieren, und zwar entweder statisch, durch die separate Anpassung der Navigation für die einzelnen Unterseiten, oder dynamisch, in dem ein Script den jeweiligen Seitentitel ausliest und darauf basierend die Formatierung vornimmt.

btw. Web Expression wollte man mir im vergangenen Jahr auch andienen, dabei ist es der schlechtest mögliche Einstieg in die Materie überhaupt, schlimmer noch als Dreamweaver. Weil man durch die point & klick Funktionalität in Kombination mit Templates nicht wirklich lernt, was man da eigentlich tut, und MS Webtechnologien ohnehin nur eine untergeordnete Rolle spielen. Besser wäre es, mit einem einfachen Editor zu beginnen und nach entsprechender Einarbeitung auf eine kostenlose IDE umzusteigen.

 

[Johannes1000]

nein du liegst nicht falsch - ich meinte nicht a:active - das geht ja in meinem fall nicht

das zweite mit den css klassen meinte ich, die links sollten mit den aufgerufenen seiten korrespondieren in der form, dass der derdrückte link zur aufgerufenen seite solange eine bestimmte hintergrundfarbe hat bis in der sidebar ein anderer link gedrückt wird.

betreffend lernen hast schon recht. ich weiß oft wirklich nicht was ich tu, aber vorerst würd ich das halt dringend brauchen.

könntest du mir erklären wie das mit css-klassen zu realisieren wär? es sollte halt für mich verständlich sein.
danke vorerst.
mfg. johannes

 

[Tronjer]

Du könntest auf den einzelnen Unterseiten den jeweils korrespondieren Link separat formatieren. Das ist zwar keine elegante, aber wahrscheinlich die einfachste Lösung.

<li><a target="_self" class="hintergrund" href="http://www.html.de/index.htm">News</a></li>

und dann im Head (Style-Container) die CSS-Klasse notieren.

.hintergrund {
    background-color: white;
}

 

[Johannes1000]

hallo tronjer

ich hab jetzt mal <li><a target="_self" class="hintergrund" href="index.htm">News</a></li> hinterlegt und zwar in der master.dwt wo ich ja die links definiert hab. um genau zu sein brauchte ich ja nur class="hintergrund" einfügen da der rest vorhanden war, in meiner layout.css hab ich dann obigen formatierungscode hinterlegt.
der linkhintergrund wird nun in weiß angezeigt. er bleibt aber immer weiß.

wenn ich den code
<li><a target="_self" class="hintergrund" href="index.htm">News</a></li> direkt in der aufgerufenen seite hinterlege wird mir ja der link doppelt also ein neuer link mit text und allem erzeugt. muss ich den code <li><a target="_self" class="hintergrund" href="index.htm">News</a></li> vorher in der master.dwt löschen? was mach ich da nicht richtig oder hab was hab ich da nicht ganz verstanden?

mfg johannes

 

[Tronjer]

Siehst du, das ist das Problem mit solchen Baukästen. Ich weiß nicht, wie diese master.dwt aufgebaut ist, sondern gehe einfach mal davon aus, dass es sich um statisches HTML handelt und für jede Seite eine eigene Datei angelegt wird. Falls Expression hingegen DHTML über JavaScript erzeugt, dann könnte das zu unvorhergesehenen Ereignissen führen. Aber ich denke mal, du hast einfach nur den Eintrag in das Master-Template kopiert, und dann wird der Link natürlich doppelt ausgegeben.

Im Head befindet sich eine Datei (style3.css), welche für die Formatierung der gesamten Website verantwortlich ist. Sollen nun einzelne Unterseiten davon abweichen, dann müssen diese Einträge überschrieben werden. Dazu kannst du die notwendigen CSS-Anweisungen in den Style-Container des Heads, und zwar nach dem Eintrag:

<link href="../styles/style3.css" rel="stylesheet" type="text/css" /

notieren, oder du schreibst sie direkt in das öffnende tag. Das erste Beispiel habe ich dir weiter oben bereits genannt, und das zweite würde so aussehen:

<li><a target="_self" style="background-color:#fff;" href="http://meinenews.html">News</a></li>

Du sollst hier nicht das gesamte <li> Element kopieren, sondern lediglich den CSS-Part hinzufügen und das muss natürlich auf den korrespondierenden Seiten geschehen. Falls Expression das nicht zulässt und bei jeder Änderung immer wieder die Angaben aus dieser master.dwt übernimmt, dann musst du mit den blauen Links wohl leben. Oder du absolvierst ein Tutorial für HTML/CSS und baust die Site selbstständig im Notepad++ nach. So schwer ist das nicht.

 

[Johannes1000]

ja mein problem is einfach dass ich zuwenig zusammenhänge versteh. ich hab mich deshalb entschlossen dass ich das mal sein lasse. ich werd mal die grundlegenden dinge
in html lernen und dann wieder über dieses problem nachdenken.
vorerst mal recht herzlichen dank für die hilfestellungen hier!
mfg. johannes