REDAXO Forum

Hallo zusammen,

unter meiner Redaxo 4.5.1 Bastelinstanz ([url]http://www.oldie-friemler.de/redaxo/url]) bastel ich gerade an der Farbgebung für meine Links. Ich möchte gerne einen Wechsel zwischen roter und weißer Hintergrundfarbe. Wenn man über den Link geht, auf ihn klickt und wenn dieser Link gerade besucht ist möchte ich, dass seine Hintergrundfarbe weiß ist, sonst rot. Dafür habe ich folgenden Code in meiner main.css:

Code: Alles auswählen

a:link {
	color:#704214;
	text-decoration:none;
	font-weight:bold;
	background:red;
}

a:visited {
	color:#704214;
	text-decoration:none;
	font-weight:bold;
	background:red;
}

a:hover {
	color:red;
	text-decoration:none;
	font-weight:bold;
	background:white;
}

a:active {
	color:red;
	text-decoration:none;
	font-weight:bold;
	background:white;
}

a:focus {
	color:red;
	text-decoration:none;
	font-weight:bold;
	background:red;
}

Leider bleibt der gerade aktive Link rot. Und ich weis nicht, wieso. Habe ich eine Eigenschaft vergessen?

Danke euch im voraus und Gruß,
David

Scheinbar funktioniert das durch die reinen a Tag Klassen im CSS nicht, daher habe ich die Hintergrundfarbensteuerung nun über die li Tags geregelt:

Code: Alles auswählen

.rex-current{
	background:white;
}

.rex-normal{
	background:red;
}

Ich nutze zur Zeit die klassische Rex Navigation Funktion. Zusätzlich habe ich noch die folgenden Formatierung im a Tag festgelegt, damit der weiße Hintergrund auch bei hover und active angezeigt wird:

Code: Alles auswählen

a:link {
	color:#704214;
	text-decoration:none;
	font-weight:bold;
}

a:visited {
	color:#704214;
	text-decoration:none;
	font-weight:bold;
}

a:hover {
	color:red;
	text-decoration:none;
	font-weight:bold;
	background:white;
}

a:active {
	color:red;
	text-decoration:none;
	font-weight:bold;
	background:white;
}

a:focus {
	color:red;
	text-decoration:none;
	font-weight:bold;
}

Danke für's lesen und Grüße,
David

Ok, ich habe nun versucht, die Definitionen etwas zusammen zu fassen, leider ohne Erfolg. Stand ist nun dieser:

Code: Alles auswählen

.rex-current li,a:hover,a:active{
	background:white;
}

.rex-active li{
	background:red;
	display:block;
}

.rex-active a:hover,a:active{
	background:white;
}

.rex-normal li{
	background:red;
	display:block;
}

.rex-normal a:hover,a:active{
	background:white;
}

Ergebnis kann man hier sehen: http://oldie-friemler.de/redaxo/index.php?article_id=1

Um es zusammenfassend zu beschreiben:

Es gibt drei li-Klassen: rex-normal, rex-active und rex-current (so von Redaxo vorgegeben)
- rex-normal: Nummerierungspunkt mit deaktivem Link
- rex-current: Link, der gerade aktiv ist
- rex-active: "Ober"Link des aktiven Links

Ich möchte gerne, dass

1. alle deaktiven Links roten Hintergrund haben. Sollte durch diesen Abschnitt geschehen:

Code: Alles auswählen

.rex-normal li{
	background:red;
	display:block;
}

2. wenn mit der Maus über einen deaktivierten Link gefahren und geklickt wird, soll dieser weiß erscheinen:

Code: Alles auswählen

.rex-normal a:hover,a:active{
	background:white;
}

3. Links, die gerade aktiv sind, sollen weiß erscheinen:

Code: Alles auswählen

.rex-current li,a:hover,a:active{
	background:white;
}

4. Oberlinks eines aktiven Links sollen rot erscheinen:

Code: Alles auswählen

.rex-active li{
	background:red;
	display:block;
}

5. wenn man aber über diese Oberlinks fährt, sollen diese wieder weiß erscheinen:

Code: Alles auswählen

.rex-active a:hover,a:active{
	background:white;
}

Es wird aber komplett anders angezeigt. Muss ich hier die Klassen trennen?

Kurios ist auch, dass dies hier funktioniert:

Code: Alles auswählen

li.rex-current {
	background:white;
}

li.rex-active {
	background:red;
}

li.rex-normal {
	background:red;
}

Das hier aber nur bei der Klasse .rex-current:

Code: Alles auswählen

.rex-current li {
	background:white;
}

.rex-active li {
	background:red;
}

.rex-normal li {
	background:red;
}

Sind das nicht zwar zwei verschiedene Schreibweisen, bezwecken aber das gleiche?

Ich hab's soweit hinbekommen, dass es funktioniert. So sieht's nun aus:

Code: Alles auswählen

li.rex-normal{
	background:red;
}

.rex-normal li:active{
	background:white;
}

.rex-normal a:hover{
	background:white;
	display:block;
}

li.rex-active{
	background:red;
}

.rex-active li:active{
	background:white;
}

.rex-active a:hover{
	background:white;
	display:block;
}

li.rex-current{
	background:white;
}

.rex-current li:active{
	background:white;
}

.rex-current a:hover{
	background:white;
	display:block;
}

Ich habe a:hover absichtlich definiert, da li:hover scheinbar nicht funktioniert mit bestimmten Browsern (so oftmals gelesen im Netz). Die display:block; Eigenschaft habe ich auf a:hover gegeben, da ansonsten nur der Link, also nur das Wort, weiß hinterlegt ist.

Gibt es andere, bessere Vorschläge?

Danke euch und Gruß,
David

gib besser gleich jedem Link ein display:block nicht nur über :hover, dann spielt es auch keine Rolle ob das hover bei li oder a steht. Im übrigen wäre das ja nicht schlimm wenn das ein veralteter Browser nicht umsetzt, die Navigation funktioniert ja auch ohne hover.

ich würde es zB. so machen:

Code: Alles auswählen

#nav ul {
    /* erstmal alles weiss auf rot */
    background:red;
    color: white;
}

#nav li>a {
    /* damit füllt das a-tag das gesamte li aus */
    display: block;
}

#nav li > a:hover, #nav li.rex-current > a {
    /* hover und rex-current Farben umkehren */
    background:white;
    color: red;
}

webghost hat geschrieben:gib besser gleich jedem Link ein display:block nicht nur über :hover, dann spielt es auch keine Rolle ob das hover bei li oder a steht. Im übrigen wäre das ja nicht schlimm wenn das ein veralteter Browser nicht umsetzt, die Navigation funktioniert ja auch ohne hover.

ich würde es zB. so machen:
Code: Alles auswählen
#nav ul {
    /* erstmal alles weiss auf rot */
    background:red;
    color: white;
}

#nav li>a {
    /* damit füllt das a-tag das gesamte li aus */
    display: block;
}

#nav li > a:hover, #nav li.rex-current > a {
    /* hover und rex-current Farben umkehren */
    background:white;
    color: red;
}

Jetzt fehlt mir etwas CSS Wisssen. Du weist dem ul eine id nav zu. Das ist die, die ich für den div drumherum nutze. Verstehe ich den Teil nun richtig, dass die Definition in, z.B., dem Bereich:

Code: Alles auswählen

#nav ul {
    /* erstmal alles weiss auf rot */
    background:red;
    color: white;
}

nun nur für ul's im div mit ID nav gilt? Also weist du ja eigentlich der ID nav den ul zu...

EDIT: Ok, wieder was gelernt. Ist wohl wirklich so, wie oben beschrieben! Das macht das ganze natürlich noch einfacher. Danke!!!

#nav ul bezieht sich auf das Element ul im Element mit der ID "nav". Kannst auch schreiben div#nav ul

musst Dich halt mal ein bisschen mit den Selectoren befassen - hier eine Seite dazu http://jendryschik.de/wsdev/einfuehrung/css/selektoren

webghost hat geschrieben:#nav ul bezieht sich auf das Element ul im Element mit der ID "nav". Kannst auch schreiben div#nav ul

musst Dich halt mal ein bisschen mit den Selectoren befassen - hier eine Seite dazu http://jendryschik.de/wsdev/einfuehrung/css/selektoren

Alles klar, danke dir!

REDAXO Forum

aktueller Link Hintergrundfarbe

aktueller Link Hintergrundfarbe

Re: aktueller Link Hintergrundfarbe

Re: aktueller Link Hintergrundfarbe

Re: aktueller Link Hintergrundfarbe

Re: aktueller Link Hintergrundfarbe

Re: aktueller Link Hintergrundfarbe

Re: aktueller Link Hintergrundfarbe

Re: aktueller Link Hintergrundfarbe