[Workshop] Typo3-Workshop Teil IV - Template, Fortsetzung - Seite 2

Borusse · 21.02.2006, 16:25

Hi Steffen,

mit der CSS sieht es ja schon besser aus.

Ich werde mir den 4. Teil jetzt noch ein paar mal durchlesen damit das
auch im Hirn hängen bleibt. Freue mich dann schon auf Teil 5.
Wielviel Teile sind eigentlich geplant wenn man fragen darf?
Das war die letzte Frage

Werde dann weiterhin als stiller Beobachter hier tätig sein.

Mallah · 21.02.2006, 17:00

Zitat:

Zitat von Borusse

Hi Steffen,

mit der CSS sieht es ja schon besser aus.

obwohl ich die site.css hochgeladen habe,

bekomme ich auch solch ein bild

....

oder mache ich mit dem css etwas falsch?

Borusse · 21.02.2006, 17:09

Hast du mal den Cache von Typo3 geleert?

Komisch, wir probieren es und sehen, das sich nichts verändert hat. Haben wir was falsch gemacht ?
Zur Sicherheit löschen wir das Cache, indem wir auf die beiden Buttons links klicken:

Mallah · 21.02.2006, 17:52

@Borusse, danke für deine hilfe, aber klappt trotzdem nicht leider,

habe auch cash gelöscht -> egal firefox oder iexplorer.. genau das obere bild..hier meine dateien..

Zitat:

page = PAGE
page {
#bodyTag = <body>
includeCSS {
file1 = fileadmin/css/site.css
}

10 = TEMPLATE
10 {
template = FILE
template.file = fileadmin/templates/template.html

workOnSubpart = DOKUMENT
marks {

INHALT < styles.content.get

LOGO =

FOOTER = TEXT
FOOTER.value = <center>Dies ist eine Site aus dem TP Typo3-Workshop - Februar 2006</center>

TOPMENU = HMENU
TOPMENU
{
special = directory
special.value = 36
1 = TMENU
1.wrap=<ul>|</ul>

1 = TMENU
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
<li><a href="#">Menüpunkt 3</a></li>
</ul>

1.NO = 1
1.NO.linkWrap = <li>|</li>

1.ACT = 1
1.ACT < .NO
1.ACT.doNotLinkIt = 1
1.ACT.allWrap = <li id=topnavi-aktiv">|</li>

}

LINKS = HMENU
LINKS {
special = directory
special.value = 35
entryLevel = 1

1 = TMENU
1.wrap=<ul>|</ul>

1.NO = 1
1.NO.ATagTitle.field = title
1.NO.linkWrap = <li>|</li>

1.ACT = 1
1.ACT < .NO
1.ACT.doNotLinkIt = 1
1.ACT.allWrap = <li id=leftnavi-aktiv">|</li>

2 = TMENU
2.noBlur = 1
2.wrap = <li><ul>|</ul></li>
2.noBlur = 1

2.NO = 1
2.NO.ATagTitle.field = title
2.NO.linkWrap = <li>|</li>

2.ACT = 1
2.ACT < .2.NO
2.ACT.doNotLinkIt = 1
2.ACT.allWrap = <li id=leftnavi-sub-aktiv">|</li>
}

}

}

}

meine template.html

Zitat:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="../css/site.css" media="screen,projection">
<title></title>

</head>

<body>

<div id="komplett">
<div id="header">###LOGO###</div>
<div id="menuline">###TOPMENU###</div>
<div id="left">###LINKS###</div>
<div id="content">###INHALT###</div>
<div id="footer">###FOOTER###</div>
</div>

</body>
</html>

http://192.168.0.102/quickstart-3.8....n/css/site.css

Zitat:

body {
text-align:center;
background:#fff;
}

#komplett {
margin:30px auto;
width:788px;
text-align:left;
}

#header {
height:70px;
background: green;
}
#menuline {
height:18px;
color: #fff;
background: blue;;
}
#left {
width:140px;
float:left;
background:#ffffcc;
}
#content {
float:left;
}
#footer {
clear:left;
background:#000;
color:#fff;
height:16px;
}

Borusse · 21.02.2006, 17:59

ha..... du hast doch gar nicht die Daten für die Menus eingetragen.

Füge das Ende mal in deine site.css datei und lade sie neu hoch:

Code:

body {
	text-align:center;
	background:#fff;
}

#komplett {
	margin:30px auto;
	width:788px;
	text-align:left;
}

#header {
	height:70px;
	background: green;
}
#menuline {
	height:18px;
	color: #fff;
	background: blue;
        font-family:Arial, sans-serif; font-size:10pt;
}
#left {
	width:140px;
	float:left;
	background:#ffffcc;
        font-family:Arial, sans-serif; font-size:10pt;
}
#content {
	float:left;
}
#footer {
	clear:left;
	background:#000;
	color:#fff;
	height:16px;
}


/* #### Menu ##################################################################################################### */

* {margin:0;padding:0;}
/* topmenu */
#menuline ul {list-style:none;}
#menuline ul li {display:inline;padding:2px 8px;}
#menuline ul li a {color:red;background:#000;padding:2px 4px}
#menuline ul li.topnavi-aktiv a {background:#fff;}

/* leftmenu */
#left ul {list-style:none;margin-top:8px;}
#left ul li {padding-left:6px;}
#left ul li ul {margin-top:0;}
#left ul li ul li {padding-left:12px;}				

/* ############################################################################################################## */

Mallah · 21.02.2006, 18:18

cool danke..hat geklappt.. bin fertig

mfg

Mallah

steffenk · 21.02.2006, 18:30

fein.

Wieviel Teile geplant sind ? Weiss noch nicht - halt solang, bis unsere Basic-Site steht

Mallah · 21.02.2006, 20:11

Zitat:

Zitat von St@eff.en

fein.

Wieviel Teile geplant sind ? Weiss noch nicht - halt solang, bis unsere Basic-Site steht

juhuuu :-)

steffenk · 22.02.2006, 01:12

jetzt muss ich doch noch was einflechten.

Bei genauer Betrachtung bin ich von einer falschen semantischen Verschachtelung ausgegangen.
Unser verschachtelte Menü sieht so aus:

Code:

<ul>
   <li>...</li>
   <li>...</li>
   <li>
    <ul>
       <li>...</li>
       <li>...</li>
    </ul>
    </li>
    <li>...</li>
</ul>

Das ist aber falsch, richtig wäre es so:

Code:

<ul>
   <li>...</li>
   <li>...
    <ul>
       <li>...</li>
       <li>...</li>
    </ul>
    </li>
    <li>...</li>
</ul>

Das heisst, die verschachtelte Liste befindet sich innerhalb eines "benutzten" li-Elements.

Das verlangt etwas Umstricken, vorallen brauchen wir einen neuen Zustand.
Wenn ein Element Unterseiten hat, so kann man den Zustand IFSUB nehmen. Wir zeigen die Unterseiten nur beim aktiven Element, also nehmen wir den Zustand ACTIFSUB

Schauen wir uns die neue Definition des linken Menüs an:

Code:

LINKS = HMENU
LINKS {
	special = directory
	special.value = 2
	entryLevel = 1
	
	1 = TMENU
	1.wrap= <ul>|</ul>
	1.noBlur = 1
	
	1.NO = 1
	1.NO.ATagTitle.field = title
	1.NO.linkWrap = <li>|</li>
	
	1.ACT = 1
	1.ACT < .NO
	#1.ACT.doNotLinkIt = 1
	1.ACT.linkWrap = <li id="leftnavi-aktiv">|</li> 
	
	1.ACTIFSUB < .ACT 
	1.ACTIFSUB = 1 
	1.ACTIFSUB.linkWrap = <li class="leftnavi-aktiv">|    
	
	2 < .1
	2.wrap = <ul>|</ul></li> 
	2.ACT.linkWrap = <li id="leftnavi-sub-aktiv">|</li> 

}

Wir sehen, das wir den Zustand ACTIFSUB vom ACT kopieren und nur anders wrappen, der li-tag bleibt hinten offen.
Den können bequem in der 2.Ebene wieder schliessen mit 2.wrap (also um die ganze 2.Ebene drumrum)

Wir sehen auch, das es verschiedene wrap-Methoden gibt. Wir werden später uns das noch genauer anschauen, in dem letzten Beispiel hab ich das etwas besser und konsequenter genutzt.

Es ist auch immer wieder schön, wie mir durch das erklären auch noch Unstimmigkeiten auffallen und ich hier endlich meine Menü-Wissenslücke schliessen kann

T:-)M · 22.02.2006, 01:38

... sorry aber es muss heissen:

special.value = 2

Gruß
T:-)M

steffenk · 22.02.2006, 01:52

sry, ist von meinem 2. setup - da ist es die 3

, ich änder es

Lamy · 22.02.2006, 18:28

So nun hats mich auch gepackt und hab mich mal registriert.

Ich verfolge nun auch schon ne weile diesen WorkShop und ich muss St@eff.en ein großes Lob aussprechen - ich danke dir für diesen super WorkShop!

Zuerst dachte ich mir, ob ich mich wirklich an TYPO3 rauntrauen sollte - aber dank der super Anleitung klappt bisher alles wie am schnürchen.

Momentan stehe ich nur etwas unschlüssig dar - da ich gleich mein Projekt richtig bauen will und nicht unbedingt dieses template wie hier beschrieben einbauen möchte, macht mir mein gedanke kopfzerbrechen. Am ende möchte ich das meine TYPO3 Seite so aussieht -> www.tuning-szene.com/v2/ <- (aber auch noch nicht fertig)
Aber momentan verstehe ich nur Bahnhof wie ichs anpacken soll.

steffenk · 22.02.2006, 18:32

Hi Lamy,

mach erst mal zum kennenlernen das mit dem hier angegebenen Template, dann siehst Du auch, wie es mit jedem anderen Template funktioniert - das ist beliebig austauschbar.
Die HTML-Vorlage wird nur mit den Markern versehen, und Typo füllt die dann aus.

Lamy · 22.02.2006, 20:40

ok - ich dachte nur das es vielleicht unsinnig ist einmal das eine zu machen und dann das was ich vor habe, denn wie ich mich kenne versteif ich mich auf das erste und komm dann gar nicht mehr klar

nundenn, werde ich erstmal das so machen wir du es hier beschreibst, bin echt mal gespannt wie es weitergeht

Minnemann · 22.02.2006, 23:42

Mein Topmenue wird nicht angezeigt? Die Seite sieht so aus, ist das ok?

page = PAGE
page {
#bodyTag = <body>
includeCSS {
file1 = fileadmin/css/site.css
}

10 = TEMPLATE
10 {
template = FILE
template.file = fileadmin/templates/template.html

workOnSubpart = DOKUMENT
marks{

INHALT < styles.content.get

LOGO =

FOOTER = TEXT
FOOTER.value = <center>Dies ist eine Site aus dem TP Typo3-Workshop - Februar 2006</center>

TOPMENU = HMENU
TOPMENU {
special = directory
special.value = 3
1 = TMENU
1.wrap=<ul>|</ul>
1.noBlur = 1

1.NO = 1
1.NO.ATagTitle.field = title
1.NO.linkWrap = <li>|</li>

1.ACT = 1
1.ACT < .NO
1.ACT.doNotLinkIt = 1
1.ACT.allWrap = <li id="topnavi-aktiv">|</li>
}

LINKS = HMENU
LINKS {
special = directory
special.value = 2
entryLevel = 1

1 = TMENU
1.wrap= <ul>|</ul>
1.noBlur = 1

1.NO = 1
1.NO.ATagTitle.field = title
1.NO.linkWrap = <li>|</li>

1.ACT = 1
1.ACT < .NO
#1.ACT.doNotLinkIt = 1
1.ACT.linkWrap = <li id="leftnavi-aktiv">|</li>

1.ACTIFSUB < .ACT
1.ACTIFSUB = 1
1.ACTIFSUB.linkWrap = <li class="leftnavi-aktiv">|

2 < .1
2.wrap = <ul>|</ul></li>
2.ACT.linkWrap = <li id="leftnavi-sub-aktiv">|</li>

}

}
}
}