CSS-Problem: a:active funktioniert nicht!

Na klar, sorry ;-) Hier ist der Link. Es geht insbesondere um die Produktkategorieren in der Sidebar. Heißt: Die sollen unterstrichen und pink sein, wenn man sich auf der Seite befindet!

Danke schonmal :)

wordpress löst dieses problem eigentlich indem es für aktive links eine eigene css-klasse ausgibt ;)
Template Tags/wp list pages ? WordDoku

Das sollte dir helfen ;)

Hallo Mathilda,

hab mir mal den Link angeschaut...

Wenn ich das richtig verstanden habe willst du das so haben das der Link im Ruhezustand in schwarz erscheint beim drübergehen (hover) in Pink und beim draufklicken auch in Pink bleibt mit Text unterstrichen.

Die dafür zuständigen CSS sind in deiner Style.css in:

Zeile 556


.vimeoBadge a:link, a:visited, a:active {
color: #333333;
cursor: pointer;
text-decoration: none;
}


Zeile 293


a:hover {
color: #F1116D !important;
font-height: bold;
text-decoration: underline;
}


Zeile 288 


a:visited {
color: #000000;
font-weight: bold;
text-underline: none;
}

Solltest du Firefox verwenden schau dir mal das Plugin Firebug an. Das schmeisst dir alle CSS-Befehle raus wenn du auf untersuchen gehst.

grüße

Danke für deine Hilfe. Das scheint der richtige Ansatz zu sein. Klappt aber leider immer noch nicht richtig. Entweder sind alle Links grundsätzlich pink & unterstrichen, ohne dass sie aktiv sind oder ich mit der Maus drauf bin - oder es bleibt alles schwarz und ohne Unterstreichung. Hmmmm...

Hallo,

ändere mal folgenden css ab

Zeile 556


.vimeoBadge a:link, a:visited, a:active {
color: #333333;
cursor: pointer;
text-decoration: none;
}

in

.vimeoBadge a:link, a:visited {
color: #333333;
cursor: pointer;
text-decoration: none;
}


.vimeoBadge a:active {
color: #F1116D;
cursor: pointer;
text-decoration: underline
}

sollte dann eigendlich klappen das der Link welcher besucht wird und aktiv ist in Pink unterstrichen angezeigt wird.

Da vorher der aktive Link den Farbcode #333333 angenommen hat.

grüße

Zitat von LisaMarie

( ... )
Ich möchte gern, dass Seiten, auf denen ich mich aktuell befinde, im Link andersfarbig sind und unterstrichen werden.
Das habe ich versucht, mit a:active zu lösen. Das klappt aber weder im IE noch im Firefox. ( ... )

Ich lese schon 'ne Weile mit, anscheinend gibts hier ein Missverständnis und/oder du hast was falsch verstanden. Wie JonnyBauer schon beschrieben hat, braucht man dafür ein eigene Klasse um die gerade aktive Seite auch visuell hervorzuheben.
[FONT="Courier New"]a:active[/FONT] zu nutzen macht keinen Sinn, denn die Pseudo-Klasse [FONT="Courier New"]:active[/FONT] ist nur dann relevant wenn z.B. ein onmousedown Event anliegt. Mit anderen Worten die Maustaste darf dabei nicht losgelassen werden. Ist der Link erstmal geklickt und ein Seitenwechsel angesagt, ist [FONT="Courier New"]a:active[/FONT] auch nicht mehr Aktiv

Ich hoffe, keine Verwirrung gestiftet zuhaben.

Danke für die Info. Könnte man das Problem dann irgendwie anders lösen, wenn nicht über a:active?

siehe Kommentar v JohnnyBauer: Template Tags/wp list pages ? WordDoku

.current_page_item { 
color : #f1116d;
text-decoration : underline;
font-weight : bold;
}

[COLOR=#000000][COLOR=#006600] [/COLOR][/COLOR]

Ich habe mal ein Script geschrieben, das Links auf die aktuelle Seite ersetzt. Dann steht statt des Links ein <span class="current"> um den Text, das du bequem im Stylesheet ansprechen kannst.

Der Vorteil daran: Das funktioniert auch für Besucher, die kein CSS verwerten (können).

Ich hab genau wie beschrieben dies versucht, aber es funktioniert nicht.

Der Link soll beim anklicken eingefärbt bleiben, bis man die Seite wieder verlässt. Das Problem ist aber wohl eher, dass beim anklicken die Seite komplett neu geladen wird und somit keine Links mehr aktiv sein können, ausser die Seite wäre mit Frames aufgebaut. Oder seh ich das falsch?

Suche daher nach einer Lösung, die auch funktioniert. Gibt es vielleicht ein Plugin dafür?

Mein CSS sieht so aus:

#menu {
	float: right;
	width: 790px;
	height: 64px;
	margin-top: 10px;
}


#menu ul {
	margin: 0;
	padding: 0px 0 0 20px;
	list-style: none;
	line-height: normal;
	margin-left: 30px;
}


#menu li {
	display: inline;
	text-align: center;
}


#menu a { display: block; float: left; height: 36px; padding: 18px 20px 0; text-align: center; font-size: 14px; font-weight: bold; color: #069; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }


#menu a:hover, #menu .active a { color: #e2001a; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; }


#menu ul.current_page_item li a { color: #e2001a; }


.current_page_item { color: #e2001a; }

Und Header.php:

<div id="menu">
		<ul>
			<li class="current_page_item"><a href="<?php echo get_settings('home'); ?>">Home</a></li>
			<li class="current_page_item"><a href="/angebot">Angebot</a></li>
			<li class="current_page_item"><a href="/beispiele">Beispiele</a></li>
			<li class="current_page_item"><a href="/zubehoer">Zubehör</a></li>
			<li class="current_page_item"><a href="/service">Service</a></li>
			<li class="current_page_item"><a href="/kontakt">Kontakt</a></li>
		</ul>
	</div>

was ist 'funktioniert nicht' in einem ganzen satz?
mit einzelheiten?

wie koennen alle links die css class [FONT=Courier New].current_page_item[/FONT] zur selben zeit haben?

[FONT=Courier New]'.current_page_item[/FONT]' bedeutet soviel wie 'aktive seite'

ist das menu handprogrammiert?

('normal' hat nur die seite, auf der du dich befindest, die class [FONT=Courier New].current_page_item[/FONT] ; das ist von der wordpress function fuer seiten links 'wp_list_pages()' so vorgesehen. )
http://codex.wordpress.org/Function_Reference/wp_list_pages
http://codex.wordpress.org/Function_Refer…g_of_page_items

ausserdem passiert diese kombination nie:
#menu ul.current_page_item li a { color: #e2001a; }

der 'ungeordnete list' tag 'ul' hat nie die class [FONT=Courier New]'.current_page_item[/FONT]'; die ist immer am 'li' tag.

und dieser style:

.current_page_item { color: #e2001a; }

hat hoechstwahrscheinlich auch keine auswirkung, weil das, was sichtbar ist, der link tag ist.
zugehoeriger style:

.current_page_item a { color: #e2001a; }

Es handelt sich um dieses Theme:
http://www.simplewordpressthemes.org/clean-type.html

alchymyth: Ich bin mehr der Designer und weniger der Programmierer. Kenn mich da nicht so im Detail aus. Schön, wenn Du mir die Fehler aufzeigst, aber kannst Du mir dann auch sagen, wie es richtig heissen muss? Vielen Dank.

Zitat

aber kannst Du mir dann auch sagen, wie es richtig heissen muss?

klar, aber wenn aus deinem beitrag nicht einmal hervorgeht, wie du das menu erstellt hast, ist es nicht ganz einfach, da einen anfang zu machen.

ich hab schon auf die 'wp_list_pages()' hingewiesen;
auf die ueberfluessigne, da falschen, styles, und die verbesserung des eines styles - alles zusammen sollte dir schon weiterhelfen.

und jetzt mit einem link zum theme (solange es frei downloadbar ist) geht wahrscheinlich mehr.

NB - zur zeit geht der download des themes nicht :confused:

kannst du den code der header.php hier posten?

und ein link zu deiner seite waere immer noch der beste weg, hilfe mit ccss zu bekommen.

Zitat von alchymyth

klar, aber wenn aus deinem beitrag nicht einmal hervorgeht, wie du das menu erstellt hast, ist es nicht ganz einfach, da einen anfang zu machen.

Nochmals zur Verdeutlichung: Ich habe das Theme runtergeladen (hier der richtige Link) und installliert:
http://www.freewpthemes.net/preview/cleantype/

Danach hab ich Schriften, Farben, Design im CSS verändert sowie die Links in der Menuleiste im header.php. Da die Original-Website im Wartungsmodus ist und extern nicht aufgerufen werden kann, hier eine Testseite:
http://www.fpoint.ch/wp-testseite/

Ansonsten hab ich – was mein Aktiv-Link-Problem betrifft – am Code nichts verändert, dieser wurde vom Theme-Autor so geschrieben.

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>


<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />


<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


<?php wp_head(); ?>


</head>
<body>


<div id="header">
	<div id="logo">
		<a href="<?php echo get_option('home'); ?>/"><img src="/wp-content/themes/cleantype/images/blind.gif" width="150" height="40" border="0"/></a>
		<p><?php bloginfo('description'); ?></p>
	</div>
	<!-- end #logo -->
	<div id="menu">
		<ul>
			<li class="current_page_item"><a href="<?php echo get_settings('home'); ?>">Home</a></li>
			<li class="current_page_item"><a href="/wp-testseite/angebot">Angebot</a></li>
			<li class="current_page_item"><a href="/wp-testseite/beispiele">Beispiele</a></li>
			<li class="current_page_item"><a href="/wp-testseite/zubehoer">Zubehör</a></li>
			<li class="current_page_item"><a href="/wp-testseite/service">Service</a></li>
			<li class="current_page_item"><a href="/wp-testseite/kontakt">Kontakt</a></li>
		</ul>
	</div>
		<!-- end #menu --></div><!-- end #header -->
		<div id="page">
		<div id="page-bgtop">

Zitat

verändert sowie die Links in der Menuleiste im [COLOR=#306582]header[/COLOR].php.

eigentlich sollte das menu dynamisch erstellt werden, d.h. fuer jede seite, die du im hintergrund erstellst, wird ein menue-punkt automatisch dargestellt.

wenn du aus wichtigen gruenden das per hand machen musst, ist das ein wenig aufwendiger, die 'current' class richtig zuzuordnen.
(nicht statisch, wie in deinem beispiel. auch wird das besser mit absoluten link url gehen.)

beispiel ist im original code schon in der headernavi:

<li class="page_item active<?php if (is_home()) echo ' current_page_item'; ?>"><a href="<?php echo get_option('home'); ?>/">Home</a></li>

mit der if-abfrage wird geprueft, ob der blog die entsprechende seite anzeigt, und dann wird '.current_page_item' vergeben.
http://codex.wordpress.org/Conditional_Tags

umgesetzt (unter der annahme, dass die menu-punkte alles seiten (pages) sind:

<div id="menu">
        <ul>
            <li class="class="page_item active<?php if (is_home()) echo ' current_page_item'; ?>"><a href="<?php echo get_settings('home'); ?>">Home</a></li>
            <li class="class="page_item active<?php if (is_page('Angebot')) echo ' current_page_item'; ?>"><a href="/wp-testseite/angebot">Angebot</a></li>
            <li class="class="page_item active<?php if (is_page('Beispiele')) echo ' current_page_item'; ?>""><a href="/wp-testseite/beispiele">Beispiele</a></li>
......usw..........
 </ul>
    </div>
        <!-- end #menu -->

am besten, 'vergess' das handgemachte menu; lass die wordpress function das machen - wie es auch die seitenliste in der sidebar macht.
die seiten koennen in der reihenfolge sortiert werden;
http://codex.wordpress.org/Function_Reference/wp_list_pages

<?php wp_list_pages('title_li=&sort_column=menu_order' ); ?>

dann sollte eigenlich das 'current' problem von alleine verschwinden.


edit: der style fuer 'current' sollte so sein (die zweite zeile mit :hover nur wenn fuer 'mouseover' andere farben sein sollen):

#menu ul .current_page_item  a { background-color: #123abc ; color: #e2001a; }
#menu ul .current_page_item  a:hover { background-color: #abc123 ; color: #1a00e2; }

Vielen Dank alchymyth! Jetzt funktionieren die Links, wie ich es mir vorgestellt habe. Nur noch eine Kleinigkeit: "Home" ist immer rot (MouseOver) und wird nicht mehr blau (MouseOut), wenn man eine andere Seite anklickt. Woran kann das liegen?

http://www.fpoint.ch/wp-testseite

Nochmals vielen Dank für deine ausführlichen Antworten/Hilfestellungen.

das kommt von der class .active, die der home link aus irgendeinem grund immer hat:

#menu a:hover, #menu .active a { color: #e2001a; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; }

im obigen style das hier entfernen:

, #menu .active a

hier ist der dazugehoerige abschnitt aus der header.php:

<ul>
   <li class="page_item active<?php if (is_home()) echo ' current_page_item'; ?>"><a href="<?php echo get_option('home'); ?>/">Home</a></li>
   <?php wp_list_pages('title_li=' ); ?>
  </ul>