Erstellen von CSS basierten Templates für Mambo

musicones · 16.07.2004, 11:53

Hallo,

ich beschäftige mich jetzt seit fast 2 Wochen mit css basierten Templates für mambo. CSS basiert bedeutet für mich Templates ohne Tabellen, sondern mit Block oder Ebenen Elementen: div-tags.

Innerhalb dieser 2 Wochen habe ich es nicht geschafft ein vernünftiges css template zu erstellen. Das bedeutet ich bin entweder ein ober hirnie oder die Materie ist nicht so einfach wie man es gerne aussehen mag. In dieser Zeit hab ich einiges was CSS Styling angeht gelernt u. a. das man einen box hack benötigt und bestimmte Tricks anwenden muss, dass auf allen Browsern die gleiche Ausgabe erfolgt etc.

Ich habe meine Vorgehensweise und Überlegungen mit vorhandenen css basierten Templates verglichen, ausserdem habe ich mit den Template Generator angeschaut, der auch Templates mit div-tags erstellt.

Dabei ist mir aufgefallen, dass der Aufbau der index.php mit den div-tags wohl ein entscheidende Rolle spielt. Zur Veranschaulichung, habe ich die Struktur wie sie vom Template Generator erstellt wird, in einem Bild nachgebaut (siehe Attachement).

Die Struktur dieser index.php ist sehr komplex, dabei frage ich mich, ob sie vielleicht sogar notwendig ist. Ich habe mir auch ein YTW Template angeschaut, der diese Struktur nutzte. Ich habe meine index.php auch mit einem pagewidth ausgestattet den header, ein main und ein footer div reingelegt. Innerhalb des main divs lagen dann drei weitere divs in denen die einzelnen Contents für leftmodules, mainbody und rightmodules geladen wurden.
Wie Ihr seht sehr einfach.

Allerdings hat es nie wirklich gestimmt. Entweder gabe es Probleme, dass die divs nicht nebeneinander passten und nach unten verrutschten oder einmal die Umfragen aus dem div hinaus gingen etc.
Beim Vergleich der Stylesheets zog ich eigentlich gleich und hatte kaum andere Werte als vom Generator vorgegeben.

Mich interessiert welche Lösungswege es gibt ein CSS basiertes Template zu erstellen. Warum funktioniert die Struktur des Generators (siehe Bild), aus welchem Grund gibt es diese outer und inner divs. Kann das was mit der Anordnung der Elemente zu tun haben?
Mich interessieren auch eure Erfahrungen mit dem erstellen von CSS basierten Templates. Tipps, Tricks, Fehler, was geht, was nicht geht.

Das ganze dient einer Template Studie die zu einem Template Kompendium zusammengefasst werden.

gruss und danke
musicones

-peter- · 16.07.2004, 12:07

Da es hier um CSS geht eine Frage und zwar

http://templates4mambo.de/

der Bereich der Suche, ich verwende vier browser IE, OPERA, FIREFOX, MOZILLA, und unter jedem wird das ganze in jedem Browser anderst angezeigt! Was ist da falsch??

Gruss Peter

grishan · 16.07.2004, 22:59

Hallo musicones,

sei Dir sicher Du bist gerade dabei Dich einer großen Herausforderung zu
stellen. Die Materie crossbrowser kompatible Seiten auf der Grundlage von
tableless CSS2 Layouts zu erstellen, ist allerdings zu komplex und mit
Fallstricken belegt, als dass man sie im Forum so im Vorbeigehen abhandeln
könnte.
Mit ganz kleinen Schritten und dem sicheren Verständnis für die Grundlagen kommst Du ans Ziel.
Ich glaube Du hast Dir für den Anfang gleich ein dickes Paket vorgenommen.

Hier ein paar Empfehlungen für den Einstieg und für Fortgeschrittene
was das Thema anbelangt:

CSS 4 You - sehr ausführliche deutsche Ressource
mit Downloadmöglichkeit plus Beispiele für tabellenloses Layout

Tableless Layout HOWTO

Tabellenloses Layout mit Dreamweaver MX

und dann noch die Guru Ressource für CSS Layouts schlechthin, ein Muss
zum studieren und lernen :

CSS ZenGarden The Beauty in CSS Design

Die größte Schwierigkeit besteht am Anfang nicht, ein einfaches Layout
in DIV Container zu packen, sondern die Feinheiten dann auch pixelgenau
in allen Major Browsern zum Laufen zu bekommen.
Hier sind Tipps und Kniffe hilfreich wie sie auf css4you.de zu finden sind ,
aber vor allem anderen ein solides Grundverständnis für die Basics.
Sonst bleiben alle Bemühungen nur Stückwerk.

Wie Du sehen kannst , das Netz ist voll mit ausführlichen Beispielen
zum Lernen und nachmachen - besser als man es je in diesem Forum
erklären könnte.
Noch was zum Mut machen, 2 Wochen mit CSS beschäftigen...das
ist gerademal als "leichtes Aufwärmtraining" zu bezeichnen, das wird
Dir jeder bestätigen der seit Jahren dabei ist und selbst jeden Tag dazu lernt.

Viele Grüße von Grishan

grishan · 16.07.2004, 23:27

Hallo Peter, alter Mambohacker...

Jeder der löblicherweise seine Templates und Stylesheets selbst erstellt
sollte sich eines von Anfang an angewöhnen, seinen Quelltext und die
CSS Definitionen auf Validität überprüfen !!

Da bleibt vielen dann die Kinnlade nach unten hängen, weil sie nicht
glauben mögen wie viele kleine und große Fehler sich da noch tummeln.

Das fängt beim Doctype an, bei dir steht :

Code:

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Tja, was nun - HTML 4.0 oder XHTML ?
Ein fehlertoleranter Browser wird in den Quirks-Mode schalten und alle anderen
werden je nach Gusto die Seite darstellen.

Allen Firefox Benutzern kann ich die Extension "Web Developer 0.8" nur
wärmstens empfehlen, dort hat man die Möglichkeit sofort den Quellcode
und die Stylesheets einer Seite validieren zu lassen.

Sauber validierte Dokumente, die als Basis für weitere Arbeiten dienen,
ersparen einem im nachhinein eine Menge Zeit.

Also dann, ran an den Speck...

Viele Grüße von Grishan

grishan · 16.07.2004, 23:54

Noch eine Anmerkung zum Thema tabellenloses Layout, CSS und Mambo.

Fakt 1:
Bevor man ein solches Template entwickelt, also nur positionierte
DIV Container, sollte man sich über die Zielgruppe und Browserbenutzer
im klaren sein. Wen will man erreichen mit seinem Inhalt und wie werden
User mit "älteren" Browsern behandelt. Einfach ausgeschlossen, extra
Stylesheets , Browserweiche etc.

Fakt 2 : auch ein vom Syntax her 100% valides Dokument oder
valider Stylesheets wird in der Praxis nicht immer unter allen modernen
Browsern ein gleiches Ergebnis bringen.

Fakt 3: Auch wenn man das kompatible Template entwickelt hat,
muß man sich vor Augen halten, dass der Output aller Mambokomponenten
und Module klassisches HTML ist. Und das teilweise mit haarsträubenden
Fehlern ---> welche wiederum zu Darstellungsunterschieden(fehlern)
in den diversen Browsern führen.

Das Endergebnis - Template mit DIV Containern und Mambooutput -
ist zum Schluß ein Gemisch aus CSS und Tabellenlayout und das mit
Fehlern - es sei denn man bügelt per Hand bei allen verwendeten Modulen
und Componenten die kleinen HTML Bugs raus.
Erst dann ist die Chance gegeben ein mehr oder weniger einheitliches
Browsererscheinungsbild zu erhalten.

Wehe dem, der sich diese Mühe macht - ich habs einmal hinter mir...
Auf das CSS2 DIV Layout habe ich allerdings mit Absicht verzichtet, weil
User mit älteren Browsern dann in den Mond schauen würden...

Wer mir nicht glaubt, sollte sich seine Mambo Seite mal mit Netscape 4.7x
(unter Linux noch verbreitet) oder Netscape 6.1 anschauen und wird das
gruseln bekommen, ähnlich sieht es mit frühen Opera Versionen (5.x und 6.x)
aus.

Um jeden Preis eine moderne Technologie durchzuprügeln, will eben überlegt
sein.

Grüße von Grishan

-peter- · 17.07.2004, 00:23

Quote:

Fakt 2 : auch ein vom Syntax her 100% valides Dokument oder
valider Stylesheets wird in der Praxis nicht immer unter allen modernen
Browsern ein gleiches Ergebnis bringen.

Hmm wem sagst du das!

Danke für die Hinweise aber bisher war es bei mir Zeittechnisch nicht möglich dies alles zu begradigen!

Nunja und der Fortschrit, hmm der wird nicht auf sich warten lassen, siehe php 5 ich denke auch das man entlich auch von der sturren Haltung der Seite also mit Tabellen usw. weggehen sollte und mehr objektorientiert arbeiten solle. Gab es da nicht eine programmiersprache die in diese Richtung ging aber sehr schnell in vergessenheit geriet! Stand auch mal vor einiger Zeit in der CT.

Und wieso alte Browser was spricht den gegen Fortschritt? Es gibt genung uni oder fh wo zb nur ns oder opera verwendet wird (Sicherheit). Und es gab überall Fortschritt, wieso ist immer diese Angst vor etwas neuem! Es muß ja nicht immer besser sein aber vielleicht einfacher!

Aber wie gesagt ich hatte bisher nichts mit css am hut werde versuchen in zukunft mehr damit zu verarbeiten!

Gruss Peter

EDIT: Mein Gott fällt mir erst jetzt auf, wie kann ein Mensch nur soviel auf einmal schreiben

(in einem forum)

musicones · 17.07.2004, 08:31

@grishan:
Danke für die Links, kannte die Seiten auch schon.
Praktisch einfach ist es wirklich nicht. Wobei die Theorie eigentlich sehr einfach ist und die Vorgaben klar. Nun gut. Ich bin nicht so auf die 100% Pixelgenauigkeit aus, ich möchte nur dass sich dynamisch 2-3 Spalten nebeneinander anzeigen, ohne das etwas nach unten verrutscht.
Das Gesamtbild muss am Ende stimmen, wenn es in Browser ABC zwei Pixel
Pixel weiter links als in Browser XYZ ist, dann macht es nichts aus.

Ich bin für die Variante automatische Browserweiche mit entsprechendem
CSS für verschiedene Browser, vor allem zwischen IE und anderen.
Da ich gerne Transparente png nutzen möchte und IE bekannterweise
da schlapp macht.

Eigentlich wollte ich mit diesem Thread bewirken, Kontakt zu anderen herzustellen, die sich auch damit beschäftigen oder beschäftigt haben, damit man seine Erfahrungen austauschen kann und man sich gegenseitig in die Codes schaut um daraus zu lernen. Wenn jemand ein funktionierendes CSS Template hat, dann kann man ja mal reinschauen wie das aufgebaut wurde und wie bestimmte Probleme gelöst oder umgangen wurden. Oder man schaut sich mal eine Idee an, wie ich das mit dem Bild im ersten Post gemacht habe. Vielleicht hilft man auch bei konkreten Problemen. Man kann dann sehr schnell erkennen wo es hapert. Vor allem finde ich es wichtig hier das zu machen, wo andere auch Mambo nutzen. In einem CSS Forum würde man mir wahrscheinlich erzählen ich sollte ein CMS nutzen, das auch Validität aufbaut und selbst keine Tabellen nutzt, wie du sagst es ist ja ein mischmasch. Mit dem wir als Mambo Nutzer erstmal leben müssen, bis der Core umgestellt wurde, was bestimmt in zukünftigen Versionen immer mehr gemacht wird.

gruss
musicones

dietzi · 18.07.2004, 10:06

Hallo musicones,

schau Dir doch wirklich mal xMambo an, Du hast ja in einem anderen Thread schon mal darüber mitdiskutiert. Als ich Anfang des Jahres mit der 1.0.1-Version zu experimentieren anfing, gab's noch das Problem daß die meisten Mambokomponenten nicht in xMambo liefen. Das ist mit der 1.0.7-Version Vergangenheit. Natürlich sind die Komponenten alle Tabellenlayout, aber außer der Zeitkomponente seh ich keine Probleme für den Umbau auf CSS-Layout.

Ich würde es sehr begrüßen, wenn über dieses Thema weiterverfolgt wird.

LG
Dietmar

27.06.2005, 22:39

Hier gibt es ein Tutorial:
http://www.absalom.biz/tutorials/Mam..._Tutorial.html
Das scheint ganz brauchbar zu sein und erklärt auch Schritt für Schritt, was getan und bewirkt wird.

HaWeHo

gisu · 28.06.2005, 12:17

CSS2 Layouts sind eine Philosophie für sich, in 2 Wochen schafft man es zwar ein Layout zu erstellen das auch mit den gängigen Browsern funktioniert, nur sobald Mambo seinen Content ausspielt ist schluss mit Lustig. Besser wird es erst ab Mambo 4.5.3 da bestimmt man das Design der jeweiligen Module und Komponenten selbst dank PatTemplate - nur wird es dann erst eine ganze Weile dauern bis die restlichen Komponenten nachziehen.

Man bekommt es zwar hin das es funktioniert nur was hat man dann? Ein Template das weitgehenste ohne Tabellen auskommt der Rest von Mambo aber fröhlich seine Tabellen ins Template klatscht. Wie gesagt ab 4.5.3. hat man hier mehr Vorteile als Designer.

Quote:

Und wieso alte Browser was spricht den gegen Fortschritt? Es gibt genung uni oder fh wo zb nur ns oder opera verwendet wird (Sicherheit). Und es gab überall Fortschritt, wieso ist immer diese Angst vor etwas neuem! Es muß ja nicht immer besser sein aber vielleicht einfacher!

Gegen den Fortschritt sprechen 90% IE Nutzer, ohne IE wären wir heute schon viel weiter.
Als designer kämpft man eigentlich nicht gegen Browser sondern gegen die Bequemlichkeit der Surfer - warum wohl nehmen soviele IE? Rein aus Bequemlichkeit.

Quote:

Nunja und der Fortschrit, hmm der wird nicht auf sich warten lassen, siehe php 5 ich denke auch das man entlich auch von der sturren Haltung der Seite also mit Tabellen usw. weggehen sollte und mehr objektorientiert arbeiten solle. Gab es da nicht eine programmiersprache die in diese Richtung ging aber sehr schnell in vergessenheit geriet! Stand auch mal vor einiger Zeit in der CT.

Objektorientierte Programmierung ist schon seit längerem Hip, C hat's, C++ hat's, C# hat's usw. PHP5 hat hier jetzt nachgezogen um es für den Profisektor atraktiver zu machen.

Der Fortschritt ist im Webbereich schon lange da, nur die Resourcen liegen derzeit brach. Siehe CSS Level 3 was hier alles möglich wird da könnten einem Designer die Tränen kommen, nur kann man das nicht verwenden da die Browser nicht vorhanden sind (gerüchten zufolge soll IE7 nicht mal CSS3 können) - und vorhanden sind sie deshalb nicht weil der Endkunde nicht danach verlangt, die kleine Prozentzahl an Designern gegen halt keinen Ausschlag.
Darum haben sich auch einige Designer Flash zugewandt, weil man hier nicht mit solchen Schwierigkeiten kämpfen muss. (ich red hier nicht von den pseudodesignern die Flash als Multimediashow missbrauchen)