[CSS] Actieve link wil niks doen.

Status
Niet open voor verdere reacties.

RelatedHack

Gebruiker
Lid geworden
30 mei 2006
Berichten
72
jaja,
weeral een probleem...
Ik zou graag de pagina waar ik me op bevind (de link dan in de menu) in het wit laten weergeven...maar ik heb dit al in de CSS opgegeven en toch doet die het niet :s

Onderstaande code is een stukje uit m'n CSS file...mss dat iemand de fout ziet ?

Alvast bedankt. :D
Code:
body {
	background: #690101 url('images/background.png') repeat-x;
	color: #fff;
	font-family: arial, sans-serif;
	font-size: 11px;
	text-align: center;
}
a {
	color: #fff;
	background-color: inherit;
	font-weight: bold;
	text-decoration: underline;
}
a:hover {
	text-color: #f4a310;
	background-color: inherit;
}
a:active {
	text-color: #ffffff;
}
a:visited {
	text-color: #ffffff;
 
Volgorde linken wijzigen:

A:link { text-decoration: none; color: #000000 }
A:visited { text-decoration: none; color: #990000 }
A:active { text-decoration: none; color: #0000FF }
A:hover { text-decoration: underline; color: #FF0000 }

:cool:
 
Volgorde linken wijzigen:

A:link { text-decoration: none; color: #000000 }
A:visited { text-decoration: none; color: #990000 }
A:active { text-decoration: none; color: #0000FF }
A:hover { text-decoration: underline; color: #FF0000 }

:cool:

nope , heb ze geplakt in m'n CSS-file (vervangen dus...) maar doet het nog steeds niet...
Mss dat de volledige CSS-file verdere uitleg zal geven...

Code:
 * {
	margin: 0px;
	padding: 0px;
}
body {
	background: #690101 url('images/background.png') repeat-x;
	color: #fff;
	font-family: arial, sans-serif;
	font-size: 11px;
	text-align: center;
}
a {
	color: #fff;
	background-color: inherit;
	font-weight: bold;
	text-decoration: underline;
}
A:link { 
	text-decoration: none; 
	color: #000000 
}
A:visited { 
	text-decoration: none; 
	color: #990000 
}
A:active { 
	text-decoration: none; 
	color: #0000FF 
}
A:hover { 
	text-decoration: underline; 
	color: #FF0000 
}
span {
	display: none;
}
img {
	border: none;
}
ul {
	list-style-type: none;
	text-decoration:bold;
}
li {
	list-style-type: none;
	text-decoration:bold;
}
p {
	padding: 10px 0px 11px;
	text-align: left;
	line-height: 16px;
}
.clearthis {
	margin : 0px;
	height : 1px;
	clear : both;
	float : none;
	font-size: 1px;
	line-height: 0px;
	overflow : hidden;
	visibility: hidden;
}
#body_wrapper {
	margin: 0px auto;
	width: 788px;
	background: url('images/header_bg.gif') no-repeat 0% 0%;
}
#page_header {
	margin: 0px auto;
	width: 716px;
	height: 56px;
	overflow: hidden;
	text-align: left;
}

#header_nav {
	width: 440px;
	height: 56px;
	overflow: hidden;
	float: left;
	text-align: left;
}
#header_nav ul {
	margin-top: 16px;
}
#header_nav li {
	height: 23px;
	background: url('images/menu_bullet.gif') no-repeat 0% 0%;
	float: left;
}
#header_nav li a {
	display: block;
	padding: 5px 5px 0px 38px;
	text-decoration: none;
}
#header_nav li a:hover {
	color: #ffe400;
	background-color: inherit;
}
#leftsidebar_1 {
	margin-top: 5px;
	padding-left: 36px;
	background: url('images/sidebar_top.gif') no-repeat 36px 0%;
	float: left;
	text-align: left;
}
#leftsidebar_2 {
	padding: 11px 0px;
	width: 154px;
	background: url('images/sidebar_bot.gif') no-repeat 0% 100%;
}
#leftsidebar_content {
	padding: 15px 20px 15px 25px;
	color: #f4a308;
	background: #60160a url('images/sidebar_bg.gif') repeat-y;
	font-weight: bold;
}
#leftsidebar_content a {
	color: #f4a308;
	background-color: inherit;
	text-decoration: none;
}
#leftsidebar_content a:hover {
	color: #ffffff;
	background-color: inherit;
}
#leftsidebar_content a:active {
	color: #ffffff;
	background-color: inherit;
}
#leftsidebar_content li {
	padding: 4px 0px;
}
#rightbar_content{
	margin-top: 60px;
	padding-right: 50px;
	float: right;
}
#maincontent_1 {
	margin-top: 178px;
	padding-right: 60px;
	background: url('images/main_top.gif') no-repeat 0% 0%;
	float: right;
	text-align: left;
}
#maincontent_2 {
	padding: 12px 0px;
	width: 520px;
	background: url('images/main_bot.gif') no-repeat 0% 100%;
}
#maincontent_content {
	padding: 17px 20px;
	color: #4b3001;
	background: #c9953b url('images/main_bg.gif') repeat-y 0% 0%;
	font-family: verdana, arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
#maincontent_content a {
	color: #4b3001;
	background-color: inherit;
}
#maincontent_content a:hover {
	color: #724c04;
	background-color: inherit;
}
#page_footer {
	margin: 0px auto;
	padding: 15px 0px 25px;
	width: 690px;
	text-align: left;

}
#ringoffire .box {
	padding-top: 12px;
	line-height: 22px;
}
#copyright_info {
	margin-right: 2px;
	width: 270px;
	float: right;
	line-height: 30px;
	text-align: center;
	font-weight: bold;
}
#copyright_info small b {
	padding-top: 1px;
	display: block;
	float: left;
	font-size: 15px;
}
 
a:active is niet bedoeld om een link naar de actieve pagina te stileren (zoals je volgens mij verwacht) maar om dat te doen voor een link waar de gebruiker op aan het klikken is. Zie pseudo-class selectors. Wat jij nu wil doen vereist iets programmeerwerk voor je server (bijv PHP). Met JavaScript moet het misschien óók kunnen.
 
Ik zou graag de pagina waar ik me op bevind (de link dan in de menu) in het wit laten weergeven

Zul ja dan toch per pagina moeten doen.

Zie voorbeeld:
PHP:
<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>
<title>(Type a title for your page here)</title>
<!--This page created on Friday, September 01, 2006 -->

<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">

<META name="description" content="starting with arachnophilia the html editor">
<META name="keywords" content="arachno, html, updat, email, content, starting, homepage">
<meta name="Author" content="Peter Vazed">
<META name="robots" content="index, follow">
<META name="revisit" content="7 days">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<STYLE TYPE="text/css">
<!--
 * {
	margin: 0px;
	padding: 0px;
}
body {
	background: #690101 url('images/background.png') repeat-x;
	color: #fff;
	font-family: arial, sans-serif;
	font-size: 11px;
	text-align: center;
}

A:link { 
	text-decoration: none; 
	color: #000000; 
}
A:visited { 
	color: #fff;
	background-color: inherit;
	font-weight: bold;
	text-decoration: underline;
}
A:active { 
	text-decoration: none; 
	color: #0000FF; 
}
A:hover { 
	text-decoration: underline; 
	color: #FF0000 ;
}
.huidige 
{
color: #ffffff;
background-color:#306caf;
}
span {
	display: none;
}
img {
	border: none;
}
ul {
	list-style-type: none;
	text-decoration:bold;
}
li {
	list-style-type: none;
	text-decoration:bold;
}
p {
	padding: 10px 0px 11px;
	text-align: left;
	line-height: 16px;
}
.clearthis {
	margin : 0px;
	height : 1px;
	clear : both;
	float : none;
	font-size: 1px;
	line-height: 0px;
	overflow : hidden;
	visibility: hidden;
}
#body_wrapper {
	margin: 0px auto;
	width: 788px;
	background: url('images/header_bg.gif') no-repeat 0% 0%;
}
#page_header {
	margin: 0px auto;
	width: 716px;
	height: 56px;
	overflow: hidden;
	text-align: left;
}

#header_nav {
	width: 440px;
	height: 56px;
	overflow: hidden;
	float: left;
	text-align: left;
}
#header_nav ul {
	margin-top: 16px;
}
#header_nav li {
	height: 23px;
	background: url('images/menu_bullet.gif') no-repeat 0% 0%;
	float: left;
}
#header_nav li a {
	display: block;
	padding: 5px 5px 0px 38px;
	text-decoration: none;
}
#header_nav li a:hover {
	color: #ffe400;
	background-color: inherit;
}
#leftsidebar_1 {
	margin-top: 5px;
	padding-left: 36px;
	background: url('images/sidebar_top.gif') no-repeat 36px 0%;
	float: left;
	text-align: left;
}
#leftsidebar_2 {
	padding: 11px 0px;
	width: 154px;
	background: url('images/sidebar_bot.gif') no-repeat 0% 100%;
}
#leftsidebar_content {
	padding: 15px 20px 15px 25px;
	color: #f4a308;
	background: #60160a url('images/sidebar_bg.gif') repeat-y;
	font-weight: bold;
}
#leftsidebar_content a {
	color: #f4a308;
	background-color: inherit;
	text-decoration: none;
}
#leftsidebar_content a:hover {
	color: #ffffff;
	background-color: inherit;
}
#leftsidebar_content a:active {
	color: #ffffff;
	background-color: inherit;
}
#leftsidebar_content li {
	padding: 4px 0px;
}
#rightbar_content{
	margin-top: 60px;
	padding-right: 50px;
	float: right;
}
#maincontent_1 {
	margin-top: 178px;
	padding-right: 60px;
	background: url('images/main_top.gif') no-repeat 0% 0%;
	float: right;
	text-align: left;
}
#maincontent_2 {
	padding: 12px 0px;
	width: 520px;
	background: url('images/main_bot.gif') no-repeat 0% 100%;
}
#maincontent_content {
	padding: 17px 20px;
	color: #4b3001;
	background: #c9953b url('images/main_bg.gif') repeat-y 0% 0%;
	font-family: verdana, arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
#maincontent_content a {
	color: #4b3001;
	background-color: inherit;
}
#maincontent_content a:hover {
	color: #724c04;
	background-color: inherit;
}
#page_footer {
	margin: 0px auto;
	padding: 15px 0px 25px;
	width: 690px;
	text-align: left;

}
#ringoffire .box {
	padding-top: 12px;
	line-height: 22px;
}
#copyright_info {
	margin-right: 2px;
	width: 270px;
	float: right;
	line-height: 30px;
	text-align: center;
	font-weight: bold;
}
#copyright_info small b {
	padding-top: 1px;
	display: block;
	float: left;
	font-size: 15px;
}
-->
</STYLE>

</HEAD>
<body >
<a name="link"></a>

<table  width="95%" border="1" cellspacing="0" cellpadding="3" bgcolor="#fbfbfb" bordercolor="#cecece" align="center">
	<tr>
		<!-- Row 1 Column 1 -->
		<td  valign="top">
<table  width="95%" border="1" cellspacing="0" cellpadding="3" bgcolor="#92c9c9" bordercolor="#cecece">
	<tr>
		<!-- Row 1 Column 1 -->
		<td >
		<a href="page1.html" class="huidige">	link 1</a>
		</td>
	</tr>
	<tr>
		<!-- Row 2 Column 1 -->
		<td >
	<a href="page2.html">	link	2</a>
		</td>
	</tr>
	<tr>
		<!-- Row 3 Column 1 -->
		<td >
<a href="page3.html">link	3</a>
		</td>
	</tr>
	<tr>
		<!-- Row 4 Column 1 -->
		<td >
	<a href="page4.html">	link	4</a>
		</td>
	</tr>
</table>


		</td>
		<!-- Row 1 Column 2 -->
		<td  valign="top">
		<font color=#ff0000>	page een
</font>		</td>
	</tr>
</table>

<br>
 <center><a href="#link"> naar boven </a>
</center>
<br>
<br>

</body>

</html>

.huidige aangemaakt en bij de link aanroepen.

:cool:
 
aparte class voor je link van de huidige pagina gebruiken idd. De huidige pagina kan je achterhalen dmv de url, zie deze code:
Code:
var url = new String();
url = document.location.href;
var begin = url.lastIndexOf('/');
var eind = url.lastIndexOf('.');
var pagina = url.substring(begin + 1, eind);
als je met anchors en/of php-statments werkt kan je zoeken op '?' of '=' of '#'

--Johan
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan