Navigationsproblem:-)

html.de-Forum HTML, XHTML & CSS
1

Hi, viell. könnt ihr mir ja helfen. Also, ich hab eine Navigation in CSS/HTML gebaut, die besteht aus Bildern die in CSS hinterlegt sind. Mein HTML Code ist nun wie folgt:

soweit so gut. hab dann hover effekte ect. Meine Frage ist wie ich der HTML Seite sowas wie id=current zuweise.

Danke im Vorraus

2

Willkommen im Forum!

Ich nehme an, du möchtest den aktiven Menüpunkt mit einer zusätzlichen CSS-Klasse/ID versehen? Wenn du das nicht für jede Seite von Hand machen möchtest, bietet sich die Generierung der Navigation durch eine serverseitige Scriptsprache (wie zum Beispiel PHP an).

Je nach URL kann so dynamisch das passende Element hervorgehoben werden.

Ein Beispiel:

[php]<?php

$menuData = array(
‚‘ => ‚Home‘,
‚projects‘ => ‚Projekte‘,
‚about‘ => ‚Über‘,
‚contact‘ => ‚Kontakt‘
);

$_GET[‚path‘] = (isset($_GET[‚path‘])) ? $_GET[‚path‘] : ‚‘;

if (!in_array($_GET[‚path‘], array_keys($menuData))) {
$_GET[‚path‘] = ‚error‘;
}

?>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Demo</title>
    <style type="text/css">

li.active {
background: #fcc;
}

    </style>
</head>

<body>
    <ul>
    <?php foreach ($menuData as $path => $title): ?>
        <?php
        $classes = '';
        if ($_GET['path'] == $path) {
            $classes .= ' active';
        }
        ?>
        <li class="<?php echo htmlspecialchars($classes); ?>">
            <a class="<?php echo htmlspecialchars($classes); ?>"
               href="<?php
                    if ($path === '') {
                        echo './';
                    } else {
                        echo '?' . http_build_query(array('path' => $path));
                    }
               ?>">
                <?php echo htmlspecialchars($title); ?>
            </a>
        </li>
    <?php endforeach; ?>
    </ul>
</body>
[/php]
3

also, hier nochmal das gesamte problem.
Wenn ich auf der seite kontakt bin soll in der navi auch der zustand zusehen sein. bisher hab ich einen hover effekt der funktioniert…leider wird active oder so nicht erkannt un genau das ist das problem.
HTML:

[CODE]

[/CODE]CSS: [CODE] div.kontakt { height: 35px; width: 154px; margin-left:0px; margin-top:-35px; } div.kontakt a{background-image:url(grafiken/kontakt.png); height: 35px;width: 154px;display:block; } div.kontakt a:hover {background-image:url(kontakt_hover.png);} div.kontakt a:active {background-image:url(kontakt_active.png);} [/CODE]
4

SELFHTML: Stylesheets / CSS-Eigenschaften / Pseudoelemente und Pseudoklassen

Die folgenden Pseudoklassen bedeuten:

:link = für Verweise zu noch nicht besuchten Seiten
:visited = für Verweise zu bereits besuchten Seiten
:focus = für Elemente, die den Fokus erhalten, z.B. durch „Durchsteppen“ mit der Tabulator-Taste (CSS 2.0)
:hover = für Elemente, während der Anwender mit der Maus darüber fährt (CSS 2.0)
:active = für gerade angeklickte Elemente

5

Hallo.

Bist du sicher das active nicht erkannt wird?
Active ist nur solange active solange die Maustaste gedrückt wird. Sobald du die Maustaste los lässt wird active nicht mehr angezeigt
Diese Funktion ist also nicht dazu da die Seite anzuzeigen auf der du dich gerade befindest…

Gruss
Elroy

6

Ok, wenn active flasch ist wie mache ich das denn dann??

7

Hallo.

mermshaus hat dir in Beitrag 2 bereits einen Hinweis gegeben.
Eine andere Art der Umsetzung ist mir leider auch nicht bekannt.

Gruss
Elroy