[TYPO3-german] Mittels automaketemplate (autoparser) ein footer einfuegen
Kerem Goldberg
kerem.goldberg at googlemail.com
Wed Dec 23 18:55:11 CET 2009
Hallo Liste,
bis jetzt habe ich meine Homepage aufbauen können ohne jemals
irgendjemanden um Rat fragen zu müssen. Das Internet hat nämlich auf
alle meine Fragen eine Antwort geliefert. Doch nun komme ich wirklich
nicht mehr weiter und bin am verzweifeln (seit etwa 2 Wochen suche
ich nach einer Lösung).
Ich wäre euch zutiefst dankbar, wenn ihr mir aus der Sache raushelfen
könnt. Im vorab möchte ich noch bemerken das ich ein Anfänger bin und
mich erst seit etwa 3 Monaten mit Typo3, dann html dann mit CSS
beschäftige.
Unter der folgenden Adresse könnt ihr meine HP sehen:
www.muesliarchitektur.de/typo3
wie ihr sehen werdet, probiere ich mit den Schriften, Schriftgrößen,
Farben etc. noch herum.
Mein Problem ist der footer.
Die Homepage habe ich mittels automaketemplate (autoparser) aufgebaut
und mir das Tutorial "Moderne Templateerstellung Teil 1" zu Rate
gezogen und etliche weitere Seiten im Netz.
der html Code lautet wie folgt:
<?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/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">
<ul>
<li id="menu_2">
<div id="menu2-level1-no">
</div>
<div id="menu2-level1-act">
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Die CSS Datei lautet wie folgt:
* {
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 */
html, body {
/* color: #5B6162; */
/* background-color: #5b6162; */
}
/**
* Regeln für allgemeine Elemente
*
* @section Überschriften
*/
h1 {
color: #9F0F00;
background-color: white;
font-size: 3em;
line-height: 1.1;
margin: .8em 0;
}
h2 {
color: #3C6331;
background-color: white;
font-size: 1.5em;
line-height: 1.1;
margin: .8em 0;
text-transform: uppercase;
}
/**
* @section Absätze
*/
p { margin: .8em 0; }
/**
* @section Farben der Links und Anker
*/
a:link {
color: #980c02;
background-color:transparent;
}
a:visited {
color: #980c02;
background-color: transparent;
}
a:hover, a:focus {
color: #FF7700;
background-color: transparent;
}
a:active {
color: white;
background-color: #980c02;
}
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}
LI#menu_1 {
width: 599;
float: right;
list-style: none;
margin: 0 0px 0 0;
}
LI#menu_1 DIV.menu1-level1-no {
width: 70px;
border-left: 1px solid #414748;
float: right;
margin: 0 0 0 0;
color: white;
background-color:transparent;
display: block;
padding: 110px 8px 8px 8px ;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
LI#menu_1 DIV.menu1-level1-no:hover {
background-color: grey;
color:white;
}
LI#menu_1 DIV.menu1-level1-act {
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,
#right ul strong {
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,
#right ul a:active,
#right ul strong {
color: white;
}
div#footer{
width:600px;
height: auto;
float:left;
}
#footer a_link, #footer a:visited {
display: block;
text-decoration: none;
padding: 0 1.2 0em 0.1em 1.2em;
}
Das TypoScript geht wie folgt:
#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/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
TD.all = 1
LI.all = 1
}
# Prefix all relative paths with this value:
relPathPrefix = fileadmin/
}
# 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
NO.allWrap = <div class="menu1-level1-no"> | </div>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="menu1-level1-act"> | </div>
}
# 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>
}
# 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.menu_1 < temp.menu_1
# 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
}
temp.footer = HMENU
temp.footer.excludeUidList =
temp.footer {
special = directory
special.value = 54
1 = TMENU
1.wrap = <div id="FOOTER">|</div>
1.NO.linkWrap = <div class="menu-separator">|</div><div
class="menu-item">|</div><div class="menu-separator">|</div>|*|
<div class="menu-item">|</div><div class="menu-separator">|</
div>|*|<div class="menu-item">|</div><div class="menu-
separator">|</div><div class="menu-item"><a href="#"
onClick="window.print();return false" onfocus="blurLink
(this);">Drucken</a></div><div class="menu-separator">|</
div><div class="menu-item"><a href="#BORDER" onfocus="blurLink
(this);">Top</a></div><div class="menu-separator">|</div>
}
# Default PAGE object:
page = PAGE
page.typeNum = 0
# Copying the content from TEMPLATE for <body>-section:
page.10 < temp.mainTemplate
page.10.marks.FOOTER = temp.footer
# Copying the content from TEMPLATE for <head>-section:
page.headerData.10 < temp.headTemplate
Ich habe mit dem footer schon so einiges angestellt. Es will aber
nicht klappen. Im Netz habe ich viele Bsp. zu den footern gefunden,
jedoch passen sie nicht zum autoparser. Genau wie auch dieser nicht
dazu passt. Es ist mir klar, das dieser falsch ist, habe es aber
dennoch stehen lassen. Ehrlich gesagt, kenne ich mich mit TypoScript
nicht so gut aus, so hätte ich es glaube ich schon längst
hinbekommen. Denke ich :?
Habt ihr für mich ein Tipp, wie ich das Problem lösen kann?
Vielleicht auch Tipps, was ich mit dem autoparser zu beachten habe,
denn nicht alle im Netzt gezeigten Lösungen funktioniert mit dem
Autoparser. Wieso?
Auf jedenfall bedanke ich mich jetzt schon mal bei euch für eure
mühen und wünsche allen noch ein besinnliches und frohes Weihnachtsfest.
Ps.: in der CSS Datei kann so ziemlich viel überflüssiges sein. Habe
mir noch nicht die Mühe gemacht, diese aufzuräumen und das
Überflüssige zu löschen. Fall ihr etwas unnötiges bemerken sollten,
wäre ich für jeden Hinweis dankbar.
Schöne Grüße
Kerem
More information about the TYPO3-german
mailing list