Menügrafik für aktiven Link

[kercon]

Hallo,
warum "springt" meine Grafik bei einem aktiven Link immer wieder zurück auf die normale Link-Grafik?

.navi li a:hover, a:active {
    display:block;
    width:222px;
    height:65px;
    line-height:71px;
    background-image:url(../images/button_on.png);
    background-repeat:no-repeat;
    text-align:left;
    text-decoration:none;
    font-size:15px;
    font-weight:bold;
    color:#000000;
    padding-left:30px;
    padding-top:6px;
    }

Hier auch noch meine Menü-Liste

<div class="navi">
<ul>
<li><a href="index.php?s=start"> Willkommen</a></li>
<li><a href="index.php?s=leistung">Leistungen</a></li>
<li><a href="index.php?s=info">Informationen </a></li>
<li><a href="index.php?s=impressum">Impressum</a></li>
<li><a href="index.php?s=kontakt">Kontakt</a></li>
</ul>
</div>

Vielen Dank für Euro Infos/Ratschläge
MfG

 

[Wustersoss]

warum "springt" meine Grafik bei einem aktiven Link immer wieder zurück auf die normale Link-Grafik?

Meinst du etwa das wenn der Link angesprungen wird aus dem Menü, er auf der angesprungenen Seite nicht mit einer anderen Grafik hinterlegt wird? Wenn nicht erkläre es noch ein wenig genauer.

 

[kercon]

Du hast recht, sorry! Ist wohl etwas doof beschrieben...

####---> inaktiver Link
aktiver link <-----####
####---> inaktiver Link

wobei das #### meine Grafik darstellen soll ;-)
Die kleine Grafik soll halt bei der aktuellen Seite an entsprechender Stelle im Menü rechts stehen,
die anderen Menügrafiken auf der linken Seite


oder schau einfach hier auf meiner baustelle http://www.mobiles-saunahaeuschen.de

 

[Wustersoss]

Prima, dachte ich mir schon.

Du musst dem Link der Seite die gerade angezeigt ist eine Klasse mitgeben. Zum Beispiel class="aktiv". das schreibst du dann dorthin wo die Änderung erscheinen soll also entweder im Tag li oder im a-Tag.

Dass musst du auf jeder Seite mit jedem Li-Element wiederholen.
In der CSS-Beschreibung, schriebst du dann rein was damit verändert werden soll. Also wenn das ganze li-Element nach links verrückt werden soll wäre es ein margin-left mit dem Wert und der Einheit die dir passt.
Soll nur der Text nach Links aber der Button gleich bleiben. Schreibst du es halt für das a.aktiv {text-indent: -1em} zum Beispiel.

Anhand deines Beispiels sähe es so aus wenn man auf Leistungen geklickt hätte.

<div class="navi"> <ul> <li><a href="index.php?s=start"> Willkommen</a></li> <li><a class="aktiv" href="index.php?s=leistung">Leistungen</a></li> <li><a href="index.php?s=info">Informationen </a></li> <li><a href="index.php?s=impressum">Impressum</a></li> <li><a href="index.php?s=kontakt">Kontakt</a></li> </ul> </div>

 

[kercon]

Die Idee hatte ich auch schon... Mmmmh? Hieße das nicht, einen Schritt zurückzugehen? Wozu gibt es dann ein a:active? Und an meiner "Faulheit" sollte dies auch scheitern ;-) Warum sollte ich für meine 5 Menüpunkte je ein eigenens Skript schreiben, obwohl ich andererseits alle Inhalte per PHP in meine index.php "nur" include?
Da muss es noch etwas anderes geben... Oder sehe ich das falsch? Ich hoffe doch nicht... ;-)
Dennoch vielen lieben Dank für deine Antworten.

 

[mermshaus]

Wozu gibt es dann ein a:active?

- Selectors Level 3

Da muss es noch etwas anderes geben... Oder sehe ich das falsch?

Puh, das ist eine akademische Frage: Nein, du musst nicht für jeden der fünf Menüpunkte eigenen Code schreiben. Ja, du wirst auch meines Wissens Code schreiben müssen.

<?php

// Müsste dynamisch aus $_SERVER['REQUEST_URI'] oder so gesetzt werden
$activePage = 'about.php';

// Menüeinträge

$menuItems = array();

$menuItems[] = array(
    'title' => 'Home',
    'path'  => 'index.php'
);

$menuItems[] = array(
    'title' => 'About',
    'path'  => 'about.php'
);

$menuItems[] = array(
    'title' => 'Contact',
    'path'  => 'contact.php'
);

// Menüausgabe

?>

<ul>
<?php foreach ($menuItems as $id => $item) : ?>
    <?php $class = ($item['path'] === $activePage) ? ' class="active"' : ''; ?>
    <li<?php echo $class; ?>>
        <a href="<?php echo $item['path']; ?>"><?php echo $item['title']; ?></a>
    </li>
<?php endforeach; ?>
</ul>