Grundsätze Contao und Unterschiede CSS/Template/Layout

[Cpt. Jack Sparrow]

Hallo Community,

möchte meinen ersten Beitrag dazu nutzen, mich kurz vorzustellen: Ich heiße Marc, bin 29 Jahre und komme aus dem grünen Herzen Deutschlands: Thüringen.
Ich bin kompletter Quereinsteiger in dieses Thema und brauche diesbezüglich noch ein wenig Starthilfe:

1.: Seitenlayout, CSS, Module, Templates: Was ist für was zuständig?
2.: Warum läßt mein Contao keine .png mit 1000px x 100px zu?

Ich weiß, dass diese Fragen für euch wahrscheinlich ziemlich dämlich klingen, aber ich brauch bei allem Anschub bei den Basics, die komplizierten Sachen reime ich mir dann selbst zusammen.

Zum Schluß möchte ich auch noch meine Hilfe anbieten: wenn ihr kleinere Grafiken braucht, kurze PN an mich, ich helf dann gern.

Grüßle,

Marc

[Flex]

1.
Seitenlayouts sind die Layouts die du einer Seite zuordnen kannst. Dazu gehören der Header, linke und rechte Sidebar, Contentbereich und der Footer. Hier kannst du auch entscheiden welche CSS oder JavaScripte eingebunden werden und somit zur Verfügung steht.

CSS sollte selbsterklärend sein.

Module sind funktionale Seitenteile, wie z. B. ein Nachrichtenleser, der dir die Nachrichten aus deiner Seite anzeigt.

Templates sind die Grunddateien die hinter den Modulen und Seitenlayouts stehen. Hier kannst du direkt im Quelltext HTML oder auch PHP Veränderungen vornehmen.

2. Schau mal in den Einstellungen deines Contaos, was die maximal mögliche Bildgröße im Upload ist. Wahrscheinlich ist die zu klein und Contao verkleinert dein Bild automatisch.

[Bandyt]

Hallo und Willkommen im Forum!

1.: Seitenlayout, CSS, Module, Templates: Was ist für was zuständig?

Seitenlayout: Anordnung von Inhalten (Sogennante Module) innerhalb einer Seite. Das Layout muss dann den entsprechenden Seiten in der Website zugeordnet werden (Oder es wird ein Standard definiert)

CSS: CSS-Befehle zur Formattierung deiner Seite

Module: Damit bindest du funktionalitäten in deine Seite ein. Z.b. kannst du damit eigenen HTML-Code oder Navigationsleisten hinzufügen. Diese Module müssen dann, damit sie angezeigt werden, in ein Seitenlayout eingebunden werden.

Template: Das sind Vorlagen für Module und Inhaltselemente. Über diesen Punkt kannst du das Aussehen (Vom HTML-Code her) von Inhalten beeinflußen.


Für den Anfang würde ich empfehlen erstmal Module und Seitenlayouts festzulegen. Danach die CSS-Befehle zu pflegen und damit deine Seite zu designen. Template würde ich nur nutzen, wenn dringender Handlungsbedarf ist. Für den Anfang sollte es ohne gehen.

[Cpt. Jack Sparrow]

2. Schau mal in den Einstellungen deines Contaos, was die maximal mögliche Bildgröße im Upload ist. Wahrscheinlich ist die zu klein und Contao verkleinert dein Bild automatisch.

Sí. Daran lag es. Musste dann nämlich immer via HTML hochskalieren. Sah immer ziemlich schräg aus.

Also erstmal großes Lob an das Forum. Hier wird auch Newbies geholfen.

So weiter geht´s: Module: drin. Layout: steht. CSS: in den Anfängen. Läuft soweit.

Welche "Körper" kann ich denn mit CSS alles "verschönern". Bekannt sind mir bis jetzt: wrapper; header; body; footer. Kann es sein, dass das ziemlich exakt die von mir angelegten Module sind? Und welche gibt es denn noch so? Und gibt es irgendwo eine Befehlsübersicht?

[andreasisaak]

Eine Übersicht der vorhanden Klassen und ID's findest du hier:

http://www.contao-community.de/showt...lassen-und-IDs

[Cpt. Jack Sparrow]

Und schon taucht die nächste Frage auf: Klassen und IDs?

Sorry, bin wie gesagt völliger Quereinsteiger. Redet einfach mit mir, als würdet ihr euch mit einem trotzigen 6-jährigen unterhalten...

[Bandyt]

Das, das ist ne Klasse. Hat nix mit der Schule zu tun. Klingt komisch, ist aber so!

Kurze Übersicht zum Unterschied:
http://www.drweb.de/magazin/css-id-oder-klasse/

Es ist einfach die Frage wie du das Elemtent ansprichst:

Klasse: element.klassenname
Id: element#id

So einfach ist das!

[psren]

kurz und knackig zusammengefasst gibt es das ganze hier nachzulesen.
Um Contao Effektiv einzusetzen sollte man CSS zu einem gewissen Grad beherrschen, also ists ganz gut wenn du das mal durchmachst.

Gruß psren

[schman]

Eine Übersicht der vorhanden Klassen und ID's findest du hier:

http://www.contao-community.de/showt...lassen-und-IDs

Ich würde dir raten Firebug zu verwenden, damit siehst du genau welche Klassen es gibt und vorallem welche Eigenschaften gerade greifen

[Cpt. Jack Sparrow]

So, wieder ne Frage: ich will meine Navi im Header haben. Wenn ich dass einstelle, bleiben die Buttons trotzdem vertikal, ich will aber, dass sie horizontal liegen. Und wie mache ich nen Hintergrund hinter dir Buttons?

[varix]

Da kommst du wohl um CSS nicht herum

Damit konfigurierst du dein Menu (Anordnung, Farben, Hintergrund, Abstände, etc.)

http://www.css4you.de/

varix

[Cpt. Jack Sparrow]

Hab ich mir schon durchgelesen, aber wie gesagt, geh einfach mal davon aus, dass hier ein sechsjähriger sitzt.

Wenn du kurz Zeit hast, fass es einfach mal kurz in Worte für Dummies...

Nicht vorprogrammieren, sondern erklär mir mal bitte, wie, und vor allem, wieso das dann alles so reagiert....

[varix]

Würde ich gerne, hab aber leider jetzt nicht die Zeit.

Du solltes dich schon mit CSS ein wenig auskennen. Ich habe mir anfangs ein CSS-Buch gekauft (gibt aber auch genug stoff im Web) und alles durchgearbeitet. Gerade bei Menus muss man doch einiges beachten. In Verbindung mit Firebug sollte es dann mit der Methode Try & Error gehen

Viel Glück & Erfolg

varix

[Cpt. Jack Sparrow]

Try&Error läuft schon den ganzen Tag...

[Andreas]

Nicht dass ich was gegen CSS4you hätte, aber als Alternative erwähne ich immer ganz gerne Selfhtml, da ja jeder anders lernt. Ist halt auch immer noch mein Favorit.

Schau dir mal ein paar (gute) Internetseiten an und schalte im Firefox unter Ansicht den Webseitenstil aus. Dann solltest du bei professionellen Seiten eine saubere, sematisch korrekte Struktur der Inhalte sehen. Überschriften (mit korrekter Hierarchie H1 bis H6), Absätze, Listen, Tabellen usw. HTML ist eine Text-Auszeichnungssprache und stellt dafür die entsprechenden Elemente zur Verfügung. Contao unterstützt dein Projekt darin, dass die Sematik, durch die Templates, welche ja für den HTML-Code verantwortlich sind, schon sehr gut ist. Auf die Überschriften musst du ein Augenmerk haben.

Mit dem Addon 'Web Developer' kannst du dein Projekt recht gut analysieren (z.B. Hierarchie der Überschriften).

Im Prinzip kannst du dein Projekt mit seinen Inhalten so aufbauen, ohne dir irgendwelche Gedanken über das Design zu machen. Erst danach kommt das CSS ins Spiel, welches deine Elemente so formatiert wie du es gerne hättest. (Is klar, dass man von Anfang an alles schon ein bisschen nett haben möchte, macht halt Spaß, aber nötig ist es theoretisch nicht). HTML (Templates), Funktion (Module), Inhalt (DB) und Design (CSS) sind also im Prinzip total unabhängig voneinander.

"Firebug", oben erwähnt, ist zum Designen mit CSS dazu nahezu unumgänglich, vielleicht noch 'Dragonfly' im Opera ist eine Alternative.

In Contao sind also für dein Design weder das Seitenlayout, noch die Templates, noch die Themes verantwortlich, sondern allein deine CSS-Dateien (die Feinheiten, dass z.B. Themes ja auch CSS-Dateien beinhalten, man keine rechte Spalte formatieren kann, wenn keine vorhanden ist usw. hab ich mal weggelassen). Die Aussagen von oben kann ich nur bekräftigen, mache die ersten Schritte ohne irgendwelche Templateveränderungen.

Als Nachschagewerk für HTML empfehle ich dir auch Selfhtml. Vergiss auch nicht, dass sich Leute echt viel Mühe gegeben haben Bücher zu schreiben, welche zum Teil auch auf contao.org online zur Verfügung gestellt sind, um dir genau deine Fragen von oben zu beantworten.

Grüße

[Cpt. Jack Sparrow]

Danke Andreas.

Leider verstehe ich nur die Hälfte von dem, was auf CSS4You, selfhtml und in dem Buch von Thomas Weitzel "Mit Contao Webseiten erfolgreich gestalten". Ich brauch immer die ersten Schritte.

Ich bin heute, für meine Begriffe, unglaublich weit gekommen. Und ich habe nicht einfach abgeschrieben, sondern selbst gebaut. Aber ab und zu stellt mich mein Rechner so vor das ein oder andere Rätsel...

[andreasisaak]

CSS4You und SelfHTML liefern dir aber die ersten Schritte. Du darfst hier im Forum keine individuelle Schulung erwarten am besten stöberst du dich durch die beiden Links und schaust mal wie du was realisierst.

Da findest du auch genug Ressourcen zu horizontalen Navigationen usw.

[schman]

So wie sichs anhört hast du noch realtiv wenig bis keine Erfahrung mit HTML/CSS, ich würde dir hier noch das Buch von Michael Jendryschik - Einführung in XHTML, CSS und Webdesign empfehlen, oder auch das Buch von Peter Müller - Little Boxes (Teil 0, 1 und 2)

Ich weiß das man am besten gleich anfangen und sofort was sehen will, in dem Fall schaffst du das ja auch, zumindest hast du geschrieben das du schon sehr weit gekommen bist. Nach so einem Buch versteht man mehr die Zusammenhänge und dann geht es noch flotter und vorallem weiß man dann was man tut und es ist nicht nur mehr Try & Error.

[Cpt. Jack Sparrow]

Bin eher der Learning-by-doing-Typ. Hab gestern abend und heut früh schon weiter experimentiert: habe mit Firebug und Webdeveloper verschiedene Seiten angeschaut und, siehe da:

1.: Navigation ist vertikal: jippie!
2.: Hab den List-Style-Type rausgenommen bekommen. 2x Jippie!!!

Mein nächstes Ziel für heute: Images hinter die Links in der Navi bauen.

Bin mal gespannt...