Hallo,

Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.

Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt :-)
Selbst einladen kannst Du dich hier: http://redaxo.org/slack/
gurbelunder
Beiträge: 34
Registriert: 19. Dez 2013, 11:37

aktueller Link Hintergrundfarbe

21. Jan 2014, 10:15

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

gurbelunder
Beiträge: 34
Registriert: 19. Dez 2013, 11:37

Re: aktueller Link Hintergrundfarbe

21. Jan 2014, 12:45

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

gurbelunder
Beiträge: 34
Registriert: 19. Dez 2013, 11:37

Re: aktueller Link Hintergrundfarbe

21. Jan 2014, 13:24

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?

gurbelunder
Beiträge: 34
Registriert: 19. Dez 2013, 11:37

Re: aktueller Link Hintergrundfarbe

21. Jan 2014, 14:01

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

Benutzeravatar
webghost
Beiträge: 266
Registriert: 6. Okt 2010, 20:10
Kontaktdaten: Website

Re: aktueller Link Hintergrundfarbe

26. Jan 2014, 20:40

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;
}

gurbelunder
Beiträge: 34
Registriert: 19. Dez 2013, 11:37

Re: aktueller Link Hintergrundfarbe

27. Jan 2014, 11:52

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!!!

Benutzeravatar
webghost
Beiträge: 266
Registriert: 6. Okt 2010, 20:10
Kontaktdaten: Website

Re: aktueller Link Hintergrundfarbe

27. Jan 2014, 12:36

#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

gurbelunder
Beiträge: 34
Registriert: 19. Dez 2013, 11:37

Re: aktueller Link Hintergrundfarbe

27. Jan 2014, 14:39

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!

Zurück zu „Sonstiges“