[TYPO3-german] Die Menüzustände werden aus der CSS Datei nicht ausgelesen
Kerem Goldberg
kerem.goldberg at googlemail.com
Fri Dec 25 00:26:41 CET 2009
Hallo Stephan,
also, das mit dem head Fehler habe ich jetzt korrigiert.
CSS: aus dem div#head wurde jetzt "div#menu_1" bzw. "#menu_1"
div#menu_1 {
color: red;
height:130px;
border-right: 1px solid #414748;
width:599px;
float:left;
text-align:right;
background-color#5b6162}
#menu_1 ul li {
width: 599;
float: right;
list-style: none;
margin: 0 0px 0 0;
}
#menu_1 ul a {
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;
}
#menu_1 ul a:hover {
background-color: grey;
color:white;
}
#menu_1 ul a:active,
#menu_1 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;
}
entsprechendes habe ich auch in der html und im TypoScript korrigiert.
Im TScript habe ich noch ACT.linkWrap um <li id="active">|</li>
ergänzt, genau wie auch RALF-RENE es vorgeschlagen hat. jedoch tut
sich nichts. Muss ich vielleicht im CSS auch noch etwas reinschreiben?
# Menu 1 cObject
temp.menu_1 = HMENU
# First level menu-object, textual
temp.menu_1.1 = TMENU
temp.menu_1.1.expAll = 0
temp.menu_1.1 {
# Normal state properties
wrap = <ul>|</ul>
NO = 1
NO.linkWrap = <li>|</li>
ACT = 1
ACT.linkWrap = <li id="active">|</li>
}
STEPHAN
drittens und viertens habe ich gar nicht verstanden, insbesondere
viertens. Ich habe leider keine Ahnung, welches (CSS oder TScript)
ich um was ergänzen soll.
ich heule gleich.
RALF-RENE
ich habe im footer folgendes:
div#footer {
width:600px;
height: auto;
float:left;
}
#footer ul li {
width: 600;
float: right;
list-style: none;
margin: 0 0px 0 0;
}
#footer ul a {
width: auto;
display: block;
color: white;
text-decoration: none;
padding: 10px 5px 5px 5px;
text-align: center;
}
Aber nicht einmal das a Tag will er auslesen (Man sagt doch a Tag
dazu, oder?)
Vielen Dank Leute und merry merry christmas
Gruss
Kerem
Am 24.12.2009 um 23:38 schrieb Stephan Schuler:
-----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-----
_______________________________________________
TYPO3-german mailing list
TYPO3-german at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
More information about the TYPO3-german
mailing list