Hallo,
Ich habe ein Menu vorbereitet für eine Webseite. Es ist jeweils in den einzelnen Seiten (.php) als menu.php eingebettet. Es handelt sich um eine horizontale Liste. Es funktioniert auch alles so wie es sollte.
Mein Problem ist folgendes. Es sollte doch möglich sein den jeweiligen Menupunkt auf der Seite wo man sich befindet einzufärben. Es handelt sich dabei doch um das Thema das ein aktiver Link die Farbe beibehalten soll? Ich habe mich schon durch diverse Codes gegoogelt aber es ist mir nicht gelungen etwas entsprechendes umzusetzen.
menu.php Code:
CSS Code:
index.php Code:
Ich habe ein Menu vorbereitet für eine Webseite. Es ist jeweils in den einzelnen Seiten (.php) als menu.php eingebettet. Es handelt sich um eine horizontale Liste. Es funktioniert auch alles so wie es sollte.
Mein Problem ist folgendes. Es sollte doch möglich sein den jeweiligen Menupunkt auf der Seite wo man sich befindet einzufärben. Es handelt sich dabei doch um das Thema das ein aktiver Link die Farbe beibehalten soll? Ich habe mich schon durch diverse Codes gegoogelt aber es ist mir nicht gelungen etwas entsprechendes umzusetzen.
menu.php Code:
Code:
<?php if (!isset($hmenu)) $hmenu=""; function href ($seite, $menu, $hmenu) { if ($menu != $seite) echo "href='$seite.php'"; if ($hmenu== $seite) echo ' class="akt"'; } ?> <div id="nav"> <ul> <a <?php if ($menu != "start") {echo 'href="../"';} else {echo "class='akt'";} ?>>Home</a> <a <?php href("news",$menu,$hmenu) ?>>News</a> <a <?php href("wellness",$menu,$hmenu) ?>>Wellness</a> <a <?php href("massage",$menu,$hmenu) ?>>Massage</a> <a <?php href("gutschein",$menu,$hmenu) ?>>Gutscheine</a> <a <?php href("preise",$menu,$hmenu) ?>>Preise</a> <a <?php href("kontakt",$menu,$hmenu) ?>>Kontakt</a> </ul>
Code:
body { SCROLLBAR-FACE-COLOR: #0000CC; SCROLLBAR-HIGHLIGHT-COLOR: #ffff99; SCROLLBAR-SHADOW-COLOR: #ffff99; SCROLLBAR-3DLIGHT-COLOR: #CC6600; SCROLLBAR-ARROW-COLOR: #ffff99; SCROLLBAR-TRACK-COLOR: #ffff99; SCROLLBAR-DARKSHADOW-COLOR: #CC6600; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #333333; padding:0px 0px; margin:0px 0px; } html, body { width:100%; height:100%; margin:0; padding:0; } a { color: #FFFF99; text-decoration: none; } a:visited { color:#FFFF99; text-decoration: none; } a:hover { color: #666666; font-weight: normal; font-size: 10px; text-decoration: none; } a:active { color:#666666; text-decoration: none; font-size: 10px; font-weight: normal; background-color: #FFFF99; } #nav {position:center;} #nav ul {margin:0; padding:0; list-style-type:none;} #nav li {margin:0; no-repeat left center; } #nav li a {display:block;} #nav a img {border:none; background:#FFFF99;} #nav p {text-align:center;} h1 { font-size: 14px; color: #333333; text-transform:uppercase; letter-spacing: 10px; padding:0px 0px; margin:0px } img.download {vertical-align: middle;} h2 { font-size:12px; color: #333333; font-weight: normal; text-transform: uppercase; letter-spacing: 8px; line-height: 14px; padding-top: 20px; padding-bottom: 20px; margin: 0px 0px; } .banner img {padding:0px 0px;} /* --------------left und right navigavtion------------- */ .leftbg { background-image: url(../images/left_bg_4.png); background-repeat: repeat-y; } .rightbg { background-image: url(../images/right_bg_4.png); background-repeat: repeat-y; } /* -----------------Inhalt--------------------- */ #content{ width: 640px; padding-bottom: 20px; text-align: left; border-bottom: 1px; font-family: Arial, Helvetica, sans-serif; font-variant: normal; color: #333333; } #image { border: 1px solid #333333; padding: 2px; } #backgroundimage{ background-image: url(../images/Oase1_background.png); background-repeat: no-repeat; } p { padding: 0px; margin:0px; } .spalte_links{ width: 350px; text-align: justify; margin-left: 0px; } .spalte_rechts{ float: right; width: 350px; text-align: justify; padding-left: 30px; margin-right: 0px; } pre{ font-size: 12px; padding: 0px 0px; margin:0px; } .schrift{ font-size: 12px; color: #333333; text-transform:none; padding:0px 0px; margin:0px; } /* ----------------footer---------------------- */ .footer { width: 800px; padding:0px; text-align: left; } /* ----------------menu---------------------- */ .menu { font-size: 10px; text-align: center; text-transform: uppercase; letter-spacing: 5px; width: 640px; background-color: #004C93; font-family: Arial, Helvetica, sans-serif; padding-top: 2px; padding-bottom: 2px; color: #FFFF99; } .link { width: 80%; font-size: 10px; padding-top:3px; text-align: right; text-transform: uppercase; letter-spacing: 2px; padding-right: 2px; padding-bottom: 3px; padding-left: 2px; color: #333333; } /* ---------------contactfield---------------- */ input, textarea, select { border: 1px solid #333333; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; } #backgroundimage2 { background-image: url(../images/Oase1_background.png); background-repeat: repeat-y; } .schrift2 { font-size: 12px; color: #004C93; text-transform:none; padding:0px 0px; margin:0px; font-weight: bold; }
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" xml:lang="en" lang="en" > <head> <title>Femina Vital Wabern</title> <meta name="siteinfo" content="feminavital.ch/robots.txt"> <link rel="icon" type="image/ico" href="http://www.feminavital.ch/favicon.ico"> <link rel="shortcut icon" href="http://www.feminavital.ch/favicon.ico"> <link type="text/css" href="css/screen.css" rel="stylesheet" media="screen" /> <link type="text/css" href="css/noprint.css" rel="stylesheet" media="print" /> <script type="text/javascript"> <!-- window.onload=show; function show(id) { var d = document.getElementById(id); for (var i = 1; i<=10; i++) { if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';} } if (d) {d.style.display='block';} } //--> </script> <script language="JavaScript"><!-- var text = " ----- feminavital.ch ----- "; var ausgabe =""; var verz = 80; var z; function fun() { for (var i = 0; i <= text.length; i++) { z = Math.round(Math.random()); if (z == 0) ausgabe += text.charAt(i); } window.status = ausgabe; ausgabe = "" ; verz += 10; id = setTimeout("fun()" , verz); if (verz >= 500) { clearTimeout(id); window.status = text; } } //--></script> <style type="text/css"> <!-- body { background-color: #ffcc33; } --> </style></head> <body onLoad="fun()"> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> <tr bgcolor="#FFFF99"> <td width="130" height="150" background="images/left_bg_4.png" class="banner"><?php include 'includes/header.php'; ?> </td> <td width="640" class="banner"> </td> <td width="130" background="images/right_bg_4.png" class="banner"> </td> </tr> </table> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="130" valign="top" background="images/left_bg_4.png"></td> <td height="10" align="center" bgcolor="#FFFF99" > <div align="center"> <?php include 'includes/menu.php'; ?> </div> </p> </div></td> <td width="130" valign="top" background="images/right_bg_4.png"></td> </tr> </table> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0" style="height:80%;"> <tr> <td width="130" valign="top" background="images/left_bg_5.png" class="leftbg"> <div id="leftnoprint"> <?php include 'includes/left.php'; ?> </div></td> <td width="680" valign="top" bgcolor="#FFFF99"> <?php if (isset($_GET['page'])) $page = $_GET['page']; else $page = 'introtext'; $fn = './content/'.$page; if (is_file($fn.'.html')) { include($fn.'.html'); } else if (is_file($fn.'.php')) { include($fn.'.php'); } else { print("there is no content"); } ?></td> <td width="130" valign="top" background="images/right_bg_5.png"><div id="rightnoprint"> <span class="rightbg"> <?php include 'includes/right.php'; ?> </span></div></td> </tr> </table> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> <tr bgcolor="#FFCC33"> <td width="130" valign="top" background="images/left_bg_4.png"> </td> <td width="640" valign="top" bgcolor="#FFFF99"> </td> <td width="130" valign="top" background="images/right_bg_4.png"> </td> </tr> </table> </body> </html>
Kommentar