[TYPO3-german] Die Menüzustände werden aus der CSS Datei nicht ausgelesen
Stephan Schuler
Stephan.Schuler at netlogix.de
Thu Dec 24 23:38:08 CET 2009
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA256
Hallo Kerem.
Erstens: Vergiss a:active. Das wird nach meiner Erfahrung gerne mal missinterpretiert.
Wrappe stattdessen per Typoscript per Typoscript den ACT-Link nicht mit
<li>|</li>
sondern mit
<li class="active>|</li>
Abgesehen davon dass es den ein oder anderen Browser gibt der a:active ausgefallen interpretiert (es gibt z.B. irgend nen IE der a:active teilweise ignoriert, sofern ein gleichwertig passendes a in der Code-Reihenfolge später definiert ist) kannst du so auch das komplette li-Element stylen, nicht nur das darin liegende a.
Zweitens: Du hast zwei div#head definiert. Das ist so eigentlich nicht erlaubt. Hier hat das zwar wenig Auwirkung auf das CSS-Verhalten, aber gesagt muss das wohl trotzdem werden.
Drittens: Ein a-Tag hat die Pseudo-Klassen :link, :visited, :active, :hover und :focus. Du hast in deinem CSS ein a:strong definiert. Ich würde sagen hier ist es dem Browser freigestellt, ob er die konkrete Deklaration ignoriert (für dich gutes Verhalten) oder ab dieser Zeile die komplette CSS-Datei (für dich eher nicht so gutes Verhalten). Was aber sicher ist: Es wird so nicht funktionieren.
Viertens: Du definierst
#head ul a:active #head ul a:strong {
Du machst zwar einen Zeilenumbruch nach a:active, das ist dem Browser aber egal. Diese Zeile braucht Element mit der ID head darin ein ul, darin ein active a, darin ein Element mit der ID head .. und hier ist dann auch schon schluss, weil es nur ein Element mit der ID head geben darf und die Schachtelung in sich selbst nicht möglich ist.
Ich nehme an dass du hier ein Komma vergessen hast.
Es kann zwar noch mehr Fehler geben aber mehr Zeit habe ich jetzt gerade nicht. Damit solltest du aber schon mal ein Stück weiter kommen.
Gruß,
Stephan Schuler
TYPO3 Entwickler
Telefon: +49 (911) 539909 - 0
E-Mail: Stephan.Schuler at netlogix.de
- --
netlogix GmbH & Co. KG
Systemhaus | Trainingscenter | Medienagentur
Andernacher Straße 53 | 90411 Nürnberg
Telefon: +49 (911) 539909 - 0 | Fax: +49 (911) 539909 - 99
E-Mail: mailto:info at netlogix.de | Internet: http://www.netlogix.de/
netlogix GmbH & Co. KG ist eingetragen am Amtsgericht Nürnberg (HRA 13338)
Persönlich haftende Gesellschafterin: netlogix Verwaltungs GmbH (HRB 20634)
Umsatzsteuer-Identifikationsnummer: DE 233472254
Geschäftsführer: Stefan Buchta, Matthias Schmidt
________________________________________
Von: typo3-german-bounces at lists.typo3.org [typo3-german-bounces at lists.typo3.org] im Auftrag von Kerem Goldberg [kerem.goldberg at googlemail.com]
Gesendet: Donnerstag, 24. Dezember 2009 22:56
An: Typo3 German Mailinglist
Betreff: [TYPO3-german] Die Menüzustände werden aus der CSS Datei nicht ausgelesen
Hallo Liste,
ich hatte gestern ein Problem mit meinem footer. Das Problem hat sich
dank euch lösen können. Ich definiere jedoch per CSS die
Menüzustände, diese werden aber aus der CSS Datei nicht ausgelesen.
Das a Tag und auch die hover Zustände funktionieren im oberen Menü,
der aktive Zustand funktioniert jedoch nicht. Was mache ich falsch?
Im footer funktioniert weder das gesetzte a Tag noch hover. Was läuft
dort falsch?
hier die Homepage:
http://www.muesliarchitektur.de/typo3/index.php?id=61
HTML CODE
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Deutsche TYPO3 Dokumentation</title>
<link rel="stylesheet" type="text/css" href="greentech_test/
style.css" />
</head>
<body>
<div id="container">
<div id="head">
<ul>
<li id="menu_1">
<div id="menu1-level1-no">
</div>
<div id="menu1-level1-act">
</div>
</li>
</ul>
</div>
<div id="right_top">
</div>
<div id="top">
</div>
<div id="right_info">
<h2> hier kommt eine info rein</h2>
</div>
<div id="center">
<ul>
<li id="content">
</li>
</ul>
</div>
<div id="right">
<ul>
<li id="menu_2">
</li>
</ul>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS CODE
* {
margin: 0;
padding: 0;
}
/**
* Schriftgröße kontrollieren
*/
body, td, th { font: normal 75%/167% Georgia, Palatino, "Times New
Roman", serif; }
td, th { font-size: 100%; }
/* Farben und Hintergruende setzen */
/* Sobald dieser Wert gesetzt ist, funktioniert der horizontale graue
Balken nicht */
html, body {
/* color: #5B6162; */
/* background-color: #5b6162; */
}
a:link, a:visited, a:hover {text-decoration:none;}
body{
text-align:center;
font: normal 12px Arial;
width:auto;
height:auto;
color:white;
background: #5b6162;
background-position: 0 0px;
background-image: url(images/bg_body.gif);
background-repeat: repeat-x;
}
div#container{
width:760px;
height:100%;
text-align:left;
margin:0px auto;
background:transparent;
}
div#head{
color: red;
height:130px;
border-right: 1px solid #414748;
width:599px;
float:left;
text-align:right;
background-color#5b6162}
#head ul li {
width: 599;
float: right;
list-style: none;
margin: 0 0px 0 0;
}
#head ul a,
#head ul strong {
width: 70px;
border-left: 1px solid #414748;
float: right;
margin: 0 0 0 0;
color: red;
background-color:transparent;
display: block;
padding: 110px 8px 8px 8px ;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
#head ul a:hover {
background-color: grey;
color:white;
}
#head ul a:active
#head ul a:strong {
width: 70px;
border-left: 1px solid #414748;
float: right;
margin: 0 0 0 0;
background-color: white;
display: block;
padding: 110px 8px 8px 8px ;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: white;
background: white;
}
div#top {
height:150px;
width:600px;
float:left;
font: bold 10px Verdana,Arial;
background-color:red;
text-align:left;
color:white;
}
div#center{
width:600px;
height:300px;
float:left;
background-color:white;
}
#content {
color: red;
width:580px;
height:280px;
padding: 10px 10px 10px 10px;
float:left;
list-style: none;
background-color:white;
}
div#right_top{
float: right;
text-align:left;
width:160px;
height:130px;
background-color: transparent;
}
div#right_info{
float: right;
text-align:left;
width:160px;
height:150px;
background-color:white;
}
div#right{
float: right;
text-align:left;
width:160px;
height:auto;
background-color: transparent;
}
#right ul li {
padding-top: 10px;
padding-left: 10px;
width: 160;
float: left;
list-style: none;
}
#right ul a {
width: auto;
margin: 0 0 0 0;
color: #352545;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
#right ul a:hover,
#right ul a:focus {
color: white;
}
div#footer {
width:600px;
height: auto;
float:left;
}
#footer ul li {
width: 600;
float: right;
list-style: none;
margin: 0 0px 0 0;
}
/* nachfolgendes keine Auswirkung
#footer ul a
#footer ul a strong {
width: auto;
display: block;
color: white;
text-decoration: none;
padding: 10px 5px 5px 5px;
text-align_ center;
}
TYPO SCRIPT
#DOCTYPE auf XHTML 1.0 Strict setzen, für den IE wird die XML-Angabe
umgedreht
config.doctype = xhtml_strict
# Configuring the Auto-Parser:
plugin.tx_automaketemplate_pi1 {
# Read the template file:
content = FILE
content.file = fileadmin/greentech_test/index.html
# Here we define which elements in the HTML that
# should be wrapped in subpart-comments:
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title
DIV.all = 1
UL.all = 1
LI.all = 1
}
# Prefix all relative paths with this value:
relPathPrefix = fileadmin/
}
# Menu 1 cObject
temp.head = HMENU
# First level menu-object, textual
temp.head.1 = TMENU
temp.head.1.expAll = 0
temp.head.1 {
# Normal state properties
wrap = <ul>|</ul>
NO = 1
NO.linkWrap = <li>|</li>
ACT = 1
ACT.linkWrap = <li>|</li>
}
# Menu 2 cObject
temp.menu_2 = HMENU
temp.menu_2.entryLevel = 1
# First level menu-object, textual
temp.menu_2.1 = TMENU
temp.menu_2.1.expAll = 1
temp.menu_2.1 {
NO.allWrap = <div class="menu1-level1-no"> | </div>
ACT = 1
ACT.allWrap = <div class="menu1-level1-act"> | </div>
}
# Second level menu-object, textual
temp.menu_2.2 = TMENU
temp.menu_2.2.expAll = 1
temp.menu_2.2 {
# Normal state properties
NO.allWrap = <div class="menu1-level2-no"> | </div>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="menu1-level2-act"> | </div>
}
temp.footer = HMENU
temp.footer.special = directory
temp.footer.special.value = 67
temp.footer {
1 = TMENU
1.expAll = 0
1.wrap = <ul>|</ul>
1.NO = 1
1.NO.linkWrap = <li>|</li>
1.ACT = 1
1.ACT.linkWrap = <li>|</li>
}
# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1
# Select only the content between the <body>-tags
workOnSubpart = DOCUMENT_BODY
# Substitute the ###menu_1### subpart with dynamic menu:
subparts.head < temp.head
# Substitute the ###menu_2### subpart with dynamic menu:
subparts.menu_2 < temp.menu_2
# Substitute the ###content### subpart with some example content:
subparts.content < styles.content.get
subparts.footer < temp.footer
}
# Main TEMPLATE cObject for the HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {
# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1
# Select only the content between the <head>-tags
workOnSubpart = DOCUMENT_HEADER
}
# Default PAGE object:
page = PAGE
page.typeNum = 0
# Copying the content from TEMPLATE for <body>-section:
page.10 < temp.mainTemplate
# Copying the content from TEMPLATE for <head>-section:
page.headerData.10 < temp.headTemplate
Ich danke euch im Voraus und wünsche noch frohe Weihnachten
Schöne Grüße
Kerem
_______________________________________________
TYPO3-german mailing list
TYPO3-german at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
-----BEGIN PGP SIGNATURE-----
Version: PGP Universal 2.12.0 (Build 1035)
Charset: Windows-1252
wpUDBQFLM+1Vpp0IwsibV8MBCMlGA/437qxyL8L1VQLOw+852+DDcHYtKxCBqy59
aM+Ek6V1k1WsL0BO4xe6FWo3y+CpJaULgKIwVFVlrhgXVRr56k/DlJyYXtEKN3FB
cPKNqdJqaK98+O6QiU1v76roY2fURFeOlRrW7hFZrBxirNBYA6YsHDJ2Lh0AgTfJ
EM1iEd8TeA==
=XWhn
-----END PGP SIGNATURE-----
More information about the TYPO3-german
mailing list