Zum Inhalt springen

Menü eines HTML Templates bestellen

Erstellt am 7. Juli 2008 · 14 Antworten · letzte Antwort am 7. Juli 2008

Tags: Frage

André Breunig ·

Hallo liebe Leutz...

Ich möchte eine bestehende Webseite in Typo3 umsetzen und habe ein kleines Problem mit dem TypoScript für die Menüs. Auserdem werden Hintergrundbilder die in einer CSS Datei definiert sind nicht angezeigt.

Kann mir bitte jemand helfen... Wäre dringend!

MfG André

SLAng ·

Ganz einfach, da ist schwarze Magie am Werke...

Ne im Ernst...
Ohne das du Code postest wird eine Hilfe schwer werden.

btw. Willkommen im Forum

André Breunig ·

Hier der HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Auto Peter</title>
<link href="_styles/styles.css" rel="stylesheet" type="text/css" />
<link rel="SHORTCUT ICON" href="_images/icon.png" type="image/x-icon">
</head>
<body text="#000000" bgcolor="#7c7c7c">
<!-- ###DOCUMENT_BODY### start -->
<div id="rahmen">
<div id="head">
<img src="_images/head.png">
</div>
<!-- ###NAVIOBEN### start-->
<ul id="navi-oben">
<li id="button-oben"><a href="index.html"><span>&nbsp;&nbsp;&nbsp;&nbsp;Home</span></a></li>
<li id="button-oben"><a href="kontakt.html"><span>&nbsp;&nbsp;&nbsp;Kontakt</span></a></li>
<li id="button-oben"><a href="anfahrt.html"><span>&nbsp;&nbsp;Anfahrt</span></a></li>
<li id="button-oben"><a href="impressum.html"><span>Impressum</span></a></li>
<li id="button-oben"><a href="links.html"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Links</span></a></li>
</ul>
<!-- ###NAVIOBEN### stop -->

<!-- ###NAVILINKS### start -->
<ul id="navi-links">
<li id="button-links"><a href="autovermietung.html"><span>Autovermietung</span></a></li>
<li id="button-links"><a href="abschleppdienst.html"><span>Abschleppdienst</span></a></li>
<li id="button-links"><a href="autoverkauf.html"><span>Autoverkauf</span></a></li>
<li id="button-links"><a href="autoankauf.html"><span>Autoankauf</span></li>
<li id="button-links"><a href="fahrzeugteile.html"><span>Fahrzeugteile</span></a></li>
<li id="button-links"><a href="http://www.anhaengercenter-lauchroeden.de/"><span>Anhängercenter</span></a></li>
</ul>
<!-- ###NAVILINKS### stop -->

<div id="text-content1">
<!-- ###CONTENTMAIN### start -->
<h1>Autovermietung</h1>
<img class="img-content" src="_images/autovermietung.jpg">

<div class="text">
Wir bieten unseren Kunden ein großes Spektrum
an gepflegten Mietwagen in allen Klassen. Die
günstigen Preise und unser Service sprechen für
sich.<br/>
<br/>

<h1>Tel.: 036927 / 916 944<br>
Fax: 036927 / 916 945</h1>
</div>
<!-- ###CONTENTMAIN### stop -->
</div>

<div id="text-content2">
<!-- ###CONTENTSUB### start -->
<h2>Angebot der Woche</h2>
<!-- ###CONTENTSUB### stop -->
</div>
</div>
<!-- ###DOCUMENT_BODY### stop-->
</body>
</html>

und hier ist der CSS Code:

a {
color: #ffec00;
font-family:verdana;
font-size:12pt;
font-weight:bold;
text-decoration: none;
}
a:hover {
color: #da251c;
font-family:verdana;
font-size:12pt;
font-weight:bold;
}

img {
border:0;}

h1 {
font-family:verdana;
font-size:20pt;
color:#ffec00;
}

h2{
font-family:verdana;
font-size:12pt;
font-weight:bold;
color:#ffec00;
}

ul{
list-style:none;
}

#button-oben{
float:left;
background-image: url(../_images/button_oben.png);
padding-left:30px;
padding-top:10px;
height:27px;
width:128px;
}

#button-links{
float:left;
background-image: url(../_images/button-links.png);
padding-left:25px;
padding-top:6px;
height:31px;
width:183px;
}

#rahmen{
background-image: url(../_images/hg.jpg);
background-repeat:no-repeat;
width:1024px;
height:768px;
margin-left: auto;
margin-right: auto;
border:#000000 solid 1px;
text-decoration: none;
}

#head {
position:absolute;
width:1024px;
height:164px;
}

#navi-oben {
position:absolute;
margin-top:130px;
margin-left:194px;
color:#ffec00;
width:790px;
height:37px;
}

#navi-links {
position:absolute;
margin-top:260px;
margin-left:-40px;
width:208px;
height:330px;
}

.img-content {
position:absolute;
width:367px;
height:275px;
}

.img-angebot {
position:absolute;
width:200px;
height:150px;
}

.text {
position:absolute;
width:367px;
height:275px;
top: 360px;
}

#text-content1 {
position:absolute;
margin-left:290px;
margin-top:193px;
width:440px;
height:530px;
font-family:verdana;
font-size:10pt;
color:#ffec00;
}

#text-content2 {
position:absolute;
margin-left:748px;
margin-top:205px;
padding-left:40px;
width:210px;
height:519px;
font-family:verdana;
font-size:10pt;
color:#ffec00;
border-left:solid 1px #ffec00;
}

.angebote {
position:absolute;
width:200px;
border: 1px solid #ffec00;
}

SLAng ·

Also so schnell nachzufragen bringt nicht und ist eher lässtig. Du hast deinen Code gepostet... jetzt lass erstmal die Leute drüberschauen und wenn jemand eine Antwort für dich hat wird dieser schon posten.

Also dein HTML ist jetzt klar... hast du denn auch eigenen Code für das Menü schon angefangen?

André Breunig ·

Jo... hab es mit dem von dem Video2Brain Lernvideo versucht, der muss aber sicherlich für mein template angepasst werden, weiss aber nicht wie...

André Breunig ·

Das TypoScript dazu war:

# Default PAGE object:
page = PAGE
page.stylesheet = styles.css
page.10. = TEMPLATE
page.10. = workOnSubpart = DOCUMENT_BODY
page.10.template = FILE
page.10.template.file = index.html

page.10.subparts.NAVIOBEN = HMENU
page.10.subparts.NAVIOBEN {
wrap = <ul> | </ul>
1 = TMENU
1.NO.allWrap = <li> | </li>
1.NO.ATagBeforeWrap = 1
1.NO.linkWrap = <span> | </span>
}

SLAng ·

1. Verwende bitte in Zukunft die angebotenen BB-Codes zum posten von Code. Das erhöht immens die Übersicht.

2. Zu den Hintergrundbilder aus deiner CSS:

Liegen die Bilder wirklich nicht im Ordner fileadmin? Du schreibst ja ../_images...

also wenn du relative Pfade nehmen willst, dann fehlt wenns im Fileadmin liegt ganz sicher der Ordner fileadmin, also wenigstens dann ../fileadmin/_images/...

Sicher ist aber das der Pfad für die Grafiken falsch ist, denn sonst würde es ja funktionieren.
Versuch folgendes:
Ruf die Datei direkt im Browser auf.
Schreib den absoluten Pfad in die Datei.

3. Zu deinem Menü und TS:

Ich wundere mich das überhaupt etwas angezeigt wird, denn da wimmelt es nur so von Fehlern. Hinter 10. = kommt kein Punkt. Also 10 =
Bist du sicher das die Dateien styles.css und index.html auch nicht in deinem fileadmin Ordner liegen? Wenn doch, ist auch dieser Pfad falsch. Dann müsste es schon wenigstens fileadmin/styles.css und fileadmin/index.html heißen.

Mit allWarp werden keine List-Menüs gebaut, sondern mit wrapItemAndSub

id's im HTML dürfen nur einmal auf einer Seite vorkommen. Das sind einzigartige Definitionen. In deinem Menü musst du also statt mit id mit class arbeiten.

Was der zusätzliche span-Tag um den Menüpunkt soll ist etwas verwirrend, denn das was da drinn steht kannst du auch alles in den A-Tag schreiben.
Diesem kannst du mit ATagParams = class="Deine_Class" eine CSS-Class zuweisen. ATagBeforeWrap ist also über und der linkWrap dann jawohl auch.

Für die Menüzustande kannst du dann ACT usw verwenden.

Das hilft dir:
http://www.mittwald.de/dokumentation
#65143
https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Hmenu/Tmenu/Tmenuitem.html
https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Hmenu/Tmenu/Index.html#confval-menu-tmenu-item-states

Also so könnte es dann aussehen:

# Default PAGE object:
page = PAGE
page {
	stylesheet = styles.css
	10 = TEMPLATE
	10 {
		template = FILE
		template.file = index.html
		workOnSubpart = DOCUMENT_BODY
		subparts {
			NAVIOBEN = HMENU
			NAVIOBEN {
				wrap = <ul>|</ul>
				1 = TMENU
				1 {
					NO = 1
					NO {
						wrapItemAndSub = <li class="button-oben">|</li>
						ATagParams = class="Deine_Class"
					}
				}
			}
		}
	}
}
André Breunig ·

Ich habe eben gelesen das es ein Extention gibt das dass TyopScript für HTML Templates selber konfiguriert (automaketemplate_0.1.0.t3x). Hat jemand Erfahrungen
damit und wie funktioniert das wenn die Extention installiert ist?

SLAng ·

Hey klasse...
Sich ohne Ahnung von HTML,CSS und TS gleich mit sowas beschäftigen macht viel Sinn.

An deiner Stelle würde ich die Ext unbedingt verwenden. mM

André Breunig ·

Also ich habe schon Kenntnisse in HTML und CSS, auch Grundkenntnisse in PHP aber versuche gerade in Typo3 meine erste Seite zu bauen und han von TypoScript keinen Plan.

Wie verwende ich dann die Extention?

SLAng ·

Einfach auch mal selbst bei google oder im Forum suchen und nicht alle halbe bis dreiviertelstunde hier posten. Man liest deine Beiträge auch ohne das du ständig daran erinnerst. Das nervt.