Bitte um Hilfe - Contao 3.1.x ; Elemten-Anordnung (Divs) verändern sich nicht

[Berliner]

guten Abend liebe Forengemeinde,..

..mal wieder ich... Stehe vor einem riesigen Problem...
Die einzelnen Elemente lassen sich nicht wie gewünscht anordnen- vorerst reicht mir mal das zentrieren - als Ansatzpunkt.
Wenn man sich hier mal die Webseite anschaut, sieht man, dass es ein zentriertes Hintergrundbild gibt. Leider lässt sich das Main und Navigation nicht ebenfalls zentrieren - Abgesehen davon, dass die Nav mal links und mal rechts ist, scheint alles an der linken Seite zu kleben.

Kurze Eckdaten:

Verwendet wird ein Gridsystem außerhalb der Contao-eigenen Ressourcen (entscheidet sich aber grundsätzlich nur in der anzahl der grids). Layout-Builder ist abgeschaltet (weil ich dann mit Dev-Tools gar nicht mehr durchsehe). Derzeit verwende ich, entsprechend im Theme definiert, nur ein Layout mit 1!-Spalte (also ohne Spalten - nur Main) und zwei Zeilen (Header-Image und Main). Aktiviert ist nur die entsprechende xGrid-CSS (responsiv), reset.css (System-eigen), basic.css (system-eigen), mobile.css(system-eigen - welche ich jedoch ignoriere, da diese lt. dev-tools nicht reinzufunken scheint).
Mittlerweile hab ich mir aus Testzwecken schon das Header-Bild mit einem Rahmen versehen - aber ich bekomme weder Header-Bild, noch den darunterliegenden Rest, wie den Main-Inhalt, welcher aus Hauptnavigation und Artikel bestehen sollte - aufgeteilt in grids (3 für Navi, 13 für Artikel) zum Wrapper zentriert bekomme.
Selbst "Live-Veränderungen" in Dev-Tools zeigen irgendwie keinen Erfolg.

Mittlerweile bin ich am verzweifeln, egal was ich in der Live-Umgebung bei Dev-Tools tue, oder in den CSS-Dateien (basic- + default.css) ändere - Nichts passiert nach meinen Vorstellungen..

Vielleicht kann bitte mal jemand von euch, der nicht "betriebsblind" ist, reinschauen und mir einen Stubs in die richtige Richtung geben?

Hier mal die css-Dateien:

1. die Basic-Css:

Name:  basic 
Änderungsdatum:  2013-09-20 19:46 
Medientypen:  all 
 
Style sheet basic
body {
    margin:0;
    padding:0;
    background:#dff0f2 url("/files/Heilsteine+Reiki/Bilder/Hintergrund_blau_1142x12.gif") center top repeat-y;
    font-family:Ubuntu,sans-serif,arial;
}
 
#wrapper {
    width:1140px;
    min-width:100%;
    position:relative;
    margin-top:0;
    margin-right:auto;
    margin-left:auto;
    height: auto !important;
}

Aussehen und Position des Header
#header {
    max-width:1142px;
    position:relative;
    margin-right:auto;
    margin-left:auto;
    padding-top:5px;
    padding-bottom:5px;
    font-family:Ubuntu,sans-serif,arial;
}

#container {
    position:relative;
    margin-right:auto;
    margin-left:auto;
    padding-bottom:50px;
}

#container,
.inside {
    position:relative;
}
 
linke Spalte (Navigation)
#left {
    position:relative;
    float:left;
    margin-top:52px;
}
 
#main {
    position:relative;
    float:left;
    display:inline-block;
    border:5px #ba1122;
}
 
Hauptspalte
#main .inside {
    min-height:1px;
    position:relative;
    border:5px #fad20c;
    margin-bottom:20px;
}

a,
body,
div,
em,
input,
label,
legend,
li,
ol,
p,
select,
span,
strong,
td,
th,
textarea,
u,
ul {
    font:14px/1.5em Ubuntu,sans-serif,arial;
}
 
a,
body,
div,
input,
label,
li,
legend,
ol,
p,
select,
td,
th,
textarea,
u,
ul {
    font:14px Ubuntu,sans-serif,arial;
}

h1 {
    margin:10px 0 12px;
    padding:0;
    font-size:16px;
    font-weight:bold;
}

h2 {
    margin:0 0 6px;
    padding:0;
    font-size:14px;
    font-weight:bold;
}

a {
    font-size:16px;
    font-weight:bold;
    text-decoration:none;
    color:#4556a1;
}

.mod_navigation {
    width:200px;
    z-index:999;
}

Aussehen der Navigation im Level 1
.mod_navigation a,
.mod_navigation li,
.mod_navigation span {
    font:14px/1.5em Ubuntu,sans-serif,arial;
    font-weight:bold;
    color:#055b80;
    text-transform:capitalize;
    text-indent:5px;
}

Aussehen der Navigation im Level 2
.mod_navigation .level_2 a,
.mod_navigation .level_2 li,
.mod_navigation .level_2 span {
    font:12px Ubuntu,sans-serif,arial;
    font-weight:normal;
    color:#000;
    text-transform:none;
    text-indent:10px;
}

Farbe des aktuellen Menüpunktes
.mod_navigation span.active {
    font:14px Ubuntu,sans-serif,arial;
    font-weight:bold;
    text-decoration:underline;
    color:#147e87;
}
 
Hover-Effekt im Menü - Farbänderung
.mod_navigation a:hover {
    font:14px Ubuntu,sans-serif,arial;
    font-weight:bold;
    color:#0e689c;
}

Artikel-Darstellung
.mod_article {
    width:645px;
    position:relative;
    margin:0 0 25px;
    padding-right:0;
    padding-left:0;
}

img {
    margin-right:auto;
    margin-left:auto;
}

p,
pre,
form,
figure {
}
table {
    border-spacing:0;
}

:focus {
    outline:0;
}

und 2. die Default.css:

Style sheet default
body {
    background:#dff0f2 url("files/Heilsteine+Reiki/Bilder/Hintergrund_blau_1142x12.gif") center top repeat-y;
}

#wrapper {
    max-width:100%;
    margin-right:auto;
    margin-left:auto;
}

#main .inside {
    margin-bottom:20px;
}

#left {
    margin-top:52px;
}

#top_image {
    position:relative;
    margin-right:auto;
    margin-left:auto;
}

#top_image img {
    max-width:1142px;
    border:5px solid #378c30;
}

#top_image img {
    float:right;
    margin:0;
    padding:0;
}

#top_image:after {
    height:0;
    clear:both;
    display:block;
    line-height:0;
    content:".";
    visibility:hidden;
}

.ce_text,
.teaser {
    line-height:1.5;
}

div.error,
p.error {
    margin:0;
    padding:2px 0 0;
    font-size:10px;
    color:#f00;
}

Text innerhalb des Slider
.mod_article *[class*="mod_"] {
    padding-left: 0px!important;padding-right: 0px!important;
}

Zurück-Button
.mod_article .back {
    margin-top:18px;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
}

Weiterlesen?
.mod_article .more {
}

.mod_breadcrumb {
    margin-bottom:24px;
    padding:5px 3px 7px;
    background-color:#ece4d9;
}

.mod_navigation ul {
    margin:0 5px;
    padding:0;
    border-bottom:1px solid #c6ad8d;
    list-style-type:none;
}

.mod_navigation li {
    margin:0;
    padding:5px 0;
    border-top:1px solid #c6ad8d;
    list-style-type:none;
}

.mod_navigation .level_2 {
    padding:3px 0 0 9px;
    border-bottom:0px;
}

.mod_navigation .level_2 li {
    padding:0 0 3px;
    border-top:0px;
}

.mod_navigation a,
.mod_navigation li,
.mod_navigation span {
    font-size:14px;
    font-weight:bold;
    color:#000;
}

.mod_navigation .level_2 a,
.mod_navigation .level_2 li,
.mod_navigation .level_2 span {
    font-size:12px;
    font-weight:normal;
}

.mod_article,
.mod_newsreader {
    width:680px;
}

.pagination li {
    display:inline;
    margin:0;
    padding:0;
    list-style-type:none;
}

#tps td {
    padding:2px 4px;
}

.pagination {
    margin-top:22px;
    padding-top:4px;
    border-top:1px solid #ece4d9;
}

#tps .col_0 {
    width:80px;
}

.pagination p {
    width:160px;
    float:left;
    padding-right:3px;
    padding-left:3px;
    text-align:left;
}

#tps .explanation {
    padding-bottom:24px;
}
 
.pagination ul {
    width:240px;
    float:right;
    margin:0;
    padding:0 3px;
    text-align:right;
}

Ich hoffe, einer von Euch findet einen hilfreichen Ansatz - schon einmal vorab ein großes Dankeschön.

Mit besten Grüßen, Berliner

[wulf]

Deine navi hat zb grid4, dein Artikel grid13 (17er Grid ??), dann benutzt du mal feste Größenangaben und an anderer Stelle mal wieder Prozent usw.
Position:inherit und width: inherit erscheint mir bei deinem navi block auch nicht sinnvoll.

[BugBuster]

Was soll das grid12 im body Tag? Damit begrenzt du ja die Gesamtbreite schon, oder ist das Absicht?

[BugBuster]

Herje...
Warum bindest du das 16er Grid zweimal ein?
Einmal das komprimierte als erstes, dann später das unkomprimiert noch einmal.:

/* BugBuster: responsive-1140-16-percent.css, LGPL license */
...
/* Style sheet responsive-1140-16-percent-uncompressed */

Dann setzt du beispielsweise zweimal das Hintergrund Bild "Hintergrund_blau_1142x12.gif", einmal in der default und einmal in der basic CSS.
Und, dieses Hintergrundbild ist 1142 Pixel breit, das Grid hat aber 1140 Pixel Gesamtbreite.

Normalerweise installierst du das 16er Grid als Erweiterung und aktivierst es dann im Layout, wie hier rechts unten angedeutet (nur ohne Aktivierung)

[Berliner]

oje.. so viele Fehler ... kein wunder dass ich da nicht weiter komme...

Werde mich erst mal genau um diese Sachen kümmern...
Warum das 16er-Grid zweimal eingebunden wird, kann ich nicht nachvollziehen, denke aber, dass ich im Layout was falsch eingestellt habe.
Warum im Body ein Grid12 steht, kann ich derzeit auch nicht nachvollziehen..

..wie gesagt - Erst mal die Fehler beseitigen..

Ganz vielen Dank für Eure Mühen und Hinweise.

Beste Grüße und einen guten Start ins WE, Berliner

[Berliner]

Liebe Forengemeinde,

nun endlich ein Stand, der mir im groben gut gefällt.
Dank der Hinweise habe ich Layout-Einstellungen überarbeiten, diverse CSS-Eintragungen überarbeitet, bzw. ausgeblendet.
Nun sieht die Seite wieder wie eine ordentliche Seite aus.. Also daher nochmals vielen Dank an euch!

An zwei grundsätzlichen Problemen hänge ich allerdings nach rund 5h Arbeit immer noch:

1. Die Dev-Tools zeigen mir auf dieser Unterseite-Seite an, dass ich die Eintragung "ce_text block" ändern müsste, um die Aufzählung innerhalb des Containers / Main zu bekommen. (wie zu erkennen ist, sind die Aufzählungen / Nummerierungen außerhalb des Wrappers) Weder in der default- noch in der basic.css finde ich die entsprechende CSS-Definition, um diese Aufzählung in eine ansehbare Position zu bringen.
Muss ich extra eine Definition anlegen? Änderungen in ".mod article" brachten keine Auswirkungen zu Stande...

Der Quellcode gibt mir hier auch <div class="ce_text block" style="margin-bottom:16px;"> aus.

Ich denke, dass ich auch weiterhin nicht an der grid-css rumspielen muss, sondern der Fehler einfach in der default.- / basic.css liegt. (oder eben die reset.css - systemseitig eingebunden, die Probleme verursacht)


2. Wenn ich das responsive Verhalten teste (verkleinern / vergrößern der Seite mittels Browserfenster), bricht weder der Text um, noch schiebt sich die Navi nach unten, noch verkleinert sich das Headerbild entsprechend des "Views".

Muss ich hierzu doch zusätzliche "Breakpoints" einrichten, oder bezieht sich das "Breakpoint" ausschliesslich auf das mobile?


Vielen Dank noch einmal für eure Mühen, beste Grüße Berliner

[wulf]

Zu Frage 1:

.ce_block ol>li{margin-left:20px;}

und deine Aufzählung wird angezeigt

Zu Frage 2:
Kann man auch im normalen Browser durch verkleinern testen, bei mir funktioniert es "etwas". Das Bild wird anscheinend angepasst ( leider derzeitig nicht genau überprüfbar, da kein Bild angezeigt wird), der Text bricht um, die Navigation reagiert auch ( indem sie vollständig verschwindet)

[Berliner]

Deine navi hat zb grid4, dein Artikel grid13 (17er Grid ??), dann benutzt du mal feste Größenangaben und an anderer Stelle mal wieder Prozent usw.
Position:inherit und width: inherit erscheint mir bei deinem navi block auch nicht sinnvoll.

*grummel* irgendwie ist mein Beitrag untergegangen:

Hallo Wulf,

vielen Dank für deinen Hinweis - Selbstverständlich muss da grid3 stehen... Die Einstellungen diese grid4 stammt noch aus "Testzeiten" - vergessen, wieder zu ändern...

Was dieses "inherit" betrifft, so glaube ich mich zu erinnern, dass dieses mit "nach unten Springen der Navigation" bei einem mobilen Endgerät zu tun hatte... Aber nagel mich bitte nicht darauf fest *g*
Änderungen haben, zumindest in der FE-Vorschau, auf die normale Darstellung der Seite keinen Einfluss - oder irre ich mich da?
Was wäre denn deiner Meinung nach eine saubere css-Lösung? (Sofern ich mit meiner Erinnerung zur Aufgabe dieses "inherit" richtig liege?)

Trotzdem ganz dollen Dank, was deinen Tip betrifft - ich hätte mir wohl einen "Wolf gesucht"

Beste Grüße

[wulf]

Wie gesagt, ich kenne mich mit dem 16 Grid nicht wirklich aus, aber "inherit" sorgt tatsächlich dafür, dass die Navigation bei kleinen Bildschirmen nach unten wandern ( wobei ich eine unten liegende Navigation ja für fraglich halte), in Desktop-Ansicht stört das "inherit" allerdings (könnte man bestimmt über media-querries regeln).

[Berliner]

Zu Frage 1:

.ce_block ol>li{margin-left:20px;}

und deine Aufzählung wird angezeigt

Zu Frage 2:
Kann man auch im normalen Browser durch verkleinern testen, bei mir funktioniert es "etwas". Das Bild wird anscheinend angepasst ( leider derzeitig nicht genau überprüfbar, da kein Bild angezeigt wird), der Text bricht um, die Navigation reagiert auch ( indem sie vollständig verschwindet)

Guten Morgen,

der Tip mit dem CE_block {..} war genau der richtige. Habe die entsprechende Anweisung ".ce_text.block" in der basic.css. ergänzt

Vielen Dank, und einen schönen Sonntag.