menu kleur

A.Bijlsma · 18 December 2010

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 · 18 December 2010

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 · 18 December 2010

Dat is teveel gerommel in het script.

Alsnog bedankt, maar weet iemand anders het?

K.Rens · 18 December 2010

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 · 18 December 2010

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

Superior · 18 December 2010

Hier heb je wat aan denk ik

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

ILuvBikinies · 18 December 2010

Superior, bedankt! Kan ik zelfs ook nog gebruiken.

+1 Thanks for Superior.

A.Bijlsma · 18 December 2010

Geprobeerd maar werkt niet.

Superior · 18 December 2010

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

A.Bijlsma · 18 December 2010

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 · 19 December 2010

li a.active:link,

Lijn 90

li a.active#menu,

A.Bijlsma · 19 December 2010

Wat gebeurd er als ik dat doe superior?

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

DNS update Directadmin

PC probleem

Let op Vimexx klanten

wie kan mij helpen met Security aanscherpen voor nmijn website

Ik ben op zoek naar een goede hosting

App bouwer gezocht

4G met USB Dongle - windows 11 Chrome of Firefox - browser probleem

Hosting en websites op maat

Xenforo buckaroo plugin

300+ Nieuwe domeinnamen Maart 2024

Actieve crime

menu kleur

Participate now!

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Het Belang van Standaardisatie

De Revolutionaire Rol van IT in Alzheimeronderzoek

Functioneel ontwerp

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

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

Delen