php navigatie

Status
Niet open voor verdere reacties.
T

the goose

Gebruiker
Lid geworden
15 feb 2007
Berichten
86
Hallo,

ik had gisteren een vraag gesteld op het html forum http://www.helpmij.nl/forum/showthread.php?t=448899, daar hebben ze mij goed kunnen helpen en dacht ik dat alles opgelost was en had ik het al aangevinkt als opgelost. Maar wanneer ik nu toch verdere aanpassingen wil doen kom ik nog een probleempje tegen, deels php, deels html.

Het probleem: ik wou de navigatie op zo'n manier maken dat ik dit slechts 1 keer moest aanpassen ipv op elke pagina. De oplossing bestond er in om dit te doen met een include functie. Dit werkt perfect. Nu is het echter zo dat het actieve menu een donker balkje moet krijgen.

De code:

navigation.php:
Code: 
	<ul>
		<li><a href="index.html" accesskey="1" title="">Home</a></li>
		<li><a href="praesidium.html" accesskey="5" title="">Praesidium</a></li>
		<li><a href="activiteiten.html" accesskey="3" title="">Activiteiten</a></li>
		<li><a href="fotos.html" accesskey="4" title="">Foto's</a></li>
		<li class="active"><a href="voetbal.html" accesskey="7" title="">Voetbal</a></li>
		<li><a href="skireis.html" accesskey="6" title="">Skireis</a></li>
		<li><a href="geschiedenis.html" accesskey="2" title="">Geschiedenis</a></li>
		<li><a href="nieuwsbrief.html" accesskey="9" title="">Nieuwsbrief</a></li>
		<li><a href="sponsors.html" accesskey="8" title="">Sponsors</a></li>
	</ul>

en bijvoorbeeld voetbal.php:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Studentenclub De Chips - Universiteit Antwerpen</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="menu">
	<?php include("navigation.php"); ?>
</div>
<!-- end #menu -->

<div id="header">
	<h1></h1>
	<h2></h2>
</div>

<!-- end #header -->

<div id="wrapper">
	<div id="content">
		<div id="activities">
			<div class="post">
				<h2 class="title">Voetbal</h2>
				<div class="story">
					<p>In het academiejaar 2009-2010 zullen De Chips weer de groen-wit-gele eer verdedigen in de Futsal competitie van de Antwerp Student League.</p>

					<p>We houden jullie uiteraard op de hoogte!</p>
				</div>
				<div class="meta">
				</div>
			</div>
		</div>
		<!-- end #posts -->

		<div style="clear: both;">&nbsp;</div>
	</div>
</div>
<!-- end #content -->
<div id="footer">
	<p id="legal">Copyright &copy; 2009 De Chips.</p>
	<p id="brand">www.dechips.be</p>
</div>
<!-- end #footer -->
</body>
</html>

Dit is dus het probleem in navigation.php:
Code: 
<li class="active">

Die active veranderd nu dus niet meer mee wanneer een andere menu wordt aangeklikt...

Default.css geef ik ook maar:
Code: 
body {
	margin: 0;
	padding: 0;
	background: #749865 url(images/img01.gif) repeat-x;
	font: normal small Arial, Helvetica, sans-serif;
	line-height: 1.8em;
	color: #404040;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #468259;
}

h2 {
	padding-left: 20px;
	padding-bottom: 2px;
	background: url(images/img07.gif) no-repeat left center;
	font-size: 22px;
}

h3 {
	margin-bottom: 1em;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: .9em;
	font-weight: bold;
}

p, blockquote, ul, ol {
	margin-top: 0;
}

blockquote {
	padding: 0 0 0 40px;
	background: url(images/img11.gif) no-repeat;
	font: italic small Georgia, "Times New Roman", Times, serif;
	line-height: 1.6em;
}

a {
	background: url(images/img03.gif) repeat-x left bottom;
	text-decoration: none;
	color: #468259;
}

a:hover {
	background: none;
	text-decoration: underline;
}

/* Wrapper */

#wrapper {
	background: #FFFFFF url(images/img04.gif) repeat-x left bottom;
}

/* Menu */

#menu {
	width: 990px;
	height: 60px;
	margin: 0 auto;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: block;
	float: left;
	width: 105px;
	height: 60px;
	padding: 0 0 0 2px;
	background: url(images/img02.gif) no-repeat;
}

#menu a {
	display: block;
	width: 65;
	height: 36px;
	text-align: center;
	padding-top: 19px;
	background: none;
	letter-spacing: -1px;
	font: normal 1.15em Georgia, "Times New Roman", Times, serif;
	color: #E1E9E2;
}

#menu a:hover {
	border-bottom: 4px solid #5A7C50;
	text-decoration: none;
	color: #FFFFFF;
}

#menu .active a {
	background: #E1E9E2;
	border-bottom: 4px solid #E1E9E2;
	text-decoration: none;
	color: #749865;
}

/* Header */

#header {
	width: 754px;
	height: 247px;
	margin: 0 auto;
	padding: 13px 0 0 0;
}

#header h1 {
	float: left;
	width: 104px;
	height: 110px;
	padding: 104px 100px 0 20px;
	background: url(images/img05.jpg) no-repeat;
	line-height: 32px;
	font-size: 30px;
}

#header h2 {
	float: right;
	width: 494px;
	height: 34px;
	padding: 180px 20px 0 0;
	background: url(images/img06.jpg) no-repeat;
	text-transform: lowercase;
	text-align: right;
	letter-spacing: -1px;
	font-size: 22px;
	color: #FFFFFF;
}

/* Content */

#content {
	width: 750px;
	margin: 0 auto;
}

/* Posts */

#posts {
	float: right;
	width: 510px;
}

#posts .post {
	padding-bottom: 30px;
}

#posts .story {
	padding: 15px 20px 0 20px;
	background: url(images/img10.gif) repeat-x
}

#posts .meta {
	padding: 5px 0 0 20px;
	background: url(images/img03.gif) repeat-x;
}

#posts .meta p {
	margin: 0;
	line-height: normal;
	font-size: smaller;
}

#posts ul {
	list-style: url(images/img12.gif);
}

#posts ul li {
}

/* Links */

#links {
	float: left;
	width: 220px;
}

#links ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#links li ul {
	padding: 15px 20px 30px 20px;
	background: url(images/img10.gif) repeat-x
}

#links li li {
	padding: 3px 0;
	background: url(images/img03.gif) repeat-x left bottom;
}

#links li a {
	background: none;
}

#links li i {
	font-size: smaller;
}

/* Activity */

#activities {
	float: left;
	width: 750px;
}

#activities .post {
	padding-bottom: 30px;
}

#activities .story {
	padding: 15px 20px 0 20px;
	background: url(images/img10.gif) repeat-x
}

#activities .meta {
	padding: 5px 0 0 20px;
	background: url(images/img03.gif) repeat-x;
}

#activities .meta p {
	margin: 0;
	line-height: normal;
	font-size: smaller;
}

#activities ul {
	list-style: url(images/img12.gif);
}

#activities ul li {
}


/* Footer */

#footer {
	padding: 40px 0 60px 0;
	background: url(images/img08.gif) repeat-x;
}

#footer p {
	width: 750px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #A6C09B;
}

#footer a {
	background: none;
	font-weight: bold;
	color: #A6C09B;
}

#legal {
	margin: 0 auto;
	text-align: right;
	font-size: 12px;
}

#brand {
	margin: -35px auto 0 auto;
	padding: 10px 0 0 35px;
	letter-spacing: -1px;
	font-size: 12px;
}

/* Table */

td.helpHed { 
	border-bottom: 2px solid #739366;
	border-left: 0px;
	background: transparant;
	text-align: left;
	text-indent: 5px;
	font-family: Georgia, Times New Roman, Times, serif
	font-weight: bold;
	font-size: 11px;
	color: #404040;
}

table.sofT { 
	text-align: left;
	font-family: Georgia, Times New Roman, Times, serif
	font-weight: normal;
	font-size: 11px;
	color: #404040;
	width: 710px;
	background: transparant;
	border: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
}

table.sofT td {
	padding-bottom: 11px;
	vertical-align: top;
}

table.nieuwsbrief td {
	padding-bottom: 11px;
}

Hoe kan dit opgelost worden?

Alvast bedankt!

Groeten,
The goose
 
Laatst bewerkt:
In navigation.php heb je nu nog links staan naar html bestanden, maar uit je verhaal begrijp ik dat elke pagina voortaan doorgaat als .php en dat je in elk bestand navigation.php include.

Wat je zou kunnen doen is navigation.php wijzigen naar
PHP: 
<?php
$menu = array(
	array("index.php",1,"Home"),
	array("praesidium.php",5,"Praesidium"),
	array("activiteiten.php",3,"Activiteiten"),
	array("fotos.php",4,"Foto's"),
	array("voetbal.php",7,"Voetbal"),
	array("skireis.php",6,"Skireis"),
	array("geschiedenis.php",2,"Geschiedenis"),
	array("nieuwsbrief.php",9,"Nieuwsbrief"),
	array("sponsors.php",7,"Sponsors")
);
echo '<ul>';
foreach ($menu as $item) {
	if (preg_match("/^(.*)".$item[0]."$/",$_SERVER["SCRIPT_FILENAME"])) {
		echo '<li class="active"><a href="'.$item[0].'" accesskey="'.$item[1].'" title="">'.$item[2].'</a></li>';
	} else {
		echo '<li><a href="'.$item[0].'" accesskey="'.$item[1].'" title="">'.$item[2].'</a></li>';
	}
}
echo '</ul>';
?>
Het menu is in een array gezet en bij het doorlopen van die array wordt gekeken of de pagina die is aangevraagd (bijvoorbeeld voetbal.php) gelijk is aan de waarde van het menu-item waar de loop mee bezig is.

p.s. uitstekend dat je aan mensen met een beperking denkt door gebruik van accesskeys, maar ze staan wel vreemd door elkaar.
 
Dankje voor het snelle antwoord flitsflitsflits!

Nog een klein foutje in mijn vraag, niet echt belangrijk, maar voor de juistheid toch even vermelden.
Nu is het echter zo dat het actieve menu een donker balkje moet krijgen.
Klik om te vergroten...
Moet zijn: Menu wordt lichter weergegeven.

Inderdaad, de pagina's worden allemaal php-bestanden. Ik had enkel nog maar navigation.php gebruikt in voetbal.html (voor het testen van die include) waardoor ik dit bestand alleen .php had gemaakt. De rest volgt nog :)

De reden waarom de access keys door elkaar staan, is omdat ik de volgorde van de navigatie had veranderd en ik ben de accesskeys daarna vergeten aan te passen. Ga ik dus ook nog doen :p

Ik ga jouw oplossing zo snel mogelijk proberen!

Thx,
The goose
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan