Guten Morgen,
Ich habe das seltsame Problem, das ich ein Template erstellt habe welches als "statische" Seite funktioniert. Wenn ich dieses Template in Typo3 4.2.1 integriere, dann geht leider sowohl a:focus wie a:active nichtmehr.
css:
/* CSS-Definitionsdatei, die SiteStyle -Stylesheets enthält */
body {
background-image: url(images/background.jpg);
}
.menue {
position: absolute;
margin-top: 250px;
margin-left: 20px;
width: 200px;
list-style-type: none;
}
.banner {
background-image: url(images/w3_banner.jpg);
height: 153px;
width: 1030px;
position: absolute;
}
.menu_ebene_1 {
line-height:25px;
width: 200px;
font-size: 1.0em;
text-align: left;
}
.menu_ebene_1 a:link {
color: #000000;
display: block;
}
.menu_ebene_1 a:visited {
color: #FFFFFF;
display: block;
}
.menu_ebene_1 a:hover {
background-color: #9c9ccd;
color: #FFFFFF;
display: block;
}
.menu_ebene_1 a:active {
background-color: #9c9ccd;
color: #cc0000;
display: block;
}
.menu_ebene_1 a:focus {
background-color: #9c9ccd;
color: #cc0000;
display: block;
}
.menu_ebene_2 {
line-height:20px;
width: 200px;
font-size: 0.8em;
text-align: left;
}
.menu_ebene_2 a:link {
color: #000000;
display: block;
}
.menu_ebene_2 a:visited {
color: #FFFFFF;
display: block;
}
.menu_ebene_2 a:hover {
background-color: #9c9ccd;
color: #FFFFFF;
display: block;
}
.menu_ebene_2 a:active {
background-color: #cc0000;
font-color: #cc0000;
display: block;
}
.menu_ebene_2 a:focus {
background-color: #cc0000;
font-colorcolor: #cc0000;
display: block;
}
.inhalt {
position: absolute;
width: 630px;
height: 450px;
margin-top: 177px;
margin-left: 270px;
}
.contenttable {
vertikal-align: top;
}
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="banner"></div>
<ul class="menue">
<li class="menu_ebene_1"><a href="#" title="Link1 Ebene 1">Link1 Ebene 1</a></li>
</ul>
<div class="inhalt">Raum für den Inhalt von class "inhalt"</div>
</body>
</html>
grüße
Gucky
Hmm...
Die Properties:
font-color
font-colorcolor
wären mir neu 😉
Gruß
Silvio
Habe nun font-color und font-colorcolor auf color: #cc0000; geändert.
Hat leider auch nichts gebracht.
/* CSS-Definitionsdatei, die SiteStyle -Stylesheets enthält */
body {
background-image: url(images/background.jpg);
}
.menue {
position: absolute;
margin-top: 250px;
margin-left: 20px;
width: 200px;
list-style-type: none;
}
.banner {
background-image: url(images/w3_banner.jpg);
height: 153px;
width: 1030px;
position: absolute;
}
.menu_ebene_1 {
line-height:25px;
width: 200px;
font-size: 1.0em;
text-align: left;
}
.menu_ebene_1 a:link {
color: #000000;
display: block;
}
.menu_ebene_1 a:visited {
color: #FFFFFF;
display: block;
}
.menu_ebene_1 a:hover {
background-color: #9c9ccd;
color: #FFFFFF;
display: block;
}
.menu_ebene_1 a:active {
background-color: #9c9ccd;
color: #cc0000;
display: block;
}
.menu_ebene_1 a:focus {
background-color: #9c9ccd;
color: #cc0000;
display: block;
}
.menu_ebene_2 {
line-height:20px;
width: 200px;
font-size: 0.8em;
text-align: left;
}
.menu_ebene_2 a:link {
color: #000000;
display: block;
}
.menu_ebene_2 a:visited {
color: #FFFFFF;
display: block;
}
.menu_ebene_2 a:hover {
background-color: #9c9ccd;
color: #FFFFFF;
display: block;
}
.menu_ebene_2 a:active {
background-color: #cc0000;
color: #cc0000;
display: block;
}
.menu_ebene_2 a:focus {
background-color: #cc0000;
color: #cc0000;
display: block;
}
.inhalt {
position: absolute;
width: 630px;
height: 450px;
margin-top: 177px;
margin-left: 270px;
}
.contenttable {
vertikal-align: top;
}
grüße
Gucky
Da ich Unterstriche in den Selektoren (_) bisher nie genutzt habe (diese Sonderzeichen waren in den Anfangsspezifikationen von CSS nicht dabei und somit nicht erlaubt) weiss ich nicht in wie weit es daran liegen könnte. Die Kaskade stimmt an sich soweit.
Wie genau äußert sich dein Problem?
Das Menü ansich geht ja. so wie es im typo3 Template auch steht. Wenn ich dieses Template als Statische Seite aufrufe geht auch! a:active. Heisst der Link, welche geklickt wurde wird laut background-color farbig hinterlegt. Wenn ich diese beiden Dateien (html und css) ins Typo3 hochlade, per Templavoila integriere und dann teste, funktioniert a:active nichtmehr. Zumindest das farnige hinterlegen wird nicht erledigt.
grüße
Gucky
Gibt es vielleicht noch andere durch Extension oder T3 eingebundene Styles die deine überschreiben? Schonmal im erzeugten Quellcode nachgesehen?
An den A Klassen kann es nicht liegen. Das Template als statische Seite aufgerufen funktioniert.
Dennoch muss die Reuhenfolge eingehalten werden... Irgendeinen Unterschied muss es ja geben... Vielleicht ist der Doxtype zwischen "statisch" und TYPO3 anders...
Guten Morgen,
Ich habe bene mal eine Seite aus dem Typo3 gespeichert, die Links so angepasst daß die ins Leere zeigen, etc. also so daß die Seite auch offline funktioniert. Die Klasse a:active funktioniert.
Also liegt es meiner Meinung nach daran, dass die Setie ursprünglich aus dem Typo3 ,kommt. Sprich online funktioniert sie nicht.
Ich muß gestehen ich bin echt ratlos.
grüße
Gucky
Kann man sich das Beispiel mal in LIVE ansehen?
Guten Abend,
Das Beispiel liegt unter http://www.w3-creative.de/
grüße
Gucky
Also... bei mir funktioniert alles wie es soll...
Der link soll Schwarz sein
wenn besucht soll er weis werden
Bei Tabben (focus) wird er rot
bei activ also gerade geklickt wird er rot
der hover ist weis
Was funktioniert denn nun nicht?
ich habe das Problem, dass sich die Hintergrundfarbe nicht ändert, wenn ich eine nLink anklicke. Beispiel Impressum. Bei a:hover ändert sich die hintergrundfarbe. wenn ich den Link angeklickt habe bleibt er leider nicht Violett hinterlegt so wie bei a:hover. Mit ner statischen Seite kein Problem.
grüße
Gucky
Mach dir das Leben doch nicht so schwer.
leg ne Class für active an und verwende den Menüzustand ACT