Wie Strukturiert ihr euer Theme?

[dersauer]

Hey Leute,

mein Design ist in Photoshop komplett fertig, durch das Buch von Thomas Weitzel habe ich schon viel dazugelernt nun stellt sich mir aber die Frage
ob ich die einzelnen Module, Platzhalter etc. in Grids strukturiere oder alles versuche in CSS-Klassen und den dazugehörigen Margin befehlen alles zurecht zu rücken.

Wie geht ihr vor?

Durch die Funktion SPALTEN kann ich ja schön aufteilen jedoch auch da stellte ich mir die Frage was heutzutage üblich ist und ob man nurnoch Hauptspalte sowie Kopf und Fußzeile nimmt?

Zu meiner zweiten Frage:

Ich habe in der Hauptspalte einen Kasten bauen wollen wo ein Referenzbild und der dazugehörige Text drinn steht, klappt auch alles soweit jedoch
macht er aus welchen Grund auch immer mir den oberen Rahmen nicht, könnt ihr mir sagen wo der Fehler liegt?

/** Referenzformatierung Startseite **/
#main .referenzhome
{
	width:300px;
	top:-500px;
	position:relative;
	overflow:hidden;
	float:left;
	margin:20px 40px 0 400px;
	padding:10px 10px 10px 20px;
	border-top:1px solid blue;
	border-right:  1px dotted blue;
	border-bottom:  1px dotted blue;
	border-left:  1px dotted blue;
}

Achso wenn ich bei Border-top solid auf dotted ändere, verschwindet der gesammte Rahmen, irgendwie komisch oder logisch :-)

Danke euch für die Hilfe

[soweit_ok]

Na ja, Dein Markup sieht reichlich verdächtig aus ...

top:-500px;
position:relative;
margin:20px 40px 0 400px;

Ich vermute mal, der obere Rahmen verschwindet einfach unter dem Container #header, und falls Du keinen Header hast, dann eben im Nirvana. Schau Dir Positionierung und Ausdehnung der Elemente am besten mal mit Firebug an, dann siehst Du doch sofort, was los ist.

Außerdem sollte man mit Minus-Margins generell nur in ganz speziellen Fällen arbeiten, doch bestimmt nicht beim Standard-Layout.

[freedow]

Da ich keine Grids verwende kann ich dir dazu auch nichts sagen...

Welche Bereiche/Spalten du brauchst hängt von der Webseite und deinem Layout ab. Ich komme meistens mit Kopf-, Haupt- und Fußspalte/-zeile hin. Beim einfügen einer linken/rechten Spalte wird die Hauptspalte automaitsch verkleinert, sofern du das Standardseitentemplate und das Contao-Framework nutzt. Die breite der Spalte wird im Seitenlayout definiert.

Um mit CSS-Eigenschaften zu spielen und Fehler zu finden empfehle ich dir Firebug für den Firefox (Ist bei Chrome schon integriert und für Safari gibts auch ne Erweiterung / beim IE gibt es Javascript-Tools, um den Debugger zu nutzen. Ich rate dir einfachheitshalber aber zu Firefox und Firebug.)

[freedow]

Hier gibts noch Folien von Leo zum Gridsystem und vielem mehr:
http://www.contao.org/usertreffen-2009.html

Beispiele für CSS-Grid-Files gibts hier:
http://www.contao.org/herunterladen.html

[SFuchs]

Warum sollte es unüblich sein ein Layout mit Sidebars aufzubauen - guck dir die zahlreichen Blogs an. Ob man das nun über ein Grid sauber anlegt damit eine Harmonie entsteht oder mit freien Werten hängt vom Projekt ab.

Mehrspaltige Artikelpflege ist per Default für viele Redakteure (in Contao) nicht so einfach zu Handhaben (schlechte Übersicht, fehlende Direkte Eingabe) - wird der Inhalt über die Datenbank in Ausgabetemplates (Newslists, Cataloglisten etc) sieht das wiederum anders aus, da Pflegt der Redakteur die Inhaltsquelle.

Muss man das nicht berücksichtigen kann man tun und machen was man eben will, da gibt es weder unüblich oder richtig und falsch - wichtig ist deine Inhalte bei deiner Zielgruppe auch registriert werden und du selbst mit der Pflege zurecht kommst.

[dersauer]

Ich habe nochmal alles zusammengetragen und hoffe den Fehler mit euch zu finden.

Zu der Antwort:

soweit_ok

Na ja, Dein Markup sieht reichlich verdächtig aus ...
Code:

top:-500px;
position:relative;
margin:20px 40px 0 400px;

Ich vermute mal, der obere Rahmen verschwindet einfach unter dem Container #header, und falls Du keinen Header hast, dann eben im Nirvana. Schau Dir Positionierung und Ausdehnung der Elemente am besten mal mit Firebug an, dann siehst Du doch sofort, was los ist.

Außerdem sollte man mit Minus-Margins generell nur in ganz speziellen Fällen arbeiten, doch bestimmt nicht beim Standard-Layout.

Ja da hast du recht man sollte nicht mit Margin minus arbeiten, dies war jedoch nur zum testen ob ich den Block woanders hinbekomme, hatte aber nichts mit dem "Fehler" zu tun den ich beschrieben habe da ich den Wert -500px erst ein Tag danach reingeschrieben habe.

hier mal der Rahmen mit der fehlenden oberen Linie:

referenz.jpg

Ich habe das folgendermaßen realisiert:

1. Artikel angelegt
2. 3 Text-Elemente eingebaut
3. Bild eingefügt
4. CSS-Klasse einen Namen gegeben (referenzhome)
5. Code in CSS geschrieben:

/** Referenzformatierung Startseite **/
#main .referenzhome
{
	width:300px;
	top:-300px;
	position:relative;
	overflow:hidden;
	float:left;
	margin:20px 40px 0 400px;
	padding:10px 10px 10px 20px;
	border-top:1px solid #blue;
	border-right:  1px dotted blue;
	border-bottom:  1px dotted blue;
	border-left:  1px dotted blue;
}

Wie gesagt die Margin-Werte oder top, sind nur für mich gewesen damit ich den Platz bestimmen konnte.


Für mich stellst sich nur die Frage wenn ich nicht mit minus arbeiten sollte, wie kann ich dann diese aufteilung realisieren ohne mit Grids zu arbeiten:

design_home.jpg

Bitte haltet mich nicht für total blöd :-), ich bin einer der sich die reinfolgen genau ansieht und dann über sowas stolpert weil ich nicht genau weiß wie man die Positionen der einzelnen Module, Blocks oder Container bestimmt wenn mann nicht mit Margin minus arbeitet?

Wenn ich also z.B. den .referenzhome eine position zuordnen will muss ich doch mit Margin arbeiten oder?

Wie würdet ihr diese "Positionen" für die jeweiligen Module etc. difinieren?:

position.jpg


Eventuell kennt ihr ne gute Seite für Positionen diffinieren per css?

Besten Dank, wenn das mit den Positionen und den Rahmen endlich funzt habe ich es endlich verstanden ;-)

[soweit_ok]

Googele vielleicht mal nach "little boxes". Ansonsten kann ich Dir zur Analyse wie auch andere hier schon nur nochmals die Verwendung von Firebug und/oder vergleichbarer Tools wie Dragonfly anraten. Ohne Link nur anhand von Screenshots und CSS-Sniplets sind Ferndiagnosen oft nicht möglich, weil diese Codeauszüge nicht die Abhängigkeiten und Verknüpfungen mit anderen Selektoren zeigen. Es steht ja nicht nur "Cascading Style Sheet" drauf, es ist auch eine Verschachtelung drin. So kann ich Dir anhand dessen in diesem Fall keine konkrete Ursache nennen, wohingegen ich sie mittels Link im Firebug wahrscheinlich in höchstens einer Minute entdecken könnte. Anders gesagt, wenn Du die richtigen Werkzeuge verwendest, so dass die anderen User voraussetzen können, dass Du zunächst die geeigneten Maßnahmen ergriffen hast, die meisten solcher Probleme selbst lösen zu können, erfolgt in der Regel auch deutlich mehr Resonanz aus dem Forum, wenn es dennoch mal trotzdem einfach nicht klappen will.

[freedow]

Warum sollte es unüblich sein ein Layout mit Sidebars aufzubauen - guck dir die zahlreichen Blogs an. Ob man das nun über ein Grid sauber anlegt damit eine Harmonie entsteht oder mit freien Werten hängt vom Projekt ab.

Mehrspaltige Artikelpflege ist per Default für viele Redakteure (in Contao) nicht so einfach zu Handhaben (schlechte Übersicht, fehlende Direkte Eingabe) - wird der Inhalt über die Datenbank in Ausgabetemplates (Newslists, Cataloglisten etc) sieht das wiederum anders aus, da Pflegt der Redakteur die Inhaltsquelle.

Muss man das nicht berücksichtigen kann man tun und machen was man eben will, da gibt es weder unüblich oder richtig und falsch - wichtig ist deine Inhalte bei deiner Zielgruppe auch registriert werden und du selbst mit der Pflege zurecht kommst.

Mir geht es nicht um Gewohnheiten. Ich gebe nur Denkanstösse ... Ich glaube, damit hat sich alles erledigt.

[manfred]

Alle border-Werte haben ein Leerzeichen vor der Pixelangabe, border-top jedoch nicht....bin kein CSS-Profi.....aber evtl. hat es damit was zu tun??

manfred