CSS-Problem

Hallo Thorsten,

erst einmal vielen Dank für Deine Antwort und Hilfestellung. Gerade am Anfang klappt trotz Bücher und Anleitungen leider nicht immer alles einwandfrei...

Ich halte es aber für empfehlenswert die Classen beizubehalten und diese je nach Bedarf in Deinem Stylesheet zu definieren (SelfHTML!).

So in etwa hatte ich mir das auch vorgestellt ;-) CSS ist kein Problem, nur die Funktion von typo3 macht mir Probleme...

Das Einbinden von Styles in den Dokumentenkopf über Typoscript wird nur Deine Seiten vollmüllen und schwergängig machen, da alle Klassen auf allen Seiten eingebunden werden. (Auch manche Extensions machen dies... icon_rolleyes.gif )

Ich hatte zuerst versucht, die css-Datei normal über die HTML-Vorlage einzubinden.

Sobald ich jedoch den Inhalt im Body-Tag durch einen Subpart einschließe (z.B. ###DOCUMENT###), wird die gesamte HTML-Datei bei der Ausgabe durch typo3 umgekrempelt.

Von meiner Ursprungs-HTML-Datei bleibt im Header nix mehr erhalten, d.h. der Verweis zur CSS-Datei ist weg. Im Body setzt typo3 korrekter Weise den Inhalt aus der Datenbank ein. Mein jetziger Code lautet:

#Sprachdefinition

config.sys_language_uid = 0
config.language = de
config.locale_all = de_DE

config.linkVars = L

[globalVar = GP:L = 0]
  config.sys_language_uid = 0
  config.language = de
  config.locale_all = de_DE

[globalVar = GP:L = 1]
  config.sys_language_uid = 1
  config.language = en
  config.locale_all = english
[GLOBAL] 

config.linkVars = L



# Default PAGE object:
seite = PAGE
seite.stylesheet = fileadmin/template_data/ansicht.css
seite.typeNum = 0
seite.10=TEMPLATE
seite.10 {
  template=FILE
  template.file=fileadmin/template_data/index.html
  workOnSubpart = DOKUMENT
  marks.INHALT < styles.content.get

  marks.MENUE = HMENU
  marks.MENUE.1 = TMENU
  marks.MENUE.1.NO {
    allWrap = <div id="sub-nav-1-no"> | </div><br>
  }

  marks.MENUE.1.ACT = 1
  marks.MENUE.1.ACT {
    allWrap = <div id="sub-nav-1-act"> | </div><br>
  }

  marks.MENUE = HMENU
  marks.MENUE.2 = TMENU
  marks.MENUE.2.NO {
    allWrap = <div id="sub-nav-2-no"> | </div><br>
  }

  marks.MENUE.2.ACT = 1
  marks.MENUE.2.ACT {
    allWrap = <div id="sub-nav-2-act"> | </div><br>
  }

  marks.SPRACHE = PHP_SCRIPT
  marks.SPRACHE {
  file = fileadmin/template_data/my_languageMenu.php
  }

}

Wie gesagt, wenn ich den CSS-Verweis aus dem Typo-Script lösche und in die HTML-Datei einfüge, entfernt typo3 bei der Ausgabe den kompletten Header und ersetzt ihn durch einen eigenen.

Bin hier nach dem Handbuch und dem Tutorial vorgegangen, in denen bei beiden die CSS-Datei im Header der HTML-Vorlage verankert sind. Als das nicht klappte, hab ich dann in der Referenz die Möglichkeit des Verweises innerhalb des TypoScript-Templates gefunden und umgesetzt.

blackraider

page.config.doctype = xhtml_strict
page.config.htmlTag_langKey = de
page.includeCSS {
file1 = fileadmin/page/css/main.css
file2 = fileadmin/page/css/main2.css
file3 = fileadmin/page/css/main3.css
...
}

Css Styled Content würde ich rauskicken.
Man benötigt nur die CSet stylesheet und content default.

Nich böse sein, aber wenn man richtig ordentlich mit CSS arbeiten möchte, nutzt man so gut wie gar nicht class und style, sondern arbeitet wenn möglich nur mit id. Inhalt und Design immer soweit wie möglich trennen.

Class nutzt man beispielsweise wenn man ein formatiertes Bulletlist Menü hat und z.B. der Oberste Link aus Designgründen ein anderes Hintergrundbild hat(dafür gibt es auch andere Möglichkeiten).

Sollte aber jeder selber wissen wie er an CSS rangeht.

Css Styled Content würde ich rauskicken.
Man benötigt nur die CSet stylesheet und content default.

Das hört sich interessant an ... ich nutze derzeit immer die css_styled_content und schmeiss den ganzen Müll (automatisch eingefügte css Definitionen etc.) raus.

Wie ist das bei diesem Konzept (cset + content default), kommt da defaultmässig der Müll gar nicht erst rein? Die content default hab ich noch als extrem tabellenlastig in Erinnerung ... hab mir die daher schon seit Ewigkeiten nicht mehr angesehen 😉

Danke schon mal für Info und viele grüße
Niki

Niki schrieb

Css Styled Content würde ich rauskicken.
Man benötigt nur die CSet stylesheet und content default.

Das hört sich interessant an ... ich nutze derzeit immer die css_styled_content und schmeiss den ganzen Müll (automatisch eingefügte css Definitionen etc.) raus.

Wie ist das bei diesem Konzept (cset + content default), kommt da defaultmässig der Müll gar nicht erst rein? Die content default hab ich noch als extrem tabellenlastig in Erinnerung ... hab mir die daher schon seit Ewigkeiten nicht mehr angesehen 😉

Danke schon mal für Info und viele grüße
Niki

Kommt richtig schönes pures HTML raus, ohne Tabellen, class definitionen und sonstigen Müll.

Wobei Müll kann man nicht sagen, für einen der es als Hobby macht ist es noch ganz sinvoll.

@all!

Besten Dank für Eure zahlreichen Tipps.

Werde einmal das eine oder andere ausprobieren und schauen was mir am Besten liegt ;-)

blackraider

@thebigtony: das war der Tipp schlechthin. Hab das neulich mal getestet und - wie angenehm 🙂 Konnte 2/3 meiner Konfiguration ausmisten. Und dann noch deutlich performanter. Ohne Deinen Tipp hätt ich die Dinger nie mehr angeschaut und weiter css_styled_content verwendet.

Viele Grüße
Niki

Na sag ich doch.
Bei Typo muss man immer etwas aufpassen, da versucht wird jeden Geschmack zu treffen, was den Jungs eigendlich auch gut gelingt.
Aber der Nachteil ist, dass man da schnell aus dem Konzept kommt und den Blick für das Wesentliche verliert.
Think simple.

Spätestens, wenn man z.B. die erste Überschrift im Text anders formatieren will als die nachfolgenden,
erkennt man den Sinn von csc.

Nich böse sein, aber wenn man richtig ordentlich mit CSS arbeiten möchte, nutzt man so gut wie gar nicht class und style, sondern arbeitet wenn möglich nur mit id.

Das halte ich für durchaus diskussionswürdig.
Wiederkehrenden, gleich formatierten Elementen weise ich doch Klassen zu und keine IDs (p class="bodytext" und nicht id="bodytext")

CSC ist nicht perfekt und durchaus verbesserungswürdig (es wird ja auch dran gearbeitet),
allerdings kann man damit vernünftig arbeiten.
Und ich muß nicht wie bei cSet Stylesheet irgendwelche Anweisungen ins Template schreiben.
Wo bleibt denn da die Trennung von Layout & Inhalt ?

viele Grüße
jenses

Das sind wir an dem Punkt.
Dem p wiese ich garnix zu.
Das schaut normal so aus

div#idMeinesDiv p {
    ...
    ...
}

Dann sind alle p tags in meinem div z.B. Für die Mittelseite so formatiert wie ich es will. Sollte der Fall auftreten, dies anders haben zu wollen, nutze ich dann inerhalb des p tags einen span, dem ich dann eine Klasse zuweise oder

div#idMeinesDiv p span {
    ...
    ...
}

Hab mich auch lange genug dagegen gewehrt, jetzt mach ich nichts mehr anders. Es gibt keinen eleganteren Weg Seiten zu gestallten.

jep. Wir haben neulich für einen Kunden einen Code Relaunch gemacht, Umstellung von altem Tabellen-HTML auf XHTML. Hat den Quellcode um 90% reduziert, um nur einen Vorteil zu nennen.

VIele Grüße
Niki

Hi!

thebigtony schrieb

page.config.doctype = xhtml_strict
page.config.htmlTag_langKey = de
page.includeCSS {
file1 = fileadmin/page/css/main.css
file2 = fileadmin/page/css/main2.css
file3 = fileadmin/page/css/main3.css
...
}

Css Styled Content würde ich rauskicken.
Man benötigt nur die CSet stylesheet und content default.

Nich böse sein, aber wenn man richtig ordentlich mit CSS arbeiten möchte, nutzt man so gut wie gar nicht class und style, sondern arbeitet wenn möglich nur mit id. Inhalt und Design immer soweit wie möglich trennen.

Class nutzt man beispielsweise wenn man ein formatiertes Bulletlist Menü hat und z.B. der Oberste Link aus Designgründen ein anderes Hintergrundbild hat(dafür gibt es auch andere Möglichkeiten).

Sollte aber jeder selber wissen wie er an CSS rangeht.

In Bezug auf diesen Thread würde es mich schon interessieren, wie man dann die "tables" aus Content Elementen wie "Text mit Bild" entfernt bzw. umgewandelt bekommt (bei reiner Verwendung von CSet stylesheet und content default)?

Dank im voraus für Tips/Hilfen!

sirwylm