Visited ist stärker als Active

[Andrea]

Guten Tag

Ich habe die Definitionen für Link, Visited, Hover und Active in dieser Reihenfolge im CSS-Dokument definiert. Leider ist nun der Visited-Befehl stärker als der Active-Befehl, was bedeutet, dass der Active-Befehl gar nicht sichtbar ist.

Muss etwas an der Reihenfolge geändert werden oder wie lässt sich dieses bestimmt einfache Problem sonst noch lösen?

Danke für eine Antwort.

Andrea

[Laus]

Kann es sein das du unter Active etwas andere Vorstellungen hast .
Active bedeutet in diesem Fall nämlich nur das er sich ändert solange die Maustaste gedrückt ist.
Wenn du hingegen möchtest das sich die Farbe des Links auf der Aktuellen Seite ändert musst du dies mit einer extra id oder classe und dazugehöriger Definition bewerkstelligen
Beispiel

Code: Alles auswählen

<ul id="navlist">
<li id="active"><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>

im CSS

ul#navlist li#active a:link
{
color: #800000;
background:blue;
border-color: #aaab9c;
}

Gruß Xaver

[Andrea]

Ja, da hatte ich tatsächlich eine andere Vorstellung, danke dir. Ich habe jetzt im CSS-Dokument deinen Code hineinkopiert und dieser wird im Dreamweaver auch in der CSS-Palette aufgeführt. Im Code sieht es so aus (Ausschnitt):

a:link {
color: #78764B;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #B5A887;
}
a:hover {
color: #9AC536;
text-decoration: none;
}
a:active {
color: #9AC536;
text-decoration: none;
}
ul#navlist li#active a:link
{
color: #9AC536;
text-decoration: none;
}

Wo genau muss ich denn den Anfang deines Codes hinschreiben? Ich arbeite eben wie gesagt, mit dem Dreamweaver und bin mit der Codedarstellung überhaupt nicht vertraut.

Danke für deine Antwort. Andrea.

[Laus]

Das mit #navlist und #aktiv sind nur Beispiele. Du musst natürlich die IDs eingeben die in deinem HTML Quellcode stehen. Ich weis natürlich nicht wie Dreamweaver Die ids vergibt, aber ich glaube mich zu erinnern das in älteren Versionen die Möglichkeit des umschaltens von der WYSIWYG Ansicht in die Quellcode Ansicht möglich war. Dort kannst du dann den Quellcode ansehen und gegebenenfalls ändern.
Ich nehme aber an das dies auch über die WYSIWYG Ansicht geht indem du einfach den Link der geändert werden soll in jeder Seite über die Formatierungsfunktion änderst. Da ich meine Seiten nur in einem einfachen Editor schreibe kann ich dir leider keine genaue Anleitung für Dreamweaver geben.

[Andrea]

Hmmh. Nun die Stilvorlage, auf welche die zusätzliche Definition wirken soll, heisst .navigation_2 und wurde über die CSS-Palette als Klasse definiert.

So sieht der Codeabschnitt im Hintergrund aus, wenn ich die betreffende Zeile markiere:

<div></div>
<div><a>Adresse</a> :: <a>Lageplan</a></div>
<TemplateBeginEditable>
<div><br>
</div>

Kannst du mir aufgrund dieser Namensvergebung sagen, wie denn die Stilvorlage im CSS genau heissen und als was ich sie definieren soll (Klasse, Tag, Erweitert = IDs, Pseudoklassen-Selektoren).

Ich denke, wenn ich den Namen richtig eingeben kann (mit Leerzeichen, Doppelpunkt und sonstigen Sonderzeichen), wird das Stylesheet im Code erkannt und alle anderen Angaben wie Farbe usw. kann ich visuell über die Palette einrichten.

Mühsam, gell diese Dreamweaver-Gestalter... javascript:emoticon(':-D')

[Laus]

Bitte poste nochmal den Code und mach ein Häkchen bei HTML in diesem Beitrag deaktivieren dann wird er vollständig angezeigt.

[Andrea]

Hier nochmals der Codeausschnitt. Ich hoffe, alles bzw. das richtige erwischt zu haben... Vielen Dank.

<!-- TemplateEndEditable --></div>
<div id="apDiv1"></div>
<div class="navigation_2" id="navigation2"><a href="../05_kontakt/05_adresse.html">Adresse</a> :: <a href="../05_kontakt/05_plan.html">Lageplan</a></div>
<!-- TemplateBeginEditable name="kopf" -->
<div class="kopftext" id="kopf"><br />
</div>

[Laus]

wenn <a href="../05_kontakt/05_adresse.html">Adresse</a> der link ist den du als aktiv markieren willst dann musst du zuerst den HTML Code ändern zu

Code: Alles auswählen

<a id="active" href="../05_kontakt/05_adresse.html">Adresse</a>

in die CSS datei schreibst du dann

Code: Alles auswählen

div#navigation2 #active a:link
{
color: #9AC536;
text-decoration: none;
}

Hoffe das hilft dir

Gruß Xaver

[Andrea]

Ich danke dir sehr herzlich für deinen Input. Leider funktioniert es noch nicht wirklich. Ich habe den Code geändert:

<!-- TemplateEndEditable --></div>
<div id="apDiv1"></div>
<div class="navigation_2" id="navigation2"><a id="active" href="../05_kontakt/05_adresse.html">Adresse</a> :: <a id="active" href="../05_kontakt/05_plan.html">Lageplan</a></div>


Und das CSS-Dokument ergänzt:

div#navigation2 #active a:link
{
color: #9AC536;
text-decoration: none;
}

Tja, irgendetwas muss noch falsch sein...

[Laus]

Klar, du hasst ja keine Liste.
Versuch es so:

Code: Alles auswählen

div#navigation2 a#active
{
color:#9AC536;
text-decoration: none;
}

Dann müsste es klappen.

Gruß Xaver

[Andrea]

Ja, das sieht gut aus. Nun wird der Link grün. Das Problem ist jetzt aber, dass ich im Dreamweaver diverse Mustervorlagen angelegt habe. Auf diesen Musterseiten basieren die verschiedenen Einzelseiten. In der Mustervorlage kann ich in den HTML-Code eingreifen und die von dir angegebenen Änderungen machen. In den davon abhängigen Einzelseiten komme ich nicht an den Code heran und kann folglich nicht angeben, welcher Punkt denn nun aktiv, d.h. grün werden soll. Wenn ich dies auf der Musterseite mache, sind danach einfache alle Links grün, was ja der Sinn der Musterseite ist, leider aber nicht meinen Vorstellungen entspricht...

Irgendwie müsste es eine generelle Definition geben, dass der angeklickte Navigationspunkt in der Seite, die auf Klicken geladen wird, aktiv, also grün wird. Eigentlich so wie die Hover- und Visited-Befehle, einfach so, dass der Active-Befehl nicht nur beim Drüberfahren mit der Maus das Verhalten wechselt, sondern dieses Verhalten auf die neue geladene Seite übernimmt und nur auf den jeweiligen Navigationspunkt. Das ganze ist eine visuelle Kennzeichnung des aktiven Navigationspunktes und der Betrachter, weiss auf welcher Seite er gerade ist.

Vielleicht gibt es ja sowas. Ganz herzlichen Dank für deine bisherigen Inputs.

Andrea

[Laus]

Ich verstehe zwar jetzt nicht so recht warum du auf den Einzelseiten nicht an den Code kommst aber naja. Mann muss ja nicht alles verstehen.
Die Funktion die du möchtest gibt es leider noch nicht automatisch, eben nur mit besagtem Trick.
Eine andere Möglichkeit wäre eine -->breadcrumb navigation<--, die ich persönlich eigentlich als die Bessere Methode empfinde.

Gruß Xaver

[Andrea]

Brotkrümel-Navigation, hi, hi. Das tönt lustig. Nun ja, so schlimm ist es nicht. Ich lasse wohl alles am besten wie es ist. Ein schönes Wochenende. Andrea.