Zum Inhalt springen

Problem mit CSS-designtem Template

Erstellt am 7. August 2004 · 29 Antworten · letzte Antwort am 14. August 2004 · Seite 1 von 2

Tags: Frage

jscholtysik ·

Hi,

ich habe mir ein HTML-Template gestaltet, das komplett ohne Frames oder Tabellen auskommt (auskommen soll), d.h. die gesamte Seite ist mit CSS gemacht.
Aber eines meiner Probleme ist folgendes :
Wenn ich auf meiner Seite http://www.scholtysik.net/cms_p/ den mit Typo3-generierten Menüpunkt "Links" auswähle, dann erscheinen die linke und rechte Spalte in voller Höhe, wenn ich jedoch z.B. "FAQ" auswähle, dann werden die linke und die rechte Seite gekürzt. Warum?
Bei Bedarf kann ich gerne die CSS-Datei sowie die Template-Datei posten...

Vielen Dank im Voraus.

jscholtysik ·

Es ist definitiv im IE6 so. Ich habe die aktuelle IE-Version incl. aller verfügbaren Updates drauf.

Das ist gerade die Frage, an was es liegen kann. Es kann der IE sein, Typo3, das Template, die CSS-Datei, keine Ahnung, was. Deshalb meine Frage.

doku ·
jscholtysik schrieb

Es ist definitiv im IE6 so.

wenn du meinst... 😉
dann ignorier halt diese zusätzliche information einfach... 😃

viel spaß noch

Unbekannter Benutzer ·

a) kann ich deinen fehler nicht nachvollziehen, sprich im firefox nicht reproduzierbar
b) sieht die seite bei meiner auflösung mal so richtig grotte aus ;-)
www.netzspiegel.de/t3ext/screenscho.gif

tomww ·

... aber ich kann das Problem mit Mozilla 1.6 unter Linux auch nicht nachstellen - sehe aber die gleiche verzogene Darstellung wie Daniel sie gepostet hat ...

Tom

P.S. Hast Du eine reine HTML-Darstellung (template) wie die Seite aussehen soll ?
Mach das mal und poste einen Link - dann können wir sehen ob nicht da schon viele Probleme liegen. Typo3 kann leider (noch ?) kein fehlerhaftes HTML reparieren ...

jscholtysik ·

Hi,

die Grafik ist nur ein Platzhalter, der nicht richtig dimensioniert ist. Deshalb ist der so verzerrt...
Ich habe mir gestern noch einmal das HTML-Template und die CSS-Datei angeschaut und einiges umgestellt. Jetzt zerreisst er mir zumindest nicht mehr das Layout oder kürzt mir die Menüs...

Das Layout schaut deshalb auf Euren Auflösungen so komisch aus, weil ich nur 150 Pixel links und rechts gemacht habe und in der Mitte auf 100% aufgefüllt wird.

Da das erstmal nur eine Testseite ist, in der ich die verschiedenen Extensions ausprobieren möchte, stimmen natürlich die Farben und das Layout nicht.

Aber vielleicht könnt Ihr mir bei meinem Problem mit der tt_poll rechts unten weiterhelfen. Warum werden keine Auswahlpunkte angezeigt und warum erhalte ich nach Klicken des Abstimmen-Buttons nur eine Fehlermeldung? Das passiert nur rechts. Nehme ich den Link Umfrage im Menü, zeigt er mir alles richtig in der Mitte an...

tomww ·

ich würde sagen, es ist trotzdem besser erst mal das Design so zu machen, dass vor lauter Fehler die Suche nach anderen Problemen nicht untergeht ...
(warum z.B. hast Du das Menu doppelt links und rechts ????

Das mit der Umfrage kann Dir vielleicht jemand von unserer Hellseher-Abteilung beantworten (aber die sind leider meistens sehr ausgebucht ;-) - also poste was Du hast, dann können wir uns das anschauen ...

Tom

doku ·

warum sollte ich mir das angucken?

du sagst ja dann doch wieder, es sei bei mir definitiv nicht so, wie es bei mir ist... 😉 8-)

doku ·
tomww schrieb

jemand von unserer Hellseher-Abteilung beantworten (aber die sind leider meistens sehr ausgebucht ;-)

hey, das is eigentlich mein spruch!
aber du hast ihn, zugegebenermaßen, sehr viel besser formuliert... :o 8-)

tomww ·
doku schrieb

hey, das is eigentlich mein spruch!
aber du hast ihn, zugegebenermaßen, sehr viel besser formuliert... :o 8-)

oh sorry, ich wusste nicht das es da copyright gibt ;-)
und ich glaub der passt bei vielen posts hier im Forum ...
und ätsch diesmal war ich eine Minute schneller ...n :p

Tom

jscholtysik ·

Hallo tomww, hallo doku,

@tomww: Vielen Dank für Dein Hilfeangebot.
@doku: Ich weiss nicht, wie Du Deinen IE konfiguriert hast, bei mir ist das Problem mit der Anzeige nun mal mit der alten CSS-Datei aufgetreten. Mit der neuen habe ich nun auch keine Probleme mehr. Ich wollte Deine Aussage nicht in Frage stellen. Also: Thema erledigt.

Bitte hängt Euch nicht am Design auf, das wichtigste ist für mich jetzt erst mal, daß ich herausfinde, wie alles zusammen funktioniert. Das zweite Menü rechts ist (war) ebenfalls nur eine Platzhalter, ich habe es jetzt mal durch den Marker ###NEWS### ersetzt, wenn es Euch stört...
"Ähnlichkeiten mit lebenden oder toten Homepages sind rein zufällig..." :-)

Zur Poll rechts unten: Vielleicht könnt Ihr ja mal Eure Hellseherabteilung die folgenden Dateien anschauen lassen?

Hier sind alle Dateien :

1. HTML-Template

<!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" xml:lang="en" lang="en" >
<head>
<title>CssCreator-->XHTML 1.0 Strict standard template </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="Anonymous28249.css" type="text/css" />
</head>
<body>
<!-- ###DOCUMENT_BODY### begin -->
<div id="pagewidth" >
<div id="logo" >
<div class="content"><img src="fileadmin/images/logo_entwurf_3b.gif" width="100%" height=100px align="left">
</div>
</div>
<div id="klickpfad" >
<div class="content">Sie befinden sich hier: ###KLICKPFAD###</div>
</div>
<div id="header" >
<div class="content">Menueleiste oben
<a href="#">Link</a>
| <a href="#">Link</a>
| <a href="#">Link</a>
| <a href="#">Link</a>
| <a href="#">Link</a> </div>
</div>
<div id="outer" >
<div id="inner">
<div id="leftcol" >
<div class="content"> ###NAVIGATION### </div>
</div>
<div id="maincol" >
<div class="content"> ###INHALT### </div>
</div>
<div id="rightcol" >
<div class="content"> ###NEWS### </div>
<div class="content"> ###POLL### </div>
</div>

<div class="clr"></div>
<!-- close inner and outer -->
</div>
</div>
<div id="footer" >
<div class="content">###LAST######USERONLINE###<br>(c) 2004 Joachim Scholtysik, heute ist ###DATUM###</div>
</div>
<div class="clr"></div>
</div>
<!-- ###DOCUMENT_BODY### end -->
</body>
</html>

2. Die CSS-Datei

html, body{
margin:0;
padding:0;
text-align:center;
}

#pagewidth{
width:100%;
text-align:left;
min-width: 500px;margin-left:auto;
margin-right:auto;

}

#logo{
height:100px;
width:100%;
text-align: center;
background-color:#EFF6F0;
}

#klickpfad{
height:15px;
width:100%;
background-color:#CFF6F6;
}

#header{
height:15px;
width:100%;
background-color:#EFF6F9;
}

#leftcol{
width:150px;
float:left;
position:relative;
margin-left:-150px;
margin-right:1px;
}

#outer{
border:solid white 0px;
/*/*/ border-left-width: 150px ; /* left column width. NN4 hack to hide borders */
border-left-color: #C6F6C0; /* left column colour */
border-left-style: solid;
/*/*/ border-right-width: 150px; /* right column width. NN4 hack to hide borders */
border-right-color: #C6F6C0; /* right column colour */
border-right-style: solid;
background-color: #C6F6F9; /* center column colour */
width: auto;
}

#rightcol{
/*/*/ width:150px; /* hack keeps NN4 right column right? */
float:right;
position:relative;
margin-right:-150px;
margin-left:1px;
}

#footer{
height:15px;
text-align: center;
font-size: 10px;
width:100%;
background-color:#EFF6F9;
}

#inner{margin:0; width:100%;}

#maincol{
float: left;
width: 100%;
position: relative;
margin: 0 -8px 0 -2px;
overflow: auto;
}

#outer>#inner { border-bottom: 1px solid #C6F6F9; }

.clr{clear:both;}

.content{padding:5px;} /*padding for content */

#header .content{padding-bottom:0;} /*padding bottom 0 to remove space in IE5 Mac*/

/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#outer{border-left:0;}

/*hide the right column when printing*/
#rightcol{display:none;}
#outer{border-right:0;}
}

3. Constants Root-Template

styles.content.LAST.label = Die Seite wurde zuletzt bearbeitet am:
styles.content.LAST.comment_auto =
styles.content.LAST.wrap = <div class="lastupdate"> | </div>
styles.content.LAST.format = l, F, j,Y

#Login
styles.content.loginform.pid = 54
styles.content.loginform.goodMess = Willkommen im geschützten Bereich !

#FAQ
plugin.faq.backPid = 56
plugin.faq.PIDItemDisplay = 59

# Activates Tip a Friend
plugin.tipafriend.color1 =
plugin.tipafriend.color2 =
plugin.tipafriend.color3 =
plugin.tipafriend.wrap1 = <font face="Verdana, Arial, Helvetica, sans-serif" size=2 color=black> | </font>
plugin.tipafriend.wrap2 = <font face="Verdana, Arial, Helvetica, sans-serif" size=1 color=black> | </font>

4. Setup Root-Template

plugin.tt_guest.postform.dataArray.20.type=*data[tt_guest][NEW][note]=textarea,38,10

# Default PAGE object:
page = PAGE
page.typeNum = 0

# Stylesheet
page.stylesheet = fileadmin/css/style.css

# HTML-Template
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/templates/template.html

#Vertikales Menü
marks.NAVIGATION = HMENU
marks.NAVIGATION.entrylevel = 0
marks.NAVIGATION.1 = TMENU
marks.NAVIGATION.1.NO {
linkWrap = <font face = "Arial" size="2">|<font><BR>
}

# Sprache der Seite
page.config.sys_language_uid = 1
page.config.language = de
page.config.locale_all = de_DE

# Bereich, in dem die Variablen stehen
workOnSubpart = DOCUMENT_BODY

# Klickpfad
marks.KLICKPFAD = HMENU
marks.KLICKPFAD {
special = rootline
special.range = 0|-1
1 = TMENU
1.target = _self
1.wrap = |
1.NO.linkWrap = | >>
}

#PAGE LAST UPDATE
marks.LAST = TEXT
marks.LAST {
data = page:lastUpdated
date = d.m.Y
wrap = Page zuletzt aktualisiert am:&nbsp; |
data = register : SYS_LASTCHANGED
if>
}

#Inhalt füllen
marks.INHALT = CONTENT
marks.INHALT < styles.content.get

#Datum anzeigen
marks.DATUM= COA
marks.DATUM {
10 = TEXT
10.data = date:U
10.strftime = %A, %e. %B %Y
}

#Spam-Schutz aktivieren
config.spamProtectEmailAddresses = 2
config.spamProtectEmailAddresses_atSubst = (at)

#Grafische Sitemap
tt_content.menu.20.2 < styles.sitemap.gs

#User Online
marks.USERONLINE =< plugin.tx_khusersonline_pi1

#Umfrage
marks.POLL < plugin.tt_poll

}

#AWStats
config.stat = 1
config.stat_apache = 1
config.stat_apache_logfile =mylog.txt

<a href="index.php?id=39&tipUrl=http://www.scholtysik.net/cms_p/
?###PAGE_UID###" alt="Tip A Friend About www.scholtysik.net">Tip a Friend</a>

5. Constants Ext. Template für Poll

# Targetangabe aus allen Links und Formularen entfernen
PAGE_TARGET =

plugin.tt_poll >
plugin.tt_poll {

pollOutputWidth = 250
beginBarImgFile = fileadmin/images/pollbar-begin.gif
mainBarImgFile = fileadmin/images/pollbar-main.gif
endBarImgFile = fileadmin/images/pollbar-end.gif

}

6. Setup Ext.-Template für Poll

plugin.tt_poll {
voteform.type = 28
code = VOTEFORM
}

7. Setup Ext.-Template für Poll-Unterseite "Ergebnis"

plugin.tt_poll.code = RESULT,SUBMITTEDVOTE

Wie schon gesagt, die Umfrage funktioniert, wenn ich sie über den linken Menüpunkt "Umfrage" aufrufe. Ich bekomme die Frage und die Auswahlmöglichkeiten und nach Drücken des Abstimmen-Buttons auch die Ergebnisseite.
Die Umfrage rechts bleibt unvollständig.

Vielen Dank im Voraus für Eure Hilfe.

Unbekannter Benutzer ·

weisst du, es ist für alle beteiligten einfacher wenn du mal strukturiert vorgehen würdest. als reihenfolge würde ich empfehlen

1. design fertig machen (dann kann man leichter fehler erkennnen als in so einem wirrwar)
2. wenn das design steht, die menus komplett fertig machen
3. den content fertig machen
4. die plugins einrichten

bei t3 verläuft das alles eher konventionell, leider noch kein extreme typo3ing (vom programmieren entliehene technik)
;-)

jscholtysik ·

Hallo,

@Daniel_S: Du brauchst nicht den großen Macker raushängen lassen! Du hast auch mal klein angefangen, oder? Ich stehe ganz am Anfang und benötige ein bißchen Hilfe, um weiterzukommen. Wenn Du keinen Bock hast, weiterzuhelfen, dann lass es sein und verabschiede Dich bitte aus diesem Thread.
Wo soll ein Wirrwarr sein? Ich habe nur angefangen, ein paar Marker zu füllen, mehr nicht. Welches Design ich FÜR DIE TESTPHASE verwende, lass bitte meine Sorge sein. Ich wollte ein dreispaltiges HTML-Template mit CSS-Einbindung verwenden, das ich nun habe. Ohne Tabellen, ohne Frames! Ob da jetzt in der Menüleiste oben endgültige Links oder nur Platzhalter drin sind, ist doch sowas von egal... Da ich wie schon gesagt, ganz am Anfang stehe, kann es schon sein, daß die Contants- und Setup-Eingaben noch ein bißchen laienhaft aussehen. Aber mit zunehmender Dauer wird sich da bestimmt ein besserer Stil ergeben. Alles mit der Zeit!
Die Extensions habe ich jetzt nur in die Homepage eingebunden, aber nicht 100%ig konfiguriert. Das kann ich später auch noch machen. Mir geht es jetzt nur mal darum, Extensions überhaupt zum Laufen zu bringen und hier speziell NUR um das Poll-Problem.

@tomww: Nein, ich habe eine Unterseite "Umfrage" angelegt und für diese Unterseite das Ext.-Template angelegt. Dann habe ich eine Unter-Unterseite "Ergebnis" angelegt und auch hierfür ein Ext.-Template.

Du kannst gerne mal Zugriff auf mein Backend haben, wenn Du Interesse hast.

Unbekannter Benutzer ·

immer mal locker bleiben!
habe nur gesagt, dass dich strukturiertes arbeiten hier bedeutend weiter bringt, in unvollendeten sachen rumschrauben ist nicht das wahre, da ein fehler ein dutzend andere bedingen kann, deshalb ist es sinnvoll, wenn man erstmal die basics fertig macht.
natürlich ist DEINE Seite komplett DEINE Sache, allerdings würde ich dich dann auch bitten DEINE Probleme für DICH zu behalten ;-). ich bin der letzte, der sich hier für den oberguru hält, aber wie gesagt, n tipp wie das arbeiten mit t3 sinnvoll ist traue ich mir noch zu.

--> so i´m out

schönen tach auch :-)

jscholtysik ·

Das optisch-technische Design (Anordnung der Marker, Aufteilung der CSS-Layer) ist mir halt vorerst mal wichtiger als irgendwelche Farbzuordnungen. Da ich leider nicht weiß, wie z.B. mein zukünftiges Logo 100% aussehen wird, kann ich leider auch nicht festlegen, wie die restlichen Teile farblich gestaltet werden. Deshalb habe ich erst mal "zufällige" Farbwerte verwendet, die ich später immer noch ändern kann, nur um mal Abstufungen der einzelnen Bereiche auf der Seite zu haben.

Ich habe es bisher bei anderen CMS-Systemen immer ein klein wenig anders gemacht:

Der Mitarbeiter ist zu mir gekommen und sagte, er möchte dieses und jenes auf der Seite haben, d.h. der Contentwunsch war an erster Stelle.
Dann überlege ich mir, wie und wo auf der Seite ich das am besten umsetzen kann -->Design + evtl. Plugin
Zum Schluß präsentiere ich mein Design und erkläre dem Mitarbeiter, wie er den Content einpflegen kann. Änderungswünsche können dann auch noch berücksichtigt werden.

Mit dieser Arbeitsweise bin ich bisher immer gut gefahren. Warum eine gut funktionierende Arbeitsweise ändern?

Viele Grüße.

tomww ·

Hallo jscholtysik,
ich muss Daniel schon recht geben was die Vorgehensweise anbelangt. Es ist gut erstmal eine Struktur im HTML zu haben (egal ob Farben und Logos stimmen) und dann im Detail zu arbeiten - zumal Deine erste Frage gleich um die Darstellung ging und das bei einer eher chaotisch aussehenden Seite ...

Nun aber zu Deinem Problem. Ich denke, dass der Poll auf der Startseite nicht geht, weil da das Extension Template nicht eingebunden ist. Scroll mal auf dem Startseiten template nach unten bis irgendwo weitere Templates eingebunden werden können und teste dann nochmals ...

Tom

jscholtysik ·

@tomww:

Ich verstehe gar nicht, was Du gegen das Layout hast? Was soll chaotisch sein? Kannst Du mir mal nen Tip geben, was Du genau meinst?

Es ist alles genau da, wo ich es haben will:

Logo
Klickpfad
Menüleiste horizontal
Dann drei Spalten:
Menü links
Content Mitte
News und Umfrage rechts
Zum Schluß noch Last Update und Copyright-Vermerk

Das ist doch die Struktur! und jetzt will ich mich an die Details machen...

Was sollte ich Deiner Meinung nach noch ändern?

linksblinker ·

Hallo!

Wenn Du das "Design" erstmal zum testen nutzt, braucht man sich dazu ja nicht sonderlich auslassen. Daniel_S hat da nämlich schon recht. Man sollte da einen Schritt nach dem anderen machen.

Sofern die dass CSS-Layout nicht wie gewünscht funzt, würde ich die Geschichte erstmal ohne Typo3 erstellen und austesten. Wenn es wie gewünscht läuft hochladen und dann die Marker einsezten und die Module nach und nach einbinden und testen.

Zu Deinem Problem mit der Umfrage: Beim Überfliegen des Typoscript-Codes ist mir nicht ins Auge gefallen, dass auf die UID verwiesen wird, unter der Du die Umfrage angelegt hast. Nach der Anleitung müsste die UID ja angegeben werden:

Usage from tt_content.records

This would be the normal way to display the poll. This is used in the static_template 'plugin.tt_poll'.
Usage from another object

If you need a poll for another record and a link to, it should be done through TypoScript where you simply insert your poll object as a content element in a COA or whatever renders your element.

Example:

= COA

10 = LOAD_REGISTER

10.tt_whatever_uid.field = uid

20 = < plugin.tt_poll

20.pollTable = tt_whatever

20.pollTableUid.data = register : tt_whatever_uid

The record field tt_poll.linkrecord has to be set with a 'record link':

tt_whatever_uid

Example:

tt_whatever_23

Da der Verweis fehlt, kann Typo keine Einträge in die Umfrage reinbringen und stellt eine leeres Formular dar. Dass dann beim Absenden des Formulars Fehlermeldungen kommen ist die logische Folge.

Gruß

Thomas