• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

a:active funktioniert nicht korrekt unter CSS

T

taurus64

Neues Mitglied
Hallo,

habe da folgendes Problem und zwar bei der Navigation. Wenn ich mit der Maus über die Rubriken fahre, funktioniert das Hovern problemlos, aber wenn ich nun einen Link anklicke, sollte der "aktivierte" Link farblich untermalt bleiben. Doch sobald ich den Link gedrückt habe, verschwindet der farbliche Hintergrund des aktivierten Linkes.

Ich vermute da ein Problem im Zusammenhang mit PHP, da ich die Seiten sprich Link mit PHP "verdrahtet habe. Beiliegend füge ich noch die entsprechenden Codeschnipsel von CSS bzw. PHP bei.

Hier der CSS-Code:

Code: 
#navigation {
    width:180px;
    float:left;
    padding-top:20px;
    padding-bottom:20px;
}

#navigation ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

#navigation a {
    text-decoration:none;
    letter-spacing:1px;
    display:block;
}

#navigation a:hover, #navigation a:focus, #navigation a:active {
    background-color:#e3e0cf;
    color:#010101;
}

Hier der Code der Navigation HTML / PHP:

Code: 
<div id="navigation">
    <ul>
        <li><a href="index.php?page=1">Startseite</a></li>
        <li><a href="index.php?page=2">Inhalt 1</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
    </ul>
</div>

Hier der Code der "Inhaltsseite":

Code: 
    <div id="inhalt"><?php 

switch($_GET['page']) {
    case 1:include 'seite_de/startseite.php';break;
    case 2:include 'seite_de/inhalt_1.php';break;
    case 3:include 'seite_de/news_de.php';break;
    case 4:include 'seite_de/kontakt_de.php';break;
    case 5:include 'seite_de/impressum_inhalt_de.php';break;
    default:include 'seite_de/startseite.php';break;
}

?>
</div>

Da es sich um eine Testwebsite handelt, habe ich zuerst die Links mit einem # versehen und bei diesen Links, bleibt bzw. sieht man den farblichen Hintergrund nachdem man den Link angeklickt hat. Er bleibt dort "aktiv", ausser bei den mit PHP.

Braucht es hierfür noch einen speziellen CSS-Code, wenn man mit PHP arbeitet?

Danke für alle Hinweise/Hilfe! :wink:
 
Hallo,

is logisch, da der link nur aktiv ist solang drauf klickst, da nach wird die seite ja neu geladen und damit weis keiner was altiv sein soll, ausser du gibst den aktiven link eine classe so wie üblich.

Code: 
<div id="navigation">
     <ul>
         <li><a href="index.php?page=1">Startseite</a></li>
         <li><a class="aktiv" href="index.php?page=2">Inhalt 1</a></li>
         <li><a href="#">Startseite</a></li>
         <li><a href="#">Startseite</a></li>
         <li><a href="#">Startseite</a></li>
     </ul>
 </div>
Cheffchen
 
Das siehst Du richtig - aber nur da du PHP verwendest.

Ziel müsste es sein im HTML-Code eine Klasse zu ergänzen, wodurch per CSS beim Link, der auf die aktuell aufgerufene Seite führt, die entsprechende Eigenschaft hinterlegt werden kann. Also quasi so etwas in der Ausgabe:

HTML: 
<li><a href="#" class="aktiv">Startseite</a></li>

Wie man die Klasse nennt ist jedem selbst überlassen, sollte aber eindeutig sein ;)

Im CSS müsstest Du dann nur ergänzen, dass neben :hover auch die aktiv-Klasse die Eigenschaften bekommen:

Code: 
#navigation a:hover, #navigation a:focus, #navigation a:active, #navigation a.aktiv { ..
 
Hallo zusammen,
ich habe aktuell das gleiche Problem nur irgendwie bekomme ich die Lösung nicht hin (wahrscheinlich ein großes Brett vorm Kopf).
In der CSS denke ich sollte es so aussehen:
Code: 
.aktiv a :active {
    background-image: url(files/nav_bg_o2.gif);
}
So ebenfalls probiert:
Code: 
#impressum a.active {
    background-image: url(files/nav_bg_o2.gif);
}

In der HTML bzw. PHP:
Code: 
<li id = "impressum">
<a href="impressum.html?lga=<?php print $lga; ?>" class="aktiv">IMPRESSUM</a>
</li>

Habt Ihr einen Tipp für mich?
 
PenguinPsycho schrieb:
Hallo zusammen,
ich habe aktuell das gleiche Problem nur irgendwie bekomme ich die Lösung nicht hin (wahrscheinlich ein großes Brett vorm Kopf).
In der CSS denke ich sollte es so aussehen:
Code: 
.aktiv a :active {
    background-image: url(files/nav_bg_o2.gif);
}
So ebenfalls probiert:
Code: 
#impressum a.active {
    background-image: url(files/nav_bg_o2.gif);
}

In der HTML bzw. PHP:
Code: 
<li id = "impressum">
<a href="impressum.html?lga=<?php print $lga; ?>" class="aktiv">IMPRESSUM</a>
</li>

Habt Ihr einen Tipp für mich?
Zum Vergrößern anklicken....

Und die Leerzeichen solltest du dir abgewöhnen:
HTML: 
<li id = "impressum">

Das ist zwar vielleicht korrekt bzw. funktioniert, sieht aber total doof aus.
 
Irgendwie will es nicht.
Liegt das eventuell noch mit an meinem Menü? Überschreibe ich da was?
Ich poste noch mal ein bissl mehr vom code.
Würde mich freuen wenn Ihr, obwohl es wahrscheinlich offensichtlich ist, noch mal helft.


HTML: 
<div style="width: 180px; float: left; margin-left: 50px; padding-right: 15px;">           
                <ul class="accordion">                   
                    <li id ="start">
                        <a href="index.html?lga=<?php print $lga; ?>">START</a>
                    </li>
                    <li id="philosophie">
                        <a href="#philosophie">PHILOSOPHIE</a>
                        <ul class="sub-menu">
                            <li><a href="#">Titel 1</a></li>
                            <li><a href="#">Titel 2</a></li>
                            <li><a href="#">Titel 3</a></li>
                            <li><a href="#">Titel 4</a></li>
                        </ul>
                    </li>
                    <li id="partner">
                        <a href="partner.html?lga=<?php print $lga; ?>">PARTNER</a>
                    </li>
                    <li id="kontakt">
                        <a href="kontakt.html?lga=<?php print $lga; ?>">KONTAKT</a>
                    </li>
                    <li id = "impressum">
                        <a href="impressum.html?lga=<?php print $lga; ?>" class="aktiv">IMPRESSUM</a>
                    </li>
                </ul>
            </div>

Code: 
/* reset all */
.accordion,
.accordion ul,
.accordion li,
.accordion a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.accordion li {
    list-style: none;
}
.accordion li > a {
    display: block;
    position: relative;
    min-width: 110px;
    padding: 0 10px 0 40px;
    color: #54534e;  /* link schriftfarbe */
    font: 12px/32px Arial, sans-serif;
    text-decoration: none;
    background-image: url(files/nav_bg_n.gif);
    background-repeat: no-repeat;
    border-bottom: 1px dotted #54534e;
    height: 29px;
}
.accordion > li:hover > a,
.accordion > li:target > a {
    color: #ffffff;    /* link hover schriftfarbe */
    background-image: url(files/nav_bg_o.gif);
    background-repeat: no-repeat;
    border-bottom: 1px dotted #54534e;
    height: 29px;
}
.accordion > li:active > a,
.accordion > li:target > a {
    color: #ffffff;    /* link active schriftfarbe */
    background-image: url(files/nav_bg_o2.gif);
    background-repeat: no-repeat;
    height: 29px;
}
#impressum a.aktiv:active {
    background-image: url(files/nav_bg_o2.gif);
}

.sub-menu li a {
    color: #797979;
    background: #e5e5e5; /* hintergrundfarbe submenue */
    border-bottom: 1px solid #c9c9c9;
    height: 29px;
}
.sub-menu li:last-child a { border: none; }
.sub-menu li:hover a { background: #efefef; }
.accordion li > .sub-menu {
    height: 0;
    overflow: hidden;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.accordion li:target > .sub-menu {
    height: 120px;
}
 
Code: 
.aktiv a :active {
    background-image: url(files/nav_bg_o2.gif);
}

:active weg...

:active wirkt nur genau in dem moment in dem die Maus gedrückt ist.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben