Navigation Spielereien verstehen

Ich habe mir endlich die navigation semantisch korrekt als Liste umgesetzt, nun möchte ich das nur wenn man klickt der border unten 2px breit/hoch ist, wenn man dann wieder woanders hinklickt soll der border beim letzten Link wegegehn und beim nächsten Link bleiben, kein hover sondern bei KLICK.
Ich kenne

a:link, a:visited, a:hover, a:active

Die Reihenfolge ist glaub auch wichtig, bitte sagt mal wie das geht?


Die Navi wird via <?php include('html_inc/steuerung.html'); ?>
in das element <ul id="steuerung"></ul> eingebunden..

<li><a title="Zur Startseite" href="index.php">lorem ipsum</a></li>
<li><a title="lorem ipsum" href="site.php">lorem ipsum</a></li>
<li><a title="lorem ipsum" href="site1.php">lorem ipsum</a></li>
<li><a title="lorem ipsum" href="site2.php">lorem ipsum</a></li>
<li><a title="lorem ipsum" href="site3.php">lorem ipsum</a></li>

Die Css sieht dabei wie folgt aus:

ul#steuerung {
font-size: 13px;
font-family: serif;
letter-spacing: 2px;
color: #414141;
text-align: center;
padding: 5px 0;
}
ul#steuerung li {
display: inline;
margin-left: -4px;
}
ul#steuerung li a {
padding: 3px 25px;
color: #414141;
text-decoration: none;
border-bottom: 1px solid #60a5c4;
}
ul#steuerung li a:hover {
color: #414141;
border-bottom: 2px groove #414141;
}
ul#steuerung li a:active {
color: #414141;
border-bottom: 2px groove #414141;
}

Auf der Seite ist es aber viel leichter beschrieben als im Codeschnipsel von Grevas, werde aber beide Lösungen testen..

Hier stehts ja auch, das wusste ich gar nicht?!

Zitat

Hierzu muss man wissen, dass a:active lediglich den Linkzustand im Moment des Anklickens mit der Maus beschreibt, und zwar nur so lange, wie mit der Maus auf den Link "gedrückt" wird.

auf ohne-css.gehts-gar.net .. gibts-ja-fast-alles.net (nedde?):D

ich wollt ja eigentlich auch nur per css die seite hervorheben, für was ein php script wenns auch mit css geht?

Auf http://werderwichtel.com/ ist es aber genauso wie ich es mir vorgestellt habe, danke:D

[EDIT] Kann ich das http://www.ohne-css.gehts-gar.net/0016.php bei includeter navigation gar nicht verwenden??

Zitat von Grevas

Die Pseudeklasse :visited wird aus Sicherheitsgründen nicht mehr verwendet.

Mit HTML /CSS geht das nur, wenn du die Inhalte per JS / Ajax lädst. Normal wird die Seite aber neugeladen woraus folgt, damit geht es nicht...
Du musst mit PHP den "aktiven" (also derzeit verwendeten) Link hervorheben (mit z.B. einer extra CSS Klasse oder ID. Außer du arbeitest ohne PHP, musst du es per Hand in jeder Seite einfügen.

Wenn du Firebug hast, schau dir die Navi auf der Seite an (die Startseite selbst wird nicht markiert, erst wenn man die Seite tatsächlich wechselt): http://werderwichtel.com/

Wenn du kein Firebug hast: besorg dir Firebug

/P.S.:

Hier meine Navi Funktion die ich derzeit verwende (für eine Navigation mit 3 Ebenen)

PHP

function create_navi($site) {
    global $abs_path;
    include "settings/navi.php";
 
    $content = "<div id=\"navi\">
    <ul>";
    $i = 0;
    foreach($main_menu as $href => $text) {
        if($site == $href)
            $selected = true;
        if(isset($sub_menu[$href])) {
            $subs = "<ul>";
            foreach($sub_menu[$href] as $sub_href => $sub_text) {
                if($site == $sub_href) $selected = true;
 
                if(isset($subsub_menu[$sub_href])) {
                    $subsubs .= "<ul>";
                    foreach($subsub_menu[$sub_href] as $subsub_href => $subsub_text) {
                        if($site == $subsub_href) $selected = true;
                        $subsubs .= "<li><a href=\"$abs_path$subsub_href\">$subsub_text</a></li>";
                    }
                    $subsubs .= "</ul>";
                }
                if(isset($subsubs)) $add = ' class="sub_exists"';
                $subs .= "<li><a href=\"$abs_path$sub_href\"$add>$sub_text</a>$subsubs</li>";
                unset($subsubs);
                unset($add);
            }
            $subs .= "</ul>";
        }
        if($selected) $link_add = ' id="link_selected"';
        if(isset($subs)) $link_add .= ' class="sub_exists"';
        if(0 == $i) $link_add .= ' style="border-left: none;"';
        if($href == "Home") $href = "$abs_path";
        $content .= "<li><a href=\"$href\"$link_add>$text</a>$subs</li>" ;
        unset($subs);
        unset($selected);
        unset($link_add);
        $i++;
    }
    $content .= "    </ul>
</div>
<div style='clear: both;'></div>";
    return $content;

Alles anzeigen

$site ist die aktuelle Seite (deren Parameter).


In der includierten navi.php wird ein Array gebaut (derzeit per Hand, da die Seite ohne eine Datenbank auskommen muss):

PHP

main_menu = array(
"Home" => "Startseite",
"Href1" => "Href 1",
"Href4" => "Href 4",
"Href5" => "Href 5",
"Href9" => "Href 9"
);
/*
 * SUB MENU
 */
$sub_menu['Href1'] = 
    array(
        "SubHref1" => "Sub Link 1");
/*
 * SUB-SUB MENU
 */
$subsub_menu['SubHref1'] =
    array(
    "SubSubHref 1" => "SubSub Link 1",
    "SubSubHref 2" => "SubSub Link 2");

Alles anzeigen

Alles anzeigen

Kann ich die Untermenüs auch weglassen, so etwas habe ich nicht?



5:51Uhr: Nach langen versuchen die ganze nacht hindurch muss ich nun gleich übermüdet zur Arbeit, ich habe aber ein ganz simplem Trick vverwendet um das hinzubekommen. Einfach den A-Tag auf den entsprechenden Seiten entfernen, dann sieht man auch auf welcher seite man gerade ist. Allerdings habe ich includete Navigation(testweise entcludet:?), funktioniert, auch das Beispiel von ohne css geht gar net klappt das aber beide Methoden nicht bei includeteter Navigation:x

dankeschön für die nichthilfe, einfach code hinklatschen und dann nicht mehr reinschauen.

unregistriert ging es immer schneller

Zitat von sejuma

Eben:
Link bei includeter navi hervorheben

ich habe das nun mal mit kleinen documenten zum testen local erstellt. Irgendwie ist der Link zwar aktiv aber anders als man denkt

ich hab eine index.php

<?php $thisPage="startseite"; ?>
<!doctype html><html>
<head>
    <title>Titel</title>
    <meta charset="ISO-8859-1" />
    <link href="css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Startseite</h1>
<?php include('inc/menue.php'); ?>
</body>
</html>

eine seite2.php

<?php $thisPage="seite2"; ?>
<!doctype html><html>
<head>
    <title>Titel</title>
    <meta charset="ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="css.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>
<body>
<h1>Seite2</h1>
    <?php include('inc/menue.php'); ?>
</body>
</html>

die includete menue.php

<ul>
    <li>
    <?php
        if($thisPage=="startseite") {
            echo "id=\"aktiv\"";
        }
    ?>
            <a href="index.php">Startseite</a>
    </li>
    <li>
    <?php
        if($thisPage=="seite2") {
            echo "id=\"aktiv\"";
        }
    ?>
            <a href="seite2.php">Seite2</a>
    </li>
</ul>

und die css datei:

#menue #aktiv a {
color: #fff;
background-color: #f00;
font-weight: bold;
}

So sieht der aktive Link in der webseite aus, irgendwie nicht wie gewünscht. Was läuft verkehrt???

id="aktiv" Startseite

Zitat von Unregistriert

PHP

<ul id="menue">
    <li <?php if($thisPage=="startseite") { echo "id=\"aktiv\""; } ?>>
           <a href="index.php">Startseite</a>
    </li>
    <li <?php if($thisPage=="seite2") { echo "id=\"aktiv\""; } ?>>
            <a href="seite2.php">Seite2</a>
    </li>
</ul>

Herzlichen Dank lieber Unbekannter;)