✔ wieder ein link problem

[Pielo]

Tagchen ich steh schon wieder seit gestern total auf dem Schlauch

Ich probier meine Menüleiste zu erstellen, und da soll jeder Link ein anderen Button haben und ein gedrückten Button soll auch anders aussehn aber irgendwie will das nicht klappen

Hier mal das was ich gerade habe:

css:

    	#mich {
   		
   		position: absolute;
   		top: 300px;
   		left: 30px;
   		
   	}	
   	
   	 #mich a.button:link {
   	 	width: 99px;
   		height: 57px;
   	 	background: url(Page_neu/mich-off.gif);

    	}

             #mich a.button:active {
     	            width: 99px;
   		height: 57px;
     	background: url(Page_neu/mich-on.gif);

     	}

html:

<div id="mich"><a href="mich.html"></a></div>

(wenn ich in die div id die Bildadresse einfüg dann seh ich das Bild auch auf der Seite aber da lässt sich halt das active Bild nicht ändern)


Es ist sicher ein total dummer Fehler, aber ich komm einfach nciht drauf. Ich hab auch sämtliches aus dem Forum probiert, aber es funkt nichts. Wo liegt mein Fehler

Wär lieb wenn ihr mir weiterhelfen könntet.

Danke schon mal im vorraus.

***lg Pielo***

 

[Maik]

Hi,

du hast zumindest schon mal vergessen, im Link die Klasse .button aufzurufen, womit die Regeln im Stylesheet auch keine Übereinstimmung im HTML-Dokument finden:

<div id="mich"><a href="mich.html" class="button></a></div>

Ansonsten empfehle dir einfach mal mein CSS-Tutorial CSS-Rollover.

mfg Maik

 

[Pielo]

Hi,

du hast zumindest schon mal vergessen, im Link die Klasse .button aufzurufen, womit die Regeln im Stylesheet auch keine Übereinstimmung im HTML-Dokument finden:

<div id="mich"><a href="mich.html" class="button></a></div>

Ansonsten empfehle dir einfach mal mein CSS-Tutorial CSS-Rollover.

mfg Maik

Danke, kann ich das auch so umsetzten das jeder Link sein eigenes Bild hat? Oder ist das nur für eine Standartlinkeinstellung geeignet Werde gleich mal probiern ob ich das so umsetzten kann wie ich mir das vorstell.

 

[Maik]

Hast du nicht CSS-Rollover - Teil 2 gelesen?

mfg Maik

 

[Pielo]

Ja sorry hab ich leider zu spät gelesen

Danke auch für die gute Anleitung, aber irgendwas mach ich faltsch, weil ich zwar den hover-Efekt habe aber leider nicht den active-Efekt (den hover will ich ja eigendlich garnicht haben, aber ich hab jetzt alles durch probiert, aber ich bekomm es nicht hin.

hier mal das was ich gemacht hab

css:

/* #link_1 (mich) */
ul#nav1 li a#mich:link, ul#nav1 li a#mich:visited {
background-image:url(Page_neu/mich-off.gif); /* Pfad zum Hintergrundbild */
}

/* 
ul#nav1 li a#mich:hover {
background-image:url(Page_neu/mich-on.gif); /* Hintergrundbild gedrückt */
}
*/

ul#nav1 li#current a#mich {
background-image:url(Page_neu/mich-on.gif); /* Hintergrundbild gedrückt */
}

html:

  <ul id="nav1">
    <li id="current"><a href="mich.html" id="mich"><span>link 1</span></a></li>
  </ul>

Hab auch schon probiert stat hover active zu schreiben ging aber irgendwie auch nicht.

Ich hab jetzt nur jeweils ein Link hier her geschrieben (steht ja eh überall das selbe) weil sonnst das alles zu viel gewurden wär.

Wär cool wenn du mir mal mein Fehler zeigen könntest.

Danke für deine hilfe.

 

[Maik]

Tut mir leid, aber das Stylesheet funktioniert bei mir einwandfrei.

mfg Maik

 

[Pielo]

Tut mir leid, aber das Stylesheet funktioniert bei mir einwandfrei.

mfg Maik

Ui das ist ja komisch

Kann ich also davon dann ausgehn das der Code richtig ist?! Aber woran könnte es dann noch liegen?

Aber der active-Befehl muß nirgens stehn, weil du den nicht verwendest (hat mich bissl gewundert)

Jetzt mal nur um sicher zu gehn, der active-Befehl ist doch der der ausgeführt wird wenn man gerade auf den Link klickt? Weil ich den bei deiner Beispieldatei auch nicht hab!!

 

[Maik]

Wenn du die :active-Pseudoklasse integrieren möchtest, die ihre Gültigkeit während gedrückter Maustaste besitzt:

ul#nav1 li a#mich:active, ul#nav1 li#current a#mich {
background-image:url(Page_neu/mich-on.gif); /* Hintergrundbild gedrückt */
}

Dass das Stylesheet bei dir ansonsten nicht funktioniert, liegt an der Art und Weise deines auskommentierten :hover-Selektors, der wiederum in seinem Regelblock einen Kommentar enthält, und somit von den Browsern die nachfolgenden Regeln im Stylesheet nicht interpretiert werden:

/* 
ul#nav1 li a#mich:hover {
background-image:url(Page_neu/mich-on.gif); /* Hintergrundbild gedrückt */
}
*/

So funktioniert das Stylesheet trotz auskommentierten :hover-Selektor weiterhin einwandfrei:

/*
ul#nav1 li a#mich:hover {
background-image:url(Page_neu/mich-on.gif);
}
*/

mfg Maik

 

[Pielo]

Ja den hatte ich ausgebelndet weil ich ja den hover-Befehl nicht brauch.

Habe es jetzt so gemacht,

[ul#nav1 li a#mich:link, ul#nav1 li a#mich:visited {
background-image:url(Page_neu/mich-off.gif); 
}
 ul#nav1 li a#mich:hover {
background-image:url(Page_neu/mich-off.gif); 
}
ul#nav1 li a#mich:active, ul#nav1 li#current a#mich {
background-image:url(Page_neu/mich-on.gif); 
}

aber der active-Befehl will einfach nicht funktionieren.

Ich hab mal meine Datei angehangen, vielleicht findest du ja ein andern Fehler. Vorrausgesetzt du hast noch bock dich mit mir rumzuärgern. :-(

 

[Maik]

Ich kann mich da nur wiederholen, dass das Stylesheet fehlerfrei funktioniert.

Und um dies zu überprüfen, entferne einfach mal den Selektor ul#nav1 li#current a#mich, damit die :active-Pseudoklasse überhaupt zum Zuge kommen kann.

mfg Maik