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%;}

Meer tonen

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] Ottomaan: gratis browserspel met een echte, levende stad. Feedback gezocht!

Port Father: beta van een browsergame in Antwerpen 1931, feedback welkom

Maffia Hotel: een browsergame waarin je van lobbygast naar spil van het hotel groeit

Crime Club volledig herschreven vanaf nul

Malavita (nieuwe maffia game, van 0)

Herkent deze Notion-structuurscan echte problemen?

🚀 WE ZOEKEN TESTERS! 🚀

Luchtvaartsoftware: Hoe technologie de moderne luchtvaart verandert

[Aanbod] Stadskaart voor je browsergame: van menu naar klikbare stad, vanaf €200

[Verkoop] G4G (Gangsters 4 Gangsters): volledige broncode, nieuw gebouwd in PHP 8.3 | € 30 per domein

[TE KOOP] Malavita.be [Maffiaspel, gebaseerd op omicidio.nl, unieke code]

menu kleur

Registratie

PHP waarschuwt voor twee ernstige bugs die makkelijk uit te buiten lijken

Functioneel ontwerp

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

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

Gebruikers die dit topic bekijken