menu kleur

A.Bijlsma

Beste leden,

Ik zit met een probleem en weet niet hoe ik het moet oplossen.

Als je naar de site van me gaat: http://www.demo.shopgotyou.be/index.php

Dan zie je boven aan de menu.

Dan zie je ook dat Home een andere kleur dan de rest heeft.

Maar als je op lay-outs klikt dan blijft home nog steeds dezelfde kleur.

Hoe los ik dat op?

Hier is het stukje script van de menu:

PHP

<li><a href="index.php" class="active">Home</a></li>
  {if $menu_items}
  	{foreach from=$menu_items item=item}
  		{if $item.page_id}
  <li><a href="view_page.php?id={$item.page_id}">{$item.page_title|escape|stripslashes}</a></li>
  		{elseif $item.cat_id}
  <li><a href="view_category.php?id={$item.cat_id}">{$item.cat_title|escape|stripslashes}</a></li>
  		{/if}
  	{/foreach}
  {/if}

J.Rijdes

De class van home staat active.
Dit staat die dan vooraltijd denk ik,,

Ik zou niet weten hoe je het moet oplossen.
Want zo ervaren ben ik nog niet met php.
Misschien voor elke pagina apart menu, en dan welke pagina class="active" zetten.
Ik zou het anders ook niet weten.

A.Bijlsma

Dat is teveel gerommel in het script.

Alsnog bedankt, maar weet iemand anders het?

K.Rens

De beste manier is gewoon om in het script dat het menu maakt, kijken op welke pagina men zit en dan de class te verplaatsen.

Wat ook kan is menu.a:active {
gebruiken en daar de kleuren opzetten, maar moet je wel wat experimenteren hoe het goed komt.

A.Bijlsma

Hoe moet ik het nou juist doen met dat menu.a:active {?

Superior

Hier heb je wat aan denk ik

http://www.sceneone.nl/navigatie/a.php

ILuvBikinies

Superior, bedankt! Kan ik zelfs ook nog gebruiken.

+1 Thanks for Superior.

A.Bijlsma

Geprobeerd maar werkt niet.

Superior

Vreemd, kan je laten zien wat je momenteel aan CSS hebt voor dat menu ?

A.Bijlsma

Hier mijn css:

PHP

/* ## Algemeen  ## */
* {
	margin: 0;
	padding: 0;
}


html, body {
	height: 100%;
}


body {
	width: 100%;
	font: 11px 'Arial';
	background: #fff url('http://demo.shopgotyou.be/img/bg.png') repeat-x top left;
}


a img {
	border: 0;
}


.clear {
	clear: both;
}


/* ## Content ##  */
div#content {
	width: 950px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -234px; /* the bottom margin is the negative value of the footer's height */
}


	div#push {
		height: 234px;
	}


	div#top {
		width: 950px;
		clear: both;
		padding: 20px 0 0;
	}


		div#top h1 {
			width: 460px;
			height: 92px;
			float: left;
			background: url('http://demo.shopgotyou.be/img/logo.png') no-repeat top left;
			text-indent: -10000px;
		}


		div#top a.ad_468:link, div#top a.ad_468:active, div#top a.ad_468:visited {
			display: block;
			float: right;
			width: 468px;
			height: 60px;
			margin: 10px 0 0;
			background: url('http://demo.shopgotyou.be/img/ad_468.png') no-repeat top left;
		}




	div#menu {
		width: 950px;
		height: 45px;
		clear: both;
	}


		div#menu ul {
			float: left;
			list-style-type: none;
		}
			
			div#menu li {
				height: 45px;
				float: left;
			}
			
				div#menu li a:link, div#menu li a:active, div#menu li a:visited {
					display: block;
					height: 30px;
					float: left;
					font: bold 11px 'Arial';
					color: #fff;
					letter-spacing: 2px;
					text-decoration: none;
					padding: 15px 10px 0 10px;
					margin: 0 6px;
				}
				
				div#menu li a:hover, div#menu li a.active:link, div#menu li a.active:active, div#menu li a.active:visited {
					background: #2f2b60;
				}
		
		div#language {
			float: right;
		}
		
			div#language a:link, div#language a:active, div#language a:visited {
				width: 24px;
				height: 19px;
				display: block;
				float: left;
				text-indent: -10000px;
				margin: 14px 8px 0;
			}
			
			div#language a#nl:link, div#language a#nl:active, div#language a#nl:visited {
				background: url('http://demo.shopgotyou.be/img/flag_nl.png') no-repeat top left;
			}
			
			div#language a#nl:hover, div#language a#nla:link, div#language a#nla:active, div#language a#nla:visited  {
				background: url('http://demo.shopgotyou.be/img/flag_nl.png') no-repeat bottom left;
			}
			
			div#language a#be:link, div#language a#be:active, div#language a#be:visited {
				background: url('http://demo.shopgotyou.be/img/flag_be.png') no-repeat top left;
			}
			
			div#language a#be:hover, div#language a#bea:link, div#language a#bea:active, div#language a#bea:visited  {
				background: url('http://demo.shopgotyou.be/img/flag_be.png') no-repeat bottom left;
			}
			
			div#language a#eu:link, div#language a#eu:active, div#language a#eu:visited {
				background: url('http://demo.shopgotyou.be/img/flag_eu.png') no-repeat top left;
			}
			
			div#language a#eu:hover, div#language a#eua:link, div#language a#eua:active, div#language a#eua:visited {
				background: url('http://demo.shopgotyou.be/img/flag_eu.png') no-repeat bottom left;
			}
			
			div#language a#us:link, div#language a#us:active, div#language a#us:visited {
				background: url('http://demo.shopgotyou.be/img/flag_us.png') no-repeat top left;
			}
			
			div#language a#us:hover, div#language a#usa:link, div#language a#usa:active, div#language a#usa:visited {
				background: url('http://demo.shopgotyou.be/img/flag_us.png') no-repeat bottom left;
			}
		
	div#aanraders {
		width: 950px;
		height: 171px;
		padding: 20px 0 0;
	}


		div#aanraders h2 {
			width: 950px;
			padding: 0 0 10px;
			font: bold 15px 'Arial';
			color: #fff;
			letter-spacing: 2px;
		}
		
		div.aanraders_box {
			width: 316px;
			height: 102px;
			float: left;
		}
		
		div.aanraders_box_50 {
			width: 316px;
			height: 102px;
			margin: -8px 0 0;
			float: left;
		}
		
			div.aanraders_box_img {
				float: left;
			}
			
				div.aanraders_box_img img {
					position: relative;
					z-index: 0;
					border: 1px solid #0f0b4b;
					margin: -22px 0 0 10px;
				}
				
				div.aanraders_box_img span.discount_20 {
					display: block;
					position: relative;
					z-index: 1;
					width: 32px;
					height: 32px;
					background: url('http://demo.shopgotyou.be/img/discount_20.png') no-repeat top left;
				}
				
				div.aanraders_box_img span.discount_50 {
					display: block;
					position: relative;
					z-index: 1;
					width: 46px;
					height: 40px;
					background: url('http://demo.shopgotyou.be/img/discount_50.png') no-repeat top left;
				}
				
				div.aanraders_box_img span.discount_10 {
					display: block;
					position: relative;
					z-index: 1;
					width: 32px;
					height: 32px;
					background: url('http://demo.shopgotyou.be/img/discount_10.png') no-repeat top left;
				}
		
			div.aanraders_box_text {
				float: left;
				font: 11px/18px 'Arial';
				color: #fff;
				letter-spacing: 2px;
				width: 160px;
				padding: 15px 0 0 20px;
			}
			
			div.aanraders_box_50 div.aanraders_box_text {
				padding: 23px 0 0 20px;
			}
			
				div.aanraders_box_text p {
					padding: 0 0 10px;
				}
			
				div.aanraders_box_text p.price {
					font: bold 18px 'Arial';
					color: #fff;
				}
	
	div#content_mid {
		width: 950px;
		padding: 20px 0;
	}
	
		div#content_mid h2 {
			font: bold 16px 'Arial';
			color: #0d094a;
			padding: 0 0 5px;
		}
	
		div#content_mid p.textp {
			font: 11px/18px 'Arial';
			letter-spacing: 2px;
			padding: 0 0 30px;
			color: #0d094a;
		}
		
		div.content_box {
			width: 424px;
			float: left;
			margin: 0 20px 40px;
			background: url('http://demo.shopgotyou.be/img/content_box.png') repeat-y top left;
		}
		
			div.content_box_t {
				width: 424px;
				padding: 4px 0 0;
				background: url('http://demo.shopgotyou.be/img/content_box_t.png') no-repeat top left;
			}
		
			div.content_box_b {
				width: 424px;
				padding: 0 0 4px;
				background: url('http://demo.shopgotyou.be/img/content_box_b.png') no-repeat bottom right;
				clear:both;
			}
			
			div.content_box_img {
				float: left;
				padding: 5px 10px 0 5px;
			}
			
				div.content_box_img img {
					position: relative;
					z-index: 0;
					border: 1px solid #cfcfcf;
					margin: -22px 0 0 10px;
				}
				
				div.content_box_img span.discount_20 {
					display: block;
					position: relative;
					z-index: 1;
					width: 32px;
					height: 32px;
					background: url('http://demo.shopgotyou.be/img/discount_20.png') no-repeat top left;
				}
				
				div.content_box_img span.discount_50 {
					display: block;
					position: relative;
					z-index: 1;
					width: 46px;
					height: 40px;
					background: url('http://demo.shopgotyou.be/img/discount_50.png') no-repeat top left;
				}
				
				div.content_box_img span.discount_10 {
					display: block;
					position: relative;
					z-index: 1;
					width: 32px;
					height: 32px;
					background: url('http://demo.shopgotyou.be/img/discount_10.png') no-repeat top left;
				}
			
			div.content_box_text {
				width: 280px;
				float: left;
				padding: 10px 5px 5px 10px;
			}
			
				div.content_box_text span.price {
					float: right;
					padding: 5px 5px 0 0;
					font: 11px 'Arial';
					letter-spacing: 1px !important;
					color: #0d094a;
				}
			
				div.content_box_text p {
					font: 11px/18px 'Arial';
					letter-spacing: 1px !important;
					color: #0d094a;
					padding: 0 0 18px;
				}
				
					div.content_box_text p a:link, div.content_box_text p a:active, div.content_box_text p a:visited {
						font: bold 11px 'Arial';
						color: #0d094a;
						text-decoration: none;
					}
					
					div.content_box_text p a:hover {
						text-decoration: underline;
					}
					
					div.content_box_text p a.download:link, div.content_box_text p a.download:active, div.content_box_text p a.download:visited {
						display: block;
						width: 68px;
						height: 20px;
						float: right;
						margin: 0 10px 0 0;
						padding: 5px 0 0 25px;
						background: url('http://demo.shopgotyou.be/img/a_download.png') no-repeat top left;
					}
					
					div.content_box_text p a.moreinfo:link, div.content_box_text p a.moreinfo:active, div.content_box_text p a.moreinfo:visited {
						display: block;
						width: 133px;
						height: 20px;
						float: right;
						padding: 5px 0 0 25px;
						background: url('http://demo.shopgotyou.be/img/a_moreinfo.png') no-repeat top left;
					}
					
	
			
div#footer {
	width: 100%;
	height: 234px;
	background: url('http://demo.shopgotyou.be/img/footer.png') repeat-x top left;
}


	div#mid_footer {
		width: 996px;
		height: 152px;
		margin: 0 auto;
	}
	
		div.mid_footer_box {
			display: inline;
			width: 162px;
			height: 152px;
			float: left;
			margin: 0 85px;
		}
		
			div.mid_footer_box h2 {
				width: 162px;
				text-align: center;
				font: bold 15px 'Arial';
				color: #fff;
				text-transform: uppercase;
				padding: 18px 0 8px;
			}
			
			div.mid_footer_box form span {
				display: block;
				width: 162px;
				height: 23px;
				margin: 0 0 6px;
				background: url('http://demo.shopgotyou.be/img/footer_input.png') no-repeat top left;
			}
			
			
			div.mid_footer_box input {
				width: 132px;
				height: 23px;
				background: none;
				border: 0;
				font: 11px/22px 'Arial';
				letter-spacing: 1px;
				padding: 0 0 0 30px;
				text-align: left;
				color: #fff;
			}
			
				div.mid_footer_box input#username {
					background: url('http://demo.shopgotyou.be/img/icon_username.png') no-repeat 10px 4px;
				}
			
				div.mid_footer_box input#password {
					background: url('http://demo.shopgotyou.be/img/icon_password.png') no-repeat 10px 4px;
				}
			
				div.mid_footer_box input#email {
					background: url('http://demo.shopgotyou.be/img/icon_email.png') no-repeat 9px 6px;
				}
			
				div.mid_footer_box input#keyword {
					background: url('http://demo.shopgotyou.be/img/icon_keyword.png') no-repeat 10px 5px;
				}
			
				div.mid_footer_box input.submit {
					background: url('http://demo.shopgotyou.be/img/icon_submit.png') no-repeat 10px 5px;
				}
	
	div#low_footer {
		width: 950px;
		height: 64px;
		padding: 18px 0 0;
		margin: 0 auto;
	}


		#low_footer p.l {
			float: left;
			font: 11px/18px 'Arial';
			letter-spacing: 3px;
			color: #0d094a;
		}
		
			#low_footer p.l span {
				color: #9997b5;
			}
			
				#low_footer p.l span a:link, #low_footer p.l span a:active, #low_footer p.l span a:visited {
					color: #9997b5;
					text-decoration: none;
				}
				
				#low_footer p.l span a:hover {
					text-decoration: underline;
				}
		
		#low_footer p.r {
			font: 11px/18px 'Arial';
			float: right;
			letter-spacing: 2px;
		}
			
			#low_footer p.r img {
				vertical-align: middle;
			}


.w80 {width: 80%;}

Toon Meer

Superior

li a.active:link,

Lijn 90

li a.active#menu,

A.Bijlsma

Wat gebeurd er als ik dat doe superior?

Nieuwe reactie samengevoegd met originele reactie op 19.12.10 00:34:14:
Geprobeerd werkt niet.

ICTscripters

Dé plek voor IT

Dé plek voor IT

Beta-testers gezocht voor Crypto-oefenplatform

Na 15 jaar terug van weggeweest: iCriminals.nl is terug (BETA)!

Developer Gezocht

Op zoek naar de legends

[FREE] WeFact Hosting module

Help testers nodig voor android app Urgent

Versio vervanger

Afspraken systeem met planbeperking

321 Nieuwe Domeinnamen December 2025

Meerdere mafia game template te koop

Van een pixelige afbeelding naar een strakke, moderne website

menu kleur

Participate now!

Fijne feestdagen

Kritieke update voor Really Simple Security-plug-in

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2