Bitte um Hilfe - Contao 3.1.x ; Elemten-Anordnung (Divs) verändern sich nicht
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:
Code:
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:
Code:
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
überarbeitet nach diversen Fehlerhinweisen
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
