Design Zeus: Alle Spalten gleiche Länge

[bejoro]

Hallo webtodateforum!

Ich möchte meine bescheidene, kleine Website von Typo3 auf "Web To Date" umstellen, da Typo3 zwar sehr mächtig ist, aber ich für jede Kleinigkeit viel programmieren, studieren und lernen muss. Allein ein Kontaktformular hat mich viele Stunden gekostet und nach einem Sicherheitsupdate funktionierte wieder nichts mehr.

Ich bin deshalb noch blutiger W2D-Anfänger und teste seit ein paar Tagen, ob ich meine Vorstellungen mit W2D umsetzen kann.

Ich habe in diesem Forum schon sehr viel gelesen und gelernt. Das, was dabei herausgekommen ist, seht Ihr auf der Test-Website (Link siehe unten)

Ich habe sehr viele Fragen, teile aber die Themen auf, die ich nicht hier im Forum gefunden habe.

Die aktuelle Originalseite ist: www.enjoy-audio.de

Thema: Design Zeus (angepasst)
Ich verwende unterschiedliche Hintergrundfarben für Content/Kontext und Gesamthintergrund (BODY). Damit sieht man leider die unterschiedlichen Spaltenlängen, je nach Inhalt und das sieht doof aus.

Wie schaffe ich es, bei meiner W2D-Website beide Spalten (Contentspalte und Subnav/Kontextspalte) auf gleiche Länge zu bringen? Möglichst immer beide Seiten angeglichen aneinander. Geht das?

Meine neue W2D Test-Website: www.test.rothertec.de

Danke und Viele Grüße!

[blue]

Ich würde einen neuen Div Container anlegen in dem Content und Sidebar eingebettet werden. Bei Content und Sidebar den Rahmen ausmachen und Hintergrund transparent. Dann dem neuen Div-Container den Hintergrund über eine Grafik geben fertig...

[bejoro]

Hallo blue!

Danke Dir für Deine superschnelle Antwort.

Ich bin noch blutiger Anfänger in CCML und CSS! Ein paar Dinge habe ich schon verstanden, aber vieles liegt noch im Dunkeln.

Deine Beschreibung sagt mir zwar schon etwas, aber für die Umsetzung dürfte es noch nicht reichen.

Anfängerfrage:
Habe ich durch den dann fest hinterlegten Hintergrund in Form einer Grafik dann nicht eine statische Spalte erzeugt? Geht das mit der Grafik nicht auch stark auf die Performance?

Unter Typo3/YAML hat das damals der Webprogrammierer irgendwie anders gelöst (ohne Grafik). Kannst Du Dir das evtl. auch für W2D vorstellen?

Sorry, sag mir bitte, wenn ich zu viel von Euch oder von W2D erwarte.

[blue]

Die Grafik ist nur einen Pixel hoch und so breit wie die Seite also nur wenige Bytes groß. Diese wird dann im CSS mit repeat -y immer wiederholt. Das ist gängiger Standard und wird z.B. auch beim Design Phi so gemacht.

[bejoro]

Danke Dir blue. Es wird klarer. Muss mir CSS dazu noch genauer ansehen. Habe das auch bei Buttons schon gesehen (repeat -x).

Bitte:
Könntest Du mir bitte einen Codeschnipsel geben, wie und wo ich diesen Container anlege. Oder gibt es ein Beispiel in einem Design, dann pfriemle ich es mir heraus.

Das mit der Formatierung der Elemente (Rahmen aus und Hintergrund transparent) ist kein Problem.

[blue]

Das wird schon ein wenig komplizierter da du ja auch noch die Grafik einbinden musst in die Global.ccml etc... Die Grafik muss auch ein bestimmtes Farbschema haben um die Farben mit W2D einstellen zu können.

[bejoro]

Danke!

Hm, also kann ich das vergessen, mit meinen Kenntnissen?

[blue]

Vergfügst Du denn über die entsprechende Software um z.B. die Hintergrunggrafik zu erzeugen ? Notfalls kann man die ja auch per FTP auf den Server kopieren.

[bejoro]

Softwareausstattung ist kein Problem. Photoshop ist z. B. vorhanden.

Ich bräuchte bitte die einzelnen Schritte und Dateien.

Das mit dem Container habe ich prinzipiell verstanden. Beide Elemente (content und sidebar) zusammenfassen, Formatierung der Elemente in css-Datei anpassen. Es hapert nur bei der Codierung.

Habe zwar Literatur (little boxes von Peter Müller), habe aber noch nicht so viel mit CSS gemacht, außer Kleinigkeiten (vorhandene Formatierung geändert) und das Zeus-Design angepasst (Positionen, Größen, Formatierung, Überschriften, Farben der Buttons geändert, Fade-Hintergrundgrafik für Sidebarüberschriften angefertigt, ein bisschen CCML-Anpassungen).

Die anderen Themen sind ja gelöst, jetzt fehlt nur noch die Lösung dieses Problems.

Ich hoffe mir kann jemand helfen. Das ist bestimmt auch für andere User interessant. Das Problem tritt immer dann auf, wenn der Hintergrund des Contents sich vom BODY-Hintergrund unterscheidet.

[blue]

OK...

in der style_design.css wird folgender Container angelegt...

#inhalt {
margin: 0 auto;
width: 920px;
border: solid 3px #000000;
}

ich mache mal einen fetten schwarzen Rahmen drum damit man ihn sehen kann...
hier gehört nachher der Hintergrund rein...

Damit der Container auch eingebunden wird muss er in der navigation.ccml geöffnet werden.

Das passiert an dieser Stelle:

<div id="logo"></div>
<div id="inhalt">
<div id="content">

und vor dem Footer wird er wieder geschlossen

</cc:loop>
</div>
</div>
</div>
<div id="footer">