Hallo Forum,
vor längerer Zeit hatte ich schon mal das Problem, die aktive Page als aktiv zu kennzeichnen. Leider habe ich es vergessen und weiß nicht wo ich suchen soll.
Für die entsprechenden Pages habe ich jeweils ein PNG (siehe Muster) gebastelt. Die Navi funktioniert unter a:aktiv oder a:hover.
Ich möchte es so machen: Sobald ich auf irgeneiner Page bin soll der entsprechende Link in der Navi Rot erscheinen. Bekomme ich hier die Hilfe dazu?
Das hat nichts mit CSS zu tun. Du musst den Navigationspunkt auf jeder Seite als aktiven Navigationspunkt markieren, z.B. indem du ihm eine CSS-Klasse mitgibst. "active" ist ist der Zustand in dem das Element angeklickt wird - der geht auf der nächsten Seite natürlich verloren.
... OK.
Was passiert aber bei includeten Pages. Index.php ist die einzige Page. Alle anderen werden includet. Und in der index ist die Navi.
Irgendwo hast Du ja auch einen Parameter, der die aktuell anzuzeigende Seite repräsentiert (sonst würdest Du ja auch immer den gleichen Inhalt haben).
Abhängig von diesem Parameter kannst Du also auch die Navigation beeinflussen.
Grüße vom Griechen,
Cybergreek!
everygain Translator - eine Firefox-Erweiterung, damit der Grieche Euch besser versteht
Hallo Cybergreek,
hast Du evtl. ein paar Mustercode hierzu?
Habe bisher diese Navi:
in der CSS habe ich die PNG's als Hintergrund eingebaut.PHP-Code:<div id="navi">
<ul>
<li ><a href="index.php" class="home"></a></li>
<li ><a href="Bildergalerie.php" class="picture"></a></li>
<li ><a href="Feedback.php" class="feedback"></a></li>
</ul>
</div>
Mustercode nicht, aber die Idee könnte ich Dir skizzieren:
Und dann brauchst Du noch die zusätzlichen css-Klassen home_active, picture_active und feedback_active.PHP-Code:<div id="navi">
<ul>
<li ><a href="index.php" class="home<?php
if ($ParameterDerDieSeiteEnthält == "home") {
echo "_active";
?>"></a></li>
<li ><a href="Bildergalerie.php" class="picture<?php
if ($ParameterDerDieSeiteEnthält == "picture") {
echo "_active";
?>"></a></li>
<li ><a href="Feedback.php" class="feedback<?php
if ($ParameterDerDieSeiteEnthält == "feedback") {
echo "_active";
?>"></a></li>
</ul>
</div>
Grüße vom Griechen,
Cybergreek!
everygain Translator - eine Firefox-Erweiterung, damit der Grieche Euch besser versteht
danke Cybergreek,
sobald ich damit soweit bin, werde ich den Code und die Adresse mitteilen. Falls Fragen meinerseits sein sollten, werde ich mich wieder melden.
Hallo Cybergreek,
aufgrund Deiner Hinweise habe ich es so gebaut. (funktioniert bei meinem Home-Server) Das ist der CSS-Teil:
Am besten stelle ich die gesamte Index vor:HTML-Code:#navi li a.home_active { background-image: url(../Image/nav_Home.png); background-position: 0px 0px; } #navi li a.picture_active { background-image: url(../Image/nav_Bildergalerie.png); background-position: 0px 0px; } #navi li a.feedback_active{ background-image: url(../Image/nave_feedback.png); background-position: 0px 0px; }
Natürlich weiß ich, daß ich mit diesem Code mit Kanonen auf Spatzen geschossen habe. Es ist für mich zugleich eine Übung um mit Code umgehen zu können.PHP-Code:<?php
session_start(); // benötige ich für die Feedback-Page
ob_start();
$liste = array( "home.php", "Bildergalerie.php", "Feedback.php");
$titel = array("Angelinas Kommunion", "Bildergalerie", "Schreib mir mal");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php echo $titel[$_GET['id']]; ?></title>
<link href="CSS/grund.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<img src="Image/Angelina_index.jpg" alt="kommunion" border="0">
<!-- Ab hier includen -->
<?php
if ( isset($_GET['id']) && isset($liste[$_GET['id']]))
{
$datei = $_SERVER['DOCUMENT_ROOT'] ."/" . $liste[$_GET['id']];
include $datei;
}
else
{
$datei = $_SERVER['DOCUMENT_ROOT'] ."/" . $liste[0];
include $datei ;
}
?>
<!--ende Includen-->
<div id="navi">
<ul>
<li ><a href="index.php<?php echo "?id=0";?>" class="home<?php
if ($_GET['id'] == "0")
{
echo "_active";
}
?>"></a></li>
<li ><a href="index.php<?php echo "?id=1";?>" class="picture<?php
if ($_GET['id'] == "1")
{
echo "_active";
}
?>"></a></li>
<li ><a href="index.php<?php echo "?id=2";?>" class="feedback<?php
if ($_GET['id'] == "2")
{
echo "_active";
}
?>"></a></li>
</ul>
</div></div>
</body>
</html>
Bin gespannt auf die Kommentare. Habe mir auch mal im IE6 angeschaut, noch überhaupt nicht berauschend. Natürlich IE6....
@alle,
nun ist es online. Aber noch nicht komplett. Die Bildergalerie muß ich noch programmieren. Hatte es mir so vorgestellt. Bilder automatisch suchen, Vorschaubilder für den Streifen erstellen und die großen Bilder einstellen.
Mein Link dazu: http://angelina.rkami.de
Wie das funktionieren soll, weiß ich. Bloß das Coden ist mir noch suspekt.
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
LinkBack URL
About LinkBacks
Zitieren