Zur Navigation

Problem mit akive-link

1 Geli

Hallo,
neuer Tag - neues Problem:
Ich möchte gerne dass meine aktiven Seiten mit dem aktiv-link angezeigt werden. (bzw. dass dieser Link stehen bleibt.)
Dass man hierfür eine classe anlegen muß, habe ich hier im Forum schon gelesen.
Nun hab ich eine classe angelegt - aber irgendwo steckt ein Fehler drin!
Jetzt verschwindet der Link nicht mehr, auch wenn man die Seite wechselt.

Wäre schön, wenn sich das jemand anschauen könnten:

CSS
ul#menu {
	list-style: none;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-size:13px;
	}
li#wandgestaltung a {
	background: url(images/button_dunkelblau.gif) no-repeat;
	width: 150x;
	height: 26px;
	display: block;
	outline: none;
	color: #000000;
	text-decoration: none;
	line-height: 25px;
	text-align: left;
	text-indent: 15px;
	font-size: 13px;
	font-weight: normal;
	}
li#wandgestaltung a:hover {
	background:url(images/hover_button_dunkelblau.gif) no-repeat;
	font-weight: bold;
} 
li#wandgestaltung a:active {
	background: url(images/hover_button_dunkelblau.gif) no-repeat;
	font-weight: bold;
} 

li#wandgestaltung a, li#wandgestaltung a:hover, li#wandgestaltung a:active, li#wandgestaltung_aktuell {
background: url(images/hover_button_dunkelblau.gif) no-repeat;
	font-weight: bold;
} 

HTML

<ul id="menu"> 
            <li id="wandgestaltung"><a href="wandgestaltung.html" class="wandgestaltung_aktuell">Wandgestaltung</a></li>

Gruß Geli

22.10.2009 09:21

2 Jörg

So ganz verstehe ich dein Problem noch nicht

Ich möchte gerne dass meine aktiven Seiten mit dem aktiv-link angezeigt werden. (bzw. dass dieser Link stehen bleibt.)

Was genau meinst du damit? meinst du die Formatierung von a:active?

Jetzt verschwindet der Link nicht mehr, auch wenn man die Seite wechselt.

Was meinst du mit "Verschwinden" - dass der Link nicht mehr angezeigt / ausgeblendet wird? und unter welchen Umständen passierte dies?

22.10.2009 11:36

3 Geli

Hallo Jörg,
ich möchte gerne, dass der User weiß wo er sich befindet.
Deshalb soll bei einer ausgewählten Seite, in der Navigation der entsprechende Button gleich aussehen wie "a:active".
Nun habe ich in diesem Betrag gelesen, dass man hierfür eine class anlegen muß:
https://joergs-forum.de/aktive-seite-in-der-navigation-sichtbar-machen-t-2293-1
Wie so oft, schaffe ich es nicht, diese Beschreibung auf meinen Code zu übertragen.
Mit meiner angelegten class="wandgestaltung_aktuell" erscheint nun immer der Button "active". Die normale Variante a + a:hover wurde dadurch eliminiert.
Obwohl ich die class im html-code nur mit der Seite "wandgestaltung" verlinkt habe, erscheint diese nun auch auf allen übrigen Seiten.
Ich hoffe, nun ist es verständlicher erklärt.
Gruß Geli

22.10.2009 11:56

4 Jörg

Mit meiner angelegten class="wandgestaltung_aktuell" erscheint nun immer der Button "active".

Was für ein Button ist damit gemeint - "hover_button_dunkelblau.gif"?

Obwohl ich die class im html-code nur mit der Seite "wandgestaltung" verlinkt habe, erscheint diese nun auch auf allen übrigen Seiten.

Hast du diesen Link denn auch auf den übrigen Seiten mit dieser Klasse gekennzeichnet? Die Klasse darf natürlich nur dem Link zugeordnet werden, der auf die Seite selbst verweist, d.h. du musst den Code für die einzelnen Seiten entsprechend anpassen.

PS: ich würde die Klasse auch nicht "wandgestaltung_aktuell" nennen, sondern neutraler, z.B. "diese_seite". Die Klasse soll ja auf jeder Seite einem anderen Link zugeordnet werden (eben den LInk der auf die jeweilige Seite selbst verweist)

22.10.2009 12:23 | geändert: 22.10.2009 12:30

5 Geli

Hallo Jörg,

Was für ein Button ist damit gemeint - "hover_button_dunkelblau.gif"?
Ja , genau der.
Hast du diesen Link denn auch auf den übrigen Seiten mit dieser Klasse gekennzeichnet? Die Klasse darf natürlich nur dem Link zugeordnet werden, der auf die Seite selbst verweist, d.h. du musst den Code für die einzelnen Seiten entsprechend anpassen.

Ich habe den Link nur auf der Seite einbebaut, für die er gelten soll.

Hier:

<ul id="menu"> 
           <li id="wandgestaltung"><a href="wandgestaltung.html" class="wandgestaltung_aktuell">Wandgestaltung</a></li> <li id="malerarbeiten"><a href="malerarbeiten.html">Malerarbeiten</a></li>
      <li id="tapezierarbeiten"><a href="tapezierarbeiten.html">Tapezierarbeiten</a></li>
      <li id="innenputze"><a href="innenputze.html">Innenputze</a></li>
         <li id="bodenbelaege"><a href="bodenbelaege.html">Bodenbeläge</a></li>
      <li id="lackieren"><a href="lackieren.html">Lackieren</a></li>
      <li id="fassadengestaltung"><a href="fassadengestaltung.html">Fassadengestaltung</a></li>
      <li id="waermedaemmung"><a href="waermedaemmung.html">Wärmedämmung</a></li>
      <li id="geruestbau"><a href="geruestbaum.html">Gerüstbau</a></li></ul> 

PS: ich würde die Klasse auch nicht "wandgestaltung_aktuell" nennen,
sondern neutraler, z.B. "diese_seite". Die Klasse soll ja auf jeder Seite einem anderen Link zugeordnet werden (eben den LInk der auf die jeweilige Seite selbst verweist)
Das verstehe ich nun wieder nicht. Der Link muß doch für jede Seite anders heißen, weil auf jeder Seite auch ein anderer Button bzw. ein anderes Backgroundbild zugeordnet werden soll ???
"diese_seite_wandgestaltung"
"diese_seite_malerarbeiten"......
Oder nicht???

22.10.2009 13:07

6 Jörg

Das verstehe ich nun wieder nicht. Der Link muß doch für jede Seite anders heißen, weil auf jeder Seite auch ein anderer Button bzw. ein anderes Backgroundbild zugeordnet werden soll ???
"diese_seite_wandgestaltung"
"diese_seite_malerarbeiten"......
Oder nicht???

Ja, wenn du auf jeder Seite einen anderen aktiven Button hast, kannst du das so machen.

Mi fällt aber grad auf, dass dein CSS und HTML nicht zueinander passen.

Du verwendest im CSS "li#wandgestaltung_aktuell", welches folgendes HTML-Element ansprechen würde:
<li id="wandgestaltung_aktuell">

Im HTML verwendest du aber:
<a href="wandgestaltung.html" class="wandgestaltung_aktuell">Wandgestaltung</a>

Das könnte durch ein "a.wandgestaltung_aktuell" angesprochen werden

Klassen werden in CSS mit einem Punkt gekennzeichnet, IDs mit einer Raute

22.10.2009 13:20 | geändert: 22.10.2009 13:21

7 Geli

Hallo Jörg,
ich habe es geschafft!!!!
Hier mein Code für die Nachwelt:

ul#menu,
li#wandgestaltung a:hover,
li#wandgestaltung a:active,
li#wandgestaltung_aktuell a{
	background: url(images/hover_button_dunkelblau.gif) no-repeat;
	width: 150px;
	height: 26px;
	display: block;
	color: #000000;
	text-decoration: none;
	line-height: 25px;
	text-align: left;
	text-indent: 15px;
	font-size: 13px;
	font-weight: bold;
	} 

 <ul id="menu"> 
       <li id="wandgestaltung_aktuell"><a href="wandgestaltung.html">Wandgestaltung</a></li>
 <li id="malerarbeiten"><a href="malerarbeiten.html">Malerarbeiten</a></li>
      <li id="tapezierarbeiten"><a href="tapezierarbeiten.html">Tapezierarbeiten</a></li>
      <li id="innenputze"><a href="innenputze.html">Innenputze</a></li>
         <li id="bodenbelaege"><a href="bodenbelaege.html">Bodenbeläge</a></li>
      <li id="lackieren"><a href="lackieren.html">Lackieren</a></li>
      <li id="fassadengestaltung"><a href="fassadengestaltung.html">Fassadengestaltung</a></li>
      <li id="waermedaemmung"><a href="waermedaemmung.html">Wärmedämmung</a></li>
      <li id="geruestbau"><a href="geruestbaum.html">Gerüstbau</a></li></ul> 

Der entscheidende Hinweis war
Mir fällt aber grad auf, dass dein CSS und HTML nicht zueinander passen.

VIELEN DANK!!!
Ich hoffe, das war mein letztes Problem für dieses Projekt.
Gruß Geli

22.10.2009 14:28

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]