zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden css: current_page_item und hover in verschiedenen farben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.03.2009, 19:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2009
Beiträge: 8
frank.drebin befindet sich auf einem aufstrebenden Ast
Standard css: current_page_item und hover in verschiedenen farben

Hi,

Ich möchte, dass wenn man in der Sidebar über einen Seitenlink geht, sich die Farbe unterschiedlich zu den anderen Links ändert (hover effekt mit klassen: klappt schon). Er soll dazu aber auch, wenn man eine Seite angeklickt hat (current_page_item) die jeweilige hover Farbe annehmen.

hier der CSS - Code für den hover effekt, was ja schon top klappt:

Code:
ul.page li a.link1:hover {background-color:#376092; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
ul.page li a.link2:hover {background-color:#92d050; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
ul.page li a.link3:hover {background-color:#ddbd7d; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
ul.page li a.link4:hover {background-color:#ba8c30; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
ul.page li a.link5:hover {background-color:#ce7674; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
ul.page li a.link6:hover {background-color:#88a9d2; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
das ganze in der sidebar:

PHP-Code:
<ul class="page">
<
li><class="link1" href="xxx">Link 1</a></li>
<
li><class="link2" href="xxx">Link 3</a></li>
<
li><class="link3" href="xxx">Link 3</a></li>
<
li><class="link4" href="xxx">Link 4</a></li>
<
li><class="link5" href="xxx">Link 5</a></li>
<
li><class="link6" href="xxx">Link 6</a></li>
</
ul
Das klappt ja auch alles sehr gut! Wie baue ich da nun das current_page_item rein. Mit den jeweiligen Farben der hover klassen?

Hab schon vieles probiert, aber es klappt nicht!!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.03.2009, 21:27
i like to move it
XHTMLforum-Mitglied
 
Registriert seit: 06.03.2005
Ort: Freiburg
Beiträge: 205
^uncool befindet sich auf einem aufstrebenden Ast
Standard

Moin
also du musst eben dem aktuellen-Link, den du geändert haben willst, eine ID oder Klasse zuweisen.
Das kannst du eigendhändig auf den einzelnen Seiten machen, oder wenn du zB die navi ausgelagert hast per PHP:
PHP-Code:
<?php if($_SERVER['SCRIPT_NAME'] == 'index.php') echo 'id="aktiv"'?>
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. <<
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.03.2009, 22:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2009
Beiträge: 8
frank.drebin befindet sich auf einem aufstrebenden Ast
Standard

moinmoin

ja ok, versteh ich ein bisschen, aber wie genau soll ich den von dir gegebenen code nutzen? wohin damit und was soll ich dann in style.css datei ändern?
Mit Zitat antworten
  #4 (permalink)  
Alt 18.03.2009, 22:32
i like to move it
XHTMLforum-Mitglied
 
Registriert seit: 06.03.2005
Ort: Freiburg
Beiträge: 205
^uncool befindet sich auf einem aufstrebenden Ast
Standard

Gib einfach dem Menupunkt, den du als "aktiviert" markiert haben willst auf der Seite auf der du das so haben willst, eine Id mit. Die definierst du dann genauso wie du den :hover definiert hast in deiner style.css.
Beispiel: Dein Markup sieht folgendermaßen aus:
HTML-Code:
<ul id="menu">
<li><a href="index.htm" title="">Startseite</a></li>
<li><a href="brum.htm" title="">Brum Brum</a></li>
<li><a href="didel.htm" title="">Didel di Hopsasa</a></li>
</ul>
Nun willst du auf "Brum Brum" öffnen. Bei Mosueover passiert damit irgendwas und es öffnet sich beim Klick darauf die Seite "brum.htm".
Auf dieser Seite hast du ebenfalls das Menu mit demselben Markup wie oben.
Nun gibst du aber dem Link "Brum Brum" in der Datei "brum.htm" zusätzlich eine ID mit:
HTML-Code:
<ul id="menu">
<li><a href="index.htm" title="">Startseite</a></li>
<li><a id="aktiv" href="brum.htm" title="">Brum Brum</a></li>
<li><a href="didel.htm" title="">Didel di Hopsasa</a></li>
</ul>
Das ist nur einer von mehreren Wegen, die dich zum Ziel bringen können
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. <<
Mit Zitat antworten
  #5 (permalink)  
Alt 18.03.2009, 22:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2009
Beiträge: 8
frank.drebin befindet sich auf einem aufstrebenden Ast
Standard

ich weiß net, ich glaub, du hast mich falsch verstanden!

also

es gibt, sagen wir, 6 links.

jeder einzelne link hat verschiedene hover farben, wie ich es schon hingekriegt hab.

->> jeder einzelne link soll verschiedene current_page_item farben haben (die farben wie bei hover),.. also wenn man auf einen link klilckt soll er auch die farbe annehmen wie beim hovereffekt..

und wenn du das doch so meinst, weiss ich net wie ich das hinbekommen soll, auch nicht, durch deine anleitung
Mit Zitat antworten
  #6 (permalink)  
Alt 18.03.2009, 22:57
i like to move it
XHTMLforum-Mitglied
 
Registriert seit: 06.03.2005
Ort: Freiburg
Beiträge: 205
^uncool befindet sich auf einem aufstrebenden Ast
Standard

Ok
um weitere Missverständnisse zu vermeiden:
Cascading Style Sheets { Konzepte und Grundlegendes }
Meinst du das so wie bei den Menus? (nur eben dass der aktive-Status gleich dem :hover ist, also dass dann eben beide einen blauben bg haben)

Du versucht das hinzubekommen, dass in dem Fall "Grundlagen" im Menu anders definiert wurde?
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. <<
Mit Zitat antworten
  #7 (permalink)  
Alt 18.03.2009, 23:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2009
Beiträge: 8
frank.drebin befindet sich auf einem aufstrebenden Ast
Standard

(nur eben dass der aktive-Status gleich dem :hover ist, also dass dann eben beide einen blauben bg haben)

genau das mein ich,
.. hab da schon was mit li class versucht aber das klappte auch nicht..
Mit Zitat antworten
  #8 (permalink)  
Alt 18.03.2009, 23:11
i like to move it
XHTMLforum-Mitglied
 
Registriert seit: 06.03.2005
Ort: Freiburg
Beiträge: 205
^uncool befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von frank.drebin Beitrag anzeigen
.. hab da schon was mit li class versucht aber das klappte auch nicht..
Zeig mal her, müsste eigentlich klappen, wenn du das für die Links definierst, sprich: .klasse a
Eventuell benötigst du dann noch ein !important
Code:
.klasse a {
background: #000 !important;
color: #F00 !important
}
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. <<
Mit Zitat antworten
  #9 (permalink)  
Alt 18.03.2009, 23:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2009
Beiträge: 8
frank.drebin befindet sich auf einem aufstrebenden Ast
Standard

ich hatte es so probiert

Code:
ul.page li a.link1:hover {background-color:#376092; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}

ul.page li a.link2:current_page_item {background-color:#376092; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
PHP-Code:
<ul class="page">
<
li class="link2"><class="link1" href="xxx">Link 1</a></li>
</
ul
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 18.03.2009, 23:49
i like to move it
XHTMLforum-Mitglied
 
Registriert seit: 06.03.2005
Ort: Freiburg
Beiträge: 205
^uncool befindet sich auf einem aufstrebenden Ast
Standard

Woher hast du denn das mit dem current_page_item?
:hover ist eine Pseudoklasse, mehr dazu hier.
Dann bringt es nichts dem Link1 die Klasse Link2 zuzuweisen, das macht keinen Sinn in dem Zusammenhang.
Ehrlich gesagt weiß ich gerade nicht, wie ich es dir noch erklären könnte...

Bau das mal bei dir ein und schau man an wie es aussieht:

HTML-Code:
<ul class="page">
<li><a class="link1" id="aktiv" href="xxx">Link 1</a></li>
<li><a class="link2" href="xxx">Link 3</a></li>
<li><a class="link3" href="xxx">Link 3</a></li>
<li><a class="link4" href="xxx">Link 4</a></li>
<li><a class="link5" href="xxx">Link 5</a></li>
<li><a class="link6" href="xxx">Link 6</a></li>
</ul>
Code:
ul.page li a.link1:hover,#aktiv {background-color:#376092; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
ul.page li a.link2:hover,#aktiv {background-color:#92d050; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
ul.page li a.link3:hover,#aktiv {background-color:#ddbd7d; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
ul.page li a.link4:hover,#aktiv {background-color:#ba8c30; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
ul.page li a.link5:hover,#aktiv {background-color:#ce7674; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
ul.page li a.link6:hover,#aktiv {background-color:#88a9d2; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. <<
Mit Zitat antworten
Sponsored Links
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
Verschiedene Hintergrundfarben bei verschiedenen Seiten nur mit CSS möglich? Andimau CSS 2 07.07.2011 15:19
Div Orientierung Leonidus CSS 22 30.05.2007 18:05
css tooltip hover problem Deude CSS 2 15.05.2005 18:49
CSS: hover bei Links RayBan CSS 2 05.11.2004 23:26
Links in verschiedenen Farben mika CSS 2 29.04.2004 14:02


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