Internes Standard CSS Framework

[treudoof]

Hallo zusammen,

bevor ich mit meiner ersten Frage/Anmerkung "daher" komme, möchte ich allen Beteiligten an Contao danken. Wir haben bis dato immer ein anderes CMS eingesetzt und sind eher durch Zufall auf Contao gestoßen und sind begeistert. Endlich ein CMS womit (augenscheinlich) so ziemlich all das möglich ist, was wir für unsere Projekte immer benötigen. Wir haben bereits div. Testfälle nachgestellt und es funktioniert alles mehr als prima. Danke hierfür!

Nun aber zu meiner eigentlichen Frage:

So wie ich Contao verstehe, kann man letztlich sofort loslegen, denn lt. Webseite ist ein Seitenlayout für jegliche Browser verständlich. Nicht, dass ich es unbedingt bräuchte, denn man kann sich schließlich selbst behelfen, aber dennoch stelle ich mir die Frage wieso das so ist:

Fallbeispiel:

- leeres Seitenlayout angelegt mit alle verfügbaren Bereichen: Kopfzeile, Fußzeile, Hauptbereich, Links und Rechts.
- Reset CSS (der Webseite) importiert
- neues weiteres CSS File angelegt mit folgendem Inhalt:

#header, #left, #main, #right, #footer jeweils eine Hintergrundfarbe zugewiesen.

Damit dürfte eine absolut Minimalausprägung stattfinden.

Zur Hintergrundfarbe von #main

Funktioniert in allen Browsern tadellos, bis auf den IE7. IE7 macht den #main Hintergrund zusätzlich in der #left Spalte. Diese wird zwar korrekt platziert, und auch darüber gesetzt, aber darunter (sofern die #left Spalte nicht so lang ist wie #main), wird dort die #main Hintergrundfarbe angezeigt. Warum ist das so? Ist das gewollt?

Zur Höhe von #main

Aus welchem Grund wird #main in diesem Fall immer genauso hoch wie #right? Zumindest in allen Browsern, ausser dem IE7. Dort wird das div genauso hoch wie der Inhalt welcher sich innerhalb #main befindet. Auch hier: Warum ist das so?

Mit eigenen CSS ist das "Problem" kein Problem, aber mich würde interessieren warum das bei der Standardkonfiguration sich so verhält? Bei Fragen, oder weiteren Ausführungen (und/oder Screenshots) gerne schreiben, ich füge dann die entsprechenden Infos hinzu.

viele Grüße,
Stefan

[tril]

Das von dir beschriebene Problem kommt mir sehr unbekannt vor. Hast du einen Link, wo man sich das ansehen kann?

MfG Tristan

[psren]

Das Problem hatte ich jetzt auch noch nie, und habe auch noch nie davon gehört.
Wenn ihr einen Beispiellink hättet wäre es ein leichtes euch zu helfen.

Habt ihr die basic.css von contao.org eingebunden oder irgendeinen anderen reset-stylesheet?

[treudoof]

Hallo,

eine Sekunde, ich richt schnell eine Demonsration ein :-) Ich melde mich gleich wieder hier.

viele Grüße,
Stefan

psren: Deine Frage beantworte ich gleich in der nächsten Antwort.

[treudoof]

Hallo zusammen,

ich hab nun eine kleine Demonstrative Testumgebung aufgebaut.

Zu sehen: hier

Ich habe jetzt, ergänzend zu meinem obigen Post, noch gesehen, dass im IE7 links unten bei dem blauen Streifen ca. 1px Versatz ist (über dem Link Sitemap).

Zu deiner Frage psren:
Ich hab lediglich die original basic css implementiert von der Contao Webseite und eine eigene CSS (test.css) gemacht die die 5 Ids mit ner Hintergrundfarbe belegen. Zu Testzwecken hab ich rechts einfach mal ne Navi reingeladen, dass der rechte Bereich etwas höher ist.

Bei Fragen, fragen :-)

viele Grüße,
Stefan

[bizon]

Bezüglich deiner Fragen zum IE7 kann ich nichts sagen, weil ich gerade keinen zur Verfügung habe.

Der kleine "Versatz" unten links ist kein Versatz, sondern dein unsichtbarer AGB - Link.

[treudoof]

Das mit dem AGB link hab ich mittlerweile gesehen, ist kein Problem. Hab ich nur übersehen, alle anderen IE7 Probleme stellen sich natürlich weiterhin. Aber wie bereits gesagt, verstehe ich nicht (im Firefox z.b.) warum der Hintergrund so hoch im #main ist wie #right ... im IE7 nicht (was meiner Ansicht nach korrekt wäre)

vg
Stefan

[bizon]

Der Quelltext zeigt eine falsche Reihenfolge der CSS-Dateien

basic.css muss vor test.css ins Seitenlayout eingebunden sein.

Wie der Name schon sagt, sind in der basic.css einige Standardeinstellungen, die in deiner nachfolgenden test.css angepasst werden und damit basic.css überschreiben.

[treudoof]

Hallo bizon,

ich hab's der Ordnungkeit halber mal gedreht. In diesem Fall hat die Reihenfolge aber keine Rolle gespielt, da hier nichts überschrieben werden kann :-) Aber zumindest ist's n guter Tipp für jene, die das nicht wissen :-)

[pmmueller]

Zur Höhe von #main
Aus welchem Grund wird #main in diesem Fall immer genauso hoch wie #right? Zumindest in allen Browsern, ausser dem IE7. Dort wird das div genauso hoch wie der Inhalt welcher sich innerhalb #main befindet. Auch hier: Warum ist das so?

Ich habe gerade nicht viel Zeit, deshalb nur was zur Höhe von #main.

Unterhalb vom Breadcrumb steht in #main ein <div id="clear"></div>, dem in contao.css im Style für #clear ein clear:both zugewiesen wird. Durch die globale Wirkung von clear wird damit der Inhaltsbereich unter die beiden gefloateten Seitenspalten verlängert. Wenn du #left länger machst als #right, dann wird #main so lang wie #left. Ziemlich sicher.

Das ist Absicht. Das CSS-Framework YAML benutzt einen ähnlichen Trick (Doku).

[treudoof]

Hi,

vielen Dank für deine Ausführung. Dies hab ich soweit verstanden. Aber wieso ist dies dann im IE7 nicht so? Und wie lässt sich das dort lösen? Bzw. sofern man das nicht möchte, dass der Inhalt gestreckt wird, wie wäre hier die entsprechende Möglichkeit? Müsste man hierzu dann an das Template für die Breadcrumb bzw. die Clear Angaben entsprechend ändern?

Denn ich könnte mir gut vorstellen, dass der ein oder andere diese Funktionalität "standardmäßig" gut findet, aber auch sicherlich der ein oder andere, in dieser Form nicht brauchen kann. Daher frage ich :-)

viele Grüße,
Stefan

[pmmueller]

Aber wieso ist dies dann im IE7 nicht so? Und wie lässt sich das dort lösen?

Keine Ahnung. Eigentlich sollte er das verstehen. Vielleicht hat er gerade schlechte Laune?

Im Ernst: Ziemlich sicher was mit hasLayout. Vergib mal eine zoom:1 oder height: 1px oder sowas an alle in Frage kommenden Layout-Elemente, vielleicht macht er das dann.

Bzw. sofern man das nicht möchte, dass der Inhalt gestreckt wird, wie wäre hier die entsprechende Möglichkeit? Müsste man hierzu dann an das Template für die Breadcrumb bzw. die Clear Angaben entsprechend ändern?

Der Breadcrumb hat da nichts mit zu tun. Der diente nur dazu, dass du die richtige Stelle findest.

Wenn ein clear:both für ein bestimmtes Element wie das div#clear die Ursache für ein bestimmtes Verhalten ist, dann "Clear-Angaben ändern" für dieses Element in der Tat eine gute Idee: einfach auf den Standardwert clear:none setzen

[plastiko]

[QUOTE=pmmueller;143117]
Ziemlich sicher was mit hasLayout. Vergib mal eine zoom:1 oder height: 1px oder sowas an alle in Frage kommenden Layout-Elemente, vielleicht macht er das dann.

Da bleiben ja nur #container und #main. Alle anderen haben bereits Layout.
Auf #container sehe ich keine Auswirkung und Layout für #main zerstört die globale Wirkung des clear.

Eine Idee währe #main border-left in passender Farbe und Breite zu geben (nur dem IE7).

[treudoof]

Keine Ahnung. Eigentlich sollte er das verstehen. Vielleicht hat er gerade schlechte Laune?

Im Ernst: Ziemlich sicher was mit hasLayout. Vergib mal eine zoom:1 oder height: 1px oder sowas an alle in Frage kommenden Layout-Elemente, vielleicht macht er das dann.

Das hier bleibt ein Rätsel für mich. Bekomm ich nicht hin - ist aber letztlich auch erstmal nicht wichtig. Hatte mich nur interessiert.

Der Breadcrumb hat da nichts mit zu tun. Der diente nur dazu, dass du die richtige Stelle findest.

Wenn ein clear:both für ein bestimmtes Element wie das div#clear die Ursache für ein bestimmtes Verhalten ist, dann "Clear-Angaben ändern" für dieses Element in der Tat eine gute Idee: einfach auf den Standardwert clear:none setzen

Auch wenn ich's nicht brauche - aber läuft! Danke für deine Erklärung ;-)

viele Grüße,
Stefan