hallo zusammen,
ich hab ein laufendes Projekt(Typo3 4.0.1 - neustes Update), in dem ich 2 Probleme habe die ich einfach nicht gelöst bekomm und so beim googlen nix passendes gefunden habe.
Die HTML-Vorlage bezieht sich auf 3 css-dateien in denen ich das aussehen(normal, active, mouseover) sowie layout und positionen der späteren contentelemente,bilder, header etc bestimme.
Weil die Seite soll Barrierefrei sein, sprich arbeite ich ohne Tabellen im html-code, sonderl läuft alles über stylesheets.
Ich lass die html-vorlage über das automaketemplate einlesen.Es klappt alles wunderbar, der header, bilder etc werden an die richtige position gesetzt, nur zeigen die browser(egal welcher) die standardformatierung für die links,mouseover etc an und nicht die die ich in der css-datei angegeben habe.
Hier der folgende code des templates:
# Configuring the Auto-Parser:
plugin.tx_automaketemplate_pi1 {
# Read the template file:
content = FILE
content.file = fileadmin/gladzette/template1.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
TD.all = 1
#DIV.all = 1
}
# Prefix all relative paths with this value:
relPathPrefix = fileadmin/gladzette/
}
#Navigation cObjekt
temp.NAVIGATION = HMENU
temp.NAVIGATION {
entryLevel = 1
special = directory
special.value = 124
1 = TMENU
1.NO = 1
1.NO.allWrap =
<div class="navi">|</div>
1.ACT = 1
1.ACT.allWrap = <div class="navi_act">|</div>
1.RO < 1.ACT
}
#Krümmelpfad Objekt
temp.BREADCRUMB = TEXT
temp.BREADCRUMB.data = date:d:m:y
temp.BERICHT = CONTENT
temp.BERICHT {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0
[b]???[/b]
}
# 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 ###NAVIGATION### subpart with some example content:
subparts.NAVIGATION < temp.NAVIGATION
subparts.BREADCRUMB < temp.BREADCRUMB
subparts.AKTUELLES < styles.content.getLeft
subparts.BERICHT < temp.BERICHT
}
# 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
}
# Main TEMPLATE cObject for the content
temp.headTemplateCA = TEMPLATE
temp.headTemplateCA {
workOnSubpart = DOCUMENT_HEADER
}
# Default PAGE object:
page = PAGE
page.typeNum = 0
#Kopiert von dem TEMPLATE für die <body>-section:
page.10 < temp.mainTemplate
page.headerData.10 < temp.headTemplate
[/b]
in der Klasse navi steht:
.navi{
text-decoration:none;
color:#64B4DC;
font-size:12px;
text-align:left;
}
und in der navi_act steht:
.navi_act{
color:#FF0000;
text-decoration:none;
font-weight:bold;
font-size:18px;
}
Diese einstellungen übernimmt typo3 nicht!Liegt es an dem automaketemplate?
Weil wenn ich die html-seite so öfnne funktionieren die mouseover-effekte. #angry#
2) Wie kann ich mehrere Contentelemente anzeigen lassen, ähnlich wie auf spiegel.de,
also das z.b. linke spalte navigation ist und in der mitte mehrere newsberichte stehen und rechte spalte einlogformulare etc? #paralyzed#
Danke für eure bemühungen mir zu helfen.
mfg
Hoffe die erklärung obe ist verständlich, wenn nicht dann fragt.
Hab es mittlerweile mit TemplaVoila versucht, nur da wird nicht das dynmasche Menü, geschweige denn diedummy-inhalte abgezeigt. Die Bilder schon. hier mal meine html-vorlage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/positions.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />
</head>
<body style="margin:0 0;">
<div id="site">
<!--Headbereich-->
<div id="head">
<div id="werbeanzeige">
<!-- ###WERBEANZEIGE### begin -->
<a href="http://www.google.de"><img src="images/anzeige2.gif" alt="ANZEIGE" border="0" /></a>
<!-- ###WERBEANZEIGE### end -->
</div><br />
<div id="headline"><img src="images/headline.gif" alt="" /></div><br />
<div id="breadcrumb">
<!-- ###BREADCRUMB### bgin -->
<!-- ###BREADCRUMB### end -->
</div><br />
</div><br />
<!--linke Spalte -->
<div id="left">
<br />
<div id="navibild"><a href=""><img src="images/Home.gif" alt="Startseite" border="0" /></a></div>
<div id="navigation">
<!--###NAVIGATION###begin-->
<a href="fileadmin/gladzette.de/#" class="navi">Bericht</a><br />
<a href="fileadmin/gladzette.de/#" class="navi">Hintergrund</a><br />
<a href="fileadmin/gladzette.de/#" class="navi">Politik</a><br />
<a href="fileadmin/gladzette.de/#" class="navi">Menschen</a><br />
<a href="fileadmin/gladzette.de/#" class="navi">Sport</a><br />
<a href="fileadmin/gladzette.de/#" class="navi">Kultur</a><br />
<a href="fileadmin/gladzette.de/#" class="navi">Veranstaltungen</a><br />
<a href="fileadmin/gladzette.de/#" class="navi">Kleinanzeigen</a><br />
<a href="fileadmin/gladzette.de/#" class="navi">Die letzte Seite</a><br />
<a href="fileadmin/gladzette.de/#" class="navi">Fotos</a><br />
<a href="fileadmin/gladzette.de/#" class="navi">Aktionen</a><br />
<a href="fileadmin/gladzette.de/#" class="navi">Archiv</a><br />
<a href="fileadmin/gladzette.de/#" class="navi">Impressum</a><br />
<!--###NAVIGATION###end-->
</div>
<br />
<div id="navibild"><img src="images/Aktuelles.gif" alt="Aktuelles" border="0" /></div>
<div id="aktuelles">
<div class="boxtext">
<!-- ###AKTUELLES### begin -->
<!-- ###AKTUELLES### end -->
</div>
</div>
<br />
</div>
<!--mittlere Spalte -->
<div id="center">
<div id="content">
<br />
<div id="artikelbild"><img src="images/Bericht_small.gif" alt="Bericht" border="0" /></div>
<div id="bericht">
<!--###BERICHT###begin-->
<!--###BERICHT###end-->
</div>
</div>
<div id="content">
<br />
<div id="artikelbild"><img src="images/Hintergrund_small.gif" alt="Hintergrund" border="0" /></div>
<div id="hintergrund">
<!--###HINTERGRUND### begin-->
<!-- ###HINTERGRUND### end -->
</div>
</div>
<div id="content">
<br />
<div id="artikelbild"><img src="images/Politik_small.gif" alt="Politik" border="0" /></div>
<div id="politik">
<!--###POLITIK### begin-->
<!-- ###POLITK### end -->
</div>
</div>
<div id="content">
<br />
<div id="artikelbild"><img src="images/Menschen_small.gif" alt="Politik" border="0" /></div>
<div id="menschen">
<!--###MENSCHEN### begin-->
<!-- ###MENSCHEN### end -->
</div>
</div><br />
<div id="content">
<br />
<div id="artikelbild"><img src="images/Sport_small.gif" alt="Politik" border="0" /></div>
<div id="sport">
<!--###SPORT### begin-->
<!-- ###SPORT### end -->
</div>
</div>
<div id="content">
<br />
<div id="artikelbild"><img src="images/Kultur_small.gif" alt="Politik" border="0" /></div>
<div id="kultur">
<!--###KULTUR### begin-->
<!-- ###KULTUR### end -->
</div>
</div><br />
<div id="content">
<br />
<div id="artikelbild"><img src="images/DieletzteSeite_small.gif" alt="Politik" border="0" /></div>
<div id="dieletzteseite">
<!--###DIELETZTESEITE### begin-->
<!-- ###DIELETZTESEITE### end -->
</div>
</div>
<div id="content">
<br />
<div id="artikelbild"><img src="images/Veranstaltungen_small.gif" alt="Politik" border="0" /></div>
<div id="veranstaltungen">
<!--###VERANSTALTUNGEN### begin-->
<!-- ###VERANSTALTUNGEN### end -->
</div>
</div><br />
<div id="content">
<br />
<div id="artikelbild"><img src="images/Aktionen_small.gif" alt="Politik" border="0" /></div>
<div id="aktionen">
<!--###AKTIONEN### begin-->
<!-- ###AKTIONEN### end -->
</div>
</div>
<div id="content">
<br />
<div id="artikelbild"><img src="images/Kleinanzeigen_small.gif" alt="Politik" border="0" /></div>
<div id="kleinanzeigen">
<!--###KLEINANZEIGEN### begin-->
<!-- ###KLEINANZEIGEN### end -->
</div>
</div><br />
</div>
<br />
<div id="right">
<br />
<div id="funktionsbild"><img src="images/Forum.gif" alt="Forum" border="0" /></div>
<div id="forum">
<!-- ###FORUM### begin -->
<!-- ###FORUM### end -->
</div>
<br />
<div id="funktionsbild"><img src="images/Suchen.gif" alt="Suchen" border="0" /></div>
<div id="suchen">
<!-- ###SUCHEN### begin -->
<!-- ###SUCHEN### end -->
</div><br />
<div id="funktionsbild"><img src="images/Interview.gif" alt="Interview" border="0" /></div>
<div id="interview">
<!-- ###INTERVIEW### begin -->
<!-- ###INTERVIEW### end -->
</div>
</div>
<div id="rand">
<div id="werbeanzeige2">
<!-- ###WERBEANZEIGE2### begin -->
<a href="http://www.wikipedia.de"><img src="images/anzeige1.gif" alt="ANZEIGE" border="0" /></a>
<!-- ###WERBEANZEIGE2### end -->
</div><br />
</div>
</div>
</body>
</html>
Hier das Template dazu, wie man inhalte anlegt wie man die elemente in dem viola anlegt, sollte doch klar sein.wüßte nicht was ich da groß einstellen muss oder hat da jemand ein tipp?Das Template dazu:
lib.menue = HMENU
lib.menue.entryLevel = 1
lib.menue.special = directory
lib.menu.special.value = 124
lib.menue.1 = TMENU
lib.menue.1 {
NO = 1
NO.allWrap = <div class="navi">|</div>
NO.stdWrap.htmlSpecialChars = 1
ACT = 1
ACT.stdWrap.htmlSpecialsChars = 1
ACT.allWrap = <div class="navi_act">|</div>
RO = 1
RO < ACT
}
# Default PAGE object:
page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page
Hi,
auf die Frage mit dem CSS könnte vllt. helfen
page.stylesheet = fileadmin/template/deineigenes.css
?
VG
Peter
Benutz ruhig wieder automaketemplate, daran liegts nicht
Änder mal dein CSS folgendermaßen:
div.navi a{
text-decoration:none;
color:#64B4DC;
font-size:12px;
text-align:left;
}
und in der navi_act steht:
div.navi_act a{
color:#FF0000;
text-decoration:none;
font-weight:bold;
font-size:18px;
}
Allerdings sehe ich schon an dem was du gepostet hast, das es Probleme mit der Barrierefreiheit geben wird... Du setzt feste Schriftgrößen und deine Bilder haben auch keine alt-Attribute und deine Links keine Title-Attribute. Das sind u.a. wichtige Sachen bei Barrierefreiheit.
Grüße
Christian
hallo,
danke für dein tipp mit dem css, das funktioniert jetzt, aber wie ist der Befehl für den Mouseover, weil ich möchte den gleichen Effekt für Mouseover wie für den aktiven Zustand.Eigentlich muss ich den code so erweitern:
1.RO = 1
1.RO.linkWrap = <div class="navi_act">|</div>
Leider funkt das nciht oder gibts da ein anderen TS-Befehl für?
Übrigens das mit den Contentelementen hat sich erledingt, mit TemplaVoila ist das jetzt sehr einfach umzusetzen.Also ist das schon mal erledigt, wenn mir einer den mouseovereffekt verrät #giggle#
RO funktioniert nur bei GMENU, bei nem TMENU musst du in dein CSS dann folgendes schreiben:
div.navi_act a:hover{
color:#FF0000;
text-decoration:none;
font-weight:bold;
font-size:18px;
}
Kann dir nur raten dich intensiver mit CSS zu beschäftigen.
ja danke dafür, aber die CSS-Formatierung funktioniert so ohne typo3 einwandfrei.wußte nicht das man in CSS einiges umschreiben muss.
Weil dann liegt es auch daran, das wenn ich in css, dann
a:link, a:visited, a:active {
.....}
a:hover{
.....}
einfüge, dann klappt es nicht mehr, wird dann woll vom a-tag oder so überschrieben