CSS: geklickter Button soll anders markiert bleiben

**sunlite** · 05.07.2012, 14:05

hallo nochmal,

habe direkt eine weitere frage :)
ich habe eine liste in meinem html:

<ul id="languagebutton">

<li><a href="#">Deutsch</a></li>
<li><a href="#">English</a></li>
<li><a href="#">Español</a></li>

</ul>

Das CSS dazu sieht so aus:

/* Language Selection */

ul#languagebutton{
float:right;
list-style-type:none;
font-size:10px;
text-decoration: none;
}

ul#languagebutton li{
display:block;
float:left;
margin:0 0 0 0;
padding: 0 0 0 10px;

}

ul#languagebutton li a{
text-decoration: none;
color:#304254;
}

ul#languagebutton li.active a,
ul#languagebutton li a:hover{

text-decoration: none;
color:#89A2BC;
}

Wenn ich meine HTML-Datei nun teste und über die Buttons fahre, verändert sich die Farbe. Fein. So solls sein. Wenn ich nun aber auf einen dieser Buttons klicke, soll die Farbe diesen einen Buttons heller bleiben. Sobald ich jedoch mit der Maus von dem Button weggehe, ist er farblich wieder wie all die anderen Buttons. Ich dachte, das kann man mit :active machen? Kann mir jemand sagen, wie das geht?

**etux** · 05.07.2012, 18:06

Deine CSS-Formatierung setzt voraus, dass die momentan ausgewählte Sprache die Klasse „active“ hat. Deine TypoScript-Konfiguration für das Sprachmenü muss entsprechend angepasst werden – bei „CUR“ muss das entsprechende Listenelement die Klasse bekommen.
Übrigens:
- die CSS-Pseudoklasse „:active“ wirkt nur im normalerweise sehr kurzen Augenblick des Klicks. Und ist nicht mit der Klasse „.active“ zu verwechseln, bzw. nicht identisch.

- Listenelemente (li) sind Blockelemente. „display: block“ ist somit völlig überflüssig. Selbst wenn sie Inline-Elemente wären, würde sie das Floaten zu Block-Elementen mutieren lassen.

**sunlite** · 06.07.2012, 08:52

Danke ;)

**sunlite** · 12.07.2012, 14:38

Hi etux,

ich habe das nun mal probiert, aber nicht das gewünschte Resultat erzielt. Hier mal das konkrete Beispiel:

HTML:

<ul id="navigation">

<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Showroom</a></li>
<li><a href="#">Contact</a></li>

</ul>

das CSS:

ul#navigation{
float:right;
list-style-type:none;
font-size:10px;
text-decoration: none;
}

ul#navigation li{

padding-top:5px;
float:left;
margin-left:5px;

background-color:#131D29;
text-decoration: none;
}

/* Die Namen innerhalb der Buttons, also auch die Links formatieren */

ul#navigation li a{

background-color:#131D29;
padding:8px 12px 8px 12px;
text-decoration: none;
color:#ffffff;
}

ul#navigation li a:link{

background-color:#131D29;
text-decoration: none;

}

ul#navigation li a:hover{

background-color:#E67800;
text-decoration: none;
cursor:pointer;

}

ul#navigation li a:active{
background-color:#E67800;
text-decoration: none;
}

Anstelle der letzten :active Pseudoclass habe ich dann folgendes verwendet - nur mal für den ersten Button

.active{
background-color:#E67800;
}

Aber der Button bleibt leider nicht orange (e67800). Muss ich das erst in Typo3 einbinden, damit es diesen Effekt hat? Was genau mache ich da falsch?

Vielen Dank für die Hilfe

**etux** · 12.07.2012, 20:23

Zitat von sunlite

... Was genau mache ich da falsch?

Du definierst eine Hintergrundfarbe für die Links (a), änderst aber bei der Klasse „active“ die Hintergrundfarbe der Listenelemente (li). Das passiert zwar auch, wird aber nicht sichtbar, weil sie von der Hintergrundfarbe der Links überdeckt wird.
Bleib also entweder komplett bei den Links oder bei den Listenelementen.
Da Du nur eine Menüebene hast, hast Du hier die freie Wahl.
Bei einer Navigation mit mehreren Ebenen wäre es günstiger alles über die Listenelementen zu formatieren. Dabei sollte man berücksichtigen, dass die ältere IEs nur Links „hovern“ können.

Hier habe ich so auf die Schnelle an Deinem Code ein wenig was geändert:

HTML-Code:

<!doctype html>
<meta charset="UTF-8">
<title>Test - active</title>
<style type="text/css">
    /* Nur für den Test relevant */
    * { margin: 0; padding: 0; }
    body { width: 90%; margin: 0 auto; padding: 1em 0; }
    h1 { clear: right; float: left; width: 100%; }

    /* Language Selection */
    ul#languagebutton {
        float: right;
        list-style-type: none;
        font-size: 10px;
    }
    ul#languagebutton li {
        float: left;
        padding: 0 0 0 10px;
    }
    ul#languagebutton li a {
        text-decoration: none;
        color: #304254;
    }
    ul#languagebutton li.active a,
    ul#languagebutton li a:hover {
        color: #89A2BC;
    }
    /* Navigation */
    ul#navigation {
        float: right;
        list-style-type: none;
        font-size: 10px;
    }
    ul#navigation li {
        padding-top: 5px;
        float: left;
        margin-left: 5px;
    }
    ul#navigation li a {
        display: block;
        background-color: #131d29;
        padding: 8px 12px 8px 12px;
        text-decoration: none;
        color: #ffffff;
    }
    ul#navigation li a:hover,
    ul#navigation li.active a {
        background-color: #E67800;
    }
</style>
<ul id="languagebutton">
    <li><a href="#">Deutsch</a></li>
    <li class="active"><a href="#">English</a></li>
    <li><a href="#">Espa&ntilde;ol</a></li>
</ul>
<h1>Test - "active"</h1>
<ul id="navigation">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Showroom</a></li>
    <li><a href="#">Contact</a></li>
</ul>

**sunlite** · 13.07.2012, 15:24

Hallo Etux,

vielen Dank erstmal für die ganze Mühe, die Du Dir gemacht hast. Ich glaube ich verstehe, was du soweit geschrieben hast. In diesem Codeschnipsel ist jetzt jeweils die Sprache English und die Auswahl Home fix festgelegt worden durch "class="active".
Wie kann ich aber genau das dynamisch gestalten. Ich möchte zwar, dass der erste Button "Home" orange ist, wie in diesem Beispiel, aber wenn ich nun auf About clicke, dann sollte "Home" Dunkelblau werden und About orange.
Füge ich bei About, Services, etc. auch die class active ein, wird mir von haus aus alles orange gemacht. lass ich die classes aus der <li> weg, dann macht er mir den hover mit orangen (das ist stimmt), aber wenn ich draufklicke, bleibt nichts orange.

Hast Du denn dafür eine Idee oder einen Tip? Denn das ist das eigentlich Problem, das ich habe.

Danke und schöne Grüße

**etux** · 14.07.2012, 07:11

Zitat von sunlite

Wie kann ich aber genau das dynamisch gestalten. Ich möchte zwar, dass der erste Button "Home" orange ist, wie in diesem Beispiel, aber wenn ich nun auf About clicke, dann sollte "Home" Dunkelblau werden und About orange.
Füge ich bei About, Services, etc. auch die class active ein, wird mir von haus aus alles orange gemacht. lass ich die classes aus der <li> weg, dann macht er mir den hover mit orangen (das ist stimmt), aber wenn ich draufklicke, bleibt nichts orange.

Ich hoffe, Du sprichst von Deiner TypoScript-Konfiguration für die Navigation.
Da muss ich kurz mal nachfragen: Du weiß, dass verschiedene Menüzustände konfiguriert werden können? So wie „NO“, „CUR“ etc.
Die Klasse „active“ bekommen die Listenelemente dementsprechend (nur) bei dem Zustand „CUR“.

**sunlite** · 14.07.2012, 15:50

Hallo Etux,

ich habe zwar schon die ein oder andere Typo3 Seite erstellt, jedoch waren diese Seiten nie 100% barrierefrei. Und das ist genau das, was ich nun ändern möchte. Das bedeutet: Jetzt will ich aufs nächste Level und die die Typo3 Seiten nicht nur so gestalten, dass sie funktionieren sondern auch barrierefrei sind und GUT erstellt werden. Deshalb bin ich in vielen Sachen tatsächlich noch ein Neuling. So auch für genau diese Menuzustände in TS. NO und CUR kenne ich bis jetzt nicht, werde aber gleich mal danach googlen. Wenn Du mir passend zu unserem Beispiel für HTML und CSS jedoch einen Tip für ein schlichtes TS geben kannst, wäre ich Dir natürlich sehr dankbar :)

VG

**etux** · 15.07.2012, 10:08

Zitat von sunlite

ich habe zwar schon die ein oder andere Typo3 Seite erstellt, ... NO und CUR kenne ich bis jetzt nicht, ...

Wie Du bis jetzt ohne Grundkenntnisse über HMENU ausgekommen bist, …

Nebenbei bemerkt: damit kann man nicht nur die Navigation einer Website darstellen. Auf Basis von Menüs kann man eine komplette Website generieren lassen. Samt Content-Ausgabe, Bilder-Galerien, Seiten-Vorschau etc.

Zitat von sunlite

Wenn Du mir passend zu unserem Beispiel für HTML und CSS jedoch einen Tip für ein schlichtes TS geben kannst, wäre ich Dir natürlich sehr dankbar :)

Ich kenne Deinen Wissensstand nicht. Wenn Du Fit in HTML bis, erstelle Dir (zumindest im Kopf) erst mal eine barrierearme html-Vorlage für die komplette Website. Dann kannst Du sie im TYPO3 schrittweise generieren lassen. Die TYPO3 Ref. und die Suche im Inet und hier im Forum werden Dir dabei schon helfen.
Ich persönlich schreibe keine Zeile Code, bevor ich die gesamte Website mit all ihrer Funktionalitäten, Varianten ect. wenigstens im Kopf „fertig“ habe.

P.S.:Ich kann Dir keine Menü-Konfiguration posten, da ich nicht weiß, wie weit Du Deie Site barrierearm machen willst. Noch weiß ich, wie Dein Quellcode aussieht: (x)html, html5, Aria-Attribute ect.
Vielleicht zeigst Du mal, wie Du bis jetzt vorgegangen bist.

**etux** · 15.07.2012, 10:26

Wenn Du die Navigation barrierearm bauen möchtest, kannst Du die aktive (aktuelle) Links beispielsweise mit einem strong-Element ersetzen lassen. So bräuchtest Du keine extra Klasse mehr.
In diesem Sinne das TypoScript:

Code:

lib.nav-sunlite = HMENU
lib.nav-sunlite {
  wrap = <ul id="navigation" role="menu" title="Hauptnavigation">|</ul>
  1 = TMENU
  1 {
    NO = 1
    NO {
    allWrap = <li role="menuitem">|</li>
    ATagTitle.field = subtitle // title
    ATagBeforeWrap = 1
    linkWrap = |<span class="hidden">.</span>
    }
    CUR < .NO
    CUR {
      doNotLinkIt = 1
      linkWrap = <strong title="Die aktuelle Seite">|<span class="hidden">. </span></strong>
    }
  }
}

Und die angepasste CSS:

Code:

.hidden {
    position: absolute;
    left: -9999em;
}
/* Navigation */
ul#navigation {
    float: right;
    list-style-type: none;
    font-size: 10px;
}
ul#navigation li {
    padding-top: 5px;
    float: left;
    margin-left: 5px;
}
ul#navigation a,
ul#navigation strong {
    display: block;
    background-color: #131d29;
    padding: 8px 12px 8px 12px;
    text-decoration: none;
    color: #ffffff;
}
ul#navigation a:hover,
ul#navigation strong {
    background-color: #E67800;
}

Feste Schriftgrößen (in Pixel) solltest Du vermeiden. Eine zwei- bis dreifache Schriftvergrößerung durch den User sollte Dein Layout auch verkraften können

.