Menu werkt niet met mouse over

Door Milo op 20-07-2009 13:26

337 views

Hallo,
Ik ben bezig met het maken van een nieuwe lay-out alleen nu heb ik een probleem.
Ik heb bij mijn menu de volgende link:


	$aquery = mysql_query("SELECT * FROM z_links ORDER BY id ASC");
	echo '<div class="menu-balk">';
		while($link = mysql_fetch_array($aquery))
		{
		echo '<a href="?id='.$link['id'].'&pag_typ='.$link['pag_typ'].'&titel='.$link['titel'].'" class="menu-link">'.$link['titel'].'</a>';
		}
	echo '</div>';

en de volgende css:


.menu-balk {
	width: 760px;
	height: 24px;
	
	border-top: 2px solid #FFFFFF;
	border-left: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	
	background-color: #000000;
}
a.menu-link :link, :active, :visited {
	height: 24px;
	float: left;

	padding: 6px;
	
	border-right: 2px;
	border-right-style: solid;
	border-right-color: #FFFFFF;
	
	font-family: Verdana;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	
	text-decoration: none;
}
a.menu-link :hover {
	height: 24px;
	float: left;

	padding: 6px;
	
	border-right: 2px;
	border-right-style: solid;
	border-right-color: #FFFFFF;
	
	font-family: Verdana;
	font-size: 11px;
	font-weight: bold;
	color: #27CAFC;
	
	text-decoration: none;
}

alleen de kleur veranderd dus niet... en ik had hem express een class toegewezen omdat dat dan makkelijker is om de rest (in teksten) een normale link kan opmaken..
weten jullie waarom hij het niet doet..

online: http://after-party.nl/test/

SORRIE ik kwam er net achter dat ik een spatie had en die moet niet.. ben pas sinds kort bezig met css zie je.

Mitchell

20-07-2009 13:39

a.menu-link:hover

Zonder spatie. En als je die elementen gaat scheiden, moet je de volledige naam gebruiken en de psuedo classes moeten er hier ook aan vast zitten.


a.menu-link:link, a.menu-link:active, a.menu-link:visited

A Leeuwenburgh

21-07-2009 13:51

Je kan het active element er ook nog uithalen en appart zetten en dan ook die oranje kleur meegeven of voegen bij het hover gedeelte.

Dan ziet die persoon ook echt aan de kleur van de link dat hij op die pagina is. Alleen het active effect gaat in html vaak snel weer verloren. Dus als je het echt goed wil doen doe je het met PHP.

De code wordt dan:

<?php
$aquery = mysql_query("SELECT * FROM z_links ORDER BY id ASC");
echo '<div class="menu-balk">';
while($link = mysql_fetch_array($aquery))
{
if ($link['titel'] == $_GET['titel']) {
echo '<a href="?id='.$link['id'].'&pag_typ='.$link['pag_typ'].'&titel='.$link['titel'].'" class="menu-linkactief">'.$link['titel'].'</a>';
}
else {
echo '<a href="?id='.$link['id'].'&pag_typ='.$link['pag_typ'].'&titel='.$link['titel'].'" class="menu-link">'.$link['titel'].'</a>';
}
}
echo '</div>';
?>

En dan voeg je nog de volgende css toe:


a.menu-linkactief {
    height: 24px;
    float: left;

    padding: 6px;
    
    border-right: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
    
    font-family: Verdana;
    font-size: 11px;
    font-weight: bold;
    color: #27CAFC;
    
    text-decoration: none;
}

Reageren

Inloggen om te reageren