zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrundfarbe eines aktivierten Links

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.06.2006, 22:17
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2004
Beiträge: 32
fidel befindet sich auf einem aufstrebenden Ast
Standard Hintergrundfarbe eines aktivierten Links [gelöst]

Hallöchen
als Newbie hab ich hier mal ne Frage, die allen wohl etwas bescheuert vorkommen muss..
Ich würde gerne ein Menu erstellen, in welchem die aktiven Links eine bestimmte Hintergrundfarbe annehmen. Nach dem Aktivieren eines anderen Links sollte die Hintergrundfarbe des vorher aktiviterten Links wieder seine Ursprungsfarbe und der neu geöffnete Link sollte dann die neue Hintergrundfarbe annehmen.
Hab das mal so versucht:
Im css Stylesheet hab ich den folgenden Eintrag hinterlegt:
Code:
a.linkleiste {
	color: black;
	font-size: 85%;
	font-weight: bold;
	text-decoration: none;
	background-color: #a4b4b4;
	border-left: none;
	border-top: none;
	border-right: 1px solid;
	border-bottom: 1px solid;
	}
a.linkleiste:hover, a.linkleiste:focus, a.linkleiste:active  {
	color: black;
	font-size: 85%;
	font-weight: bold;
	text-decoration: none;
	background-color:  #e9eded;
	border-left: 1px solid;
	border-top: 1px solid;
	border-right: none;
	border-bottom: none;	
	}
In dem entsprechenden Block Bereich:
Code:
<a class="linkleiste" href="?page=main">Home </a>
<a class="linkleiste" href="?page=impressum">Impressum </a>
Grundsätzlich funktioniert das, jedoch leider nicht ganz wie ich möchte...
Mein Ziel ist es, dass wenn ein Link angewählt ist und der Besucher sich auf der entsprechenden Seite befindet, die Hintergrundfarbe des entsprechenden Links wie in a.linkleiste:hover bestehen bleibt, bis dass der Besucher eine andere Seite besucht...
Also, wenn ich "Home" klicke, sollte die Hintergrundfarbe #e9eded bleiben, bis ich wieder auf "Impressum" klicke, dann sollte die Hintergrundfarbe von "Impressum" die Farbe #e9eded haben, "Home" sollte dann wieder die Hintergrundfarbe #a4b4b4 haben.
Kann mir jemand verraten, was ich falsch mache oder wie ich mein Ziel erreichen könnte?

Geändert von fidel (15.06.2006 um 02:19 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.06.2006, 23:02
Benutzerbild von Geronimo
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.06.2004
Beiträge: 2.644
Geronimo sorgt für eine eindrucksvolle AtmosphäreGeronimo sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von fidel
Mein Ziel ist es, dass wenn ein Link angewählt ist und der Besucher sich auf der entsprechenden Seite befindet, die Hintergrundfarbe des entsprechenden Links wie in a.linkleiste:hover bestehen bleibt, bis dass der Besucher eine andere Seite besucht...
Um den jeweils aktiven Menüpunkt zu markieren könntest du ihm eine Klasse zuordnen und dieser anschließend die gewünschten Eigenschaften zuweisen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.06.2006, 23:33
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Und da es zurecht als logischer gilt, daß Menülinks nicht auf sich selber zeigen, würde ich Dir empfehlen, den Link auf der entsprechenden Seite zu entfernen und stattdessen z.B. ein <strong> einzusetzen (das hat im Gegensatz zu <span> auch semantisch eine Funktion und sieht auch ohne CSS gut aus), dieses erstmal genauso zu definieren wie <a> (nach dem Prinzip #nav a, #nav strong { ... }, evtl. font-weight anpassen) und dann entsprechende Redefinitionen bzgl. Farbe etc. vorzunehmen (nach dem Prinzip #nav a:hover, #nav strong { ... }).

Übrigens solltest Du Dein Menü als Liste <ul> darstellen; das ist in zeitgemäßem Webdesign de facto Pflicht, was ich heute bestimmt bereits zum dritten Mal schreibe

Geändert von heiko_rs (14.06.2006 um 23:36 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 15.06.2006, 01:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2004
Beiträge: 32
fidel befindet sich auf einem aufstrebenden Ast
Standard

Habt Dank! Nun gut, ich versuchte das mal in meinem Sinne nachzubilden:
css Stylesheet:
Code:
.linkleiste strong {
	color: black;
	font-size: 85%;
	font-weight: bold;
	text-decoration: none;
	background-color: #a4b4b4;
	border-left: none;
	border-top: none;
	border-right: 1px solid;
	border-bottom: 1px solid;
	list-style: none;
	}

.linkleiste, .linkleiste a {
	color: black;
	font-size: 85%;
	font-weight: bold;
	text-decoration: none;
	background-color: #a4b4b4;
	border-left: none;
	border-top: none;
	border-right: 1px solid;
	border-bottom: 1px solid;
	list-style: none;
	}

.linkleiste a:hover, .linkleiste a:focus, .linkleiste a:active, .linkleiste strong  {
	color: black;
	font-size: 85%;
	font-weight: bold;
	text-decoration: none;
	background-color:  #e9eded;
	border-left: 1px solid;
	border-top: 1px solid;
	border-right: none;
	border-bottom: none;	
	}
Im html Teil:
Code:
<strong>
<ul class="linkleiste">
	<a href="./?page=main">Home </a>
	<a href="./?page=impressum">Impressum </a>
</ul>
</strong>
Nun wird meine Linkleiste nicht mehr am linken ausseren Rand des div-Bereichs angezeigt, sondern erscheint nach rechts verschoben. Das mit der Hintergrundfarbe hat sich jedoch nicht geändert.. Möchte gerne eine horizontale Navigation, in welcher der Hintergrund des aktivierten Links eine bestimmte Farbe annimmt...
Ehm, heiko_rs, wie meinst Du, Links, die auf sich selbst zeigen? Sorry, versteh nicht...
Mit Zitat antworten
  #5 (permalink)  
Alt 15.06.2006, 01:57
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Dir fehlen noch die <li>s, die jeden Link einschließen müssen. "Nicht auf sich selber zeigen" bedeutet, daß man auf der Seite "Kontakt" den gleichnamigen Link nicht anklicken kann (wozu auch, man ist ja bereits dort). Dorthin wird stattdessen ein <strong> gesetzt. Das Ganze sähe dann so aus:

Code:
<ul id ="nav">
   <li><a href="#">Home</a></li>
   <li><strong>Kontakt</strong></li>
   <li><a href="#">Impressum</a></li>
</ul>
Für eine horizontale Anordnung bekommt #nav li ein float: left; und eine Breite, und darin dann #nav li a mit display: block; darstellen (und #nav li strong erstmal analog definieren, und dann Farben etc. anpassen).

In der CSS am Besten erstmal alle Standard-Abstände auf Null setzen (die erste der folgenden beiden Regeln) und die Listenpunkte entfernen (und dann alles wie gewünscht anpassen) :

Code:
* {
margin: 0;
padding: 0; }

#nav {
list-style: none; }

Geändert von heiko_rs (15.06.2006 um 02:02 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 15.06.2006, 02:18
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2004
Beiträge: 32
fidel befindet sich auf einem aufstrebenden Ast
Standard

Ich Idiot!
Total Fehlüberlegung!... Muss natürlich für jede Seite eine eigene "Linkleiste" erstellen und dort der aktuellen Seite dem Link "nach Ort und Stelle" die Linkeigenschaft nehmen!
Danke!!!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 17:32
Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird. Picasso CSS 36 03.01.2011 19:41
Links Hintergrundfarbe Bilder xm22 (X)HTML 6 06.09.2006 09:16
Holy Grail und der Internet Explorer! ONeill CSS 23 01.06.2006 18:20
Probleme mit 3 spalten luk CSS 3 08.06.2005 14:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:18 Uhr.