16-Spalten-Grid - Layout "spinnt" auf einigen Seiten, Contao 3.1.0
Guten Abend liebe Foren-Gemeinde,
meinen Wunsch, ein responsives Design mit einem Grid-System zu lösen, habe ich erst mal abgeschrieben, als ich hier verschiedene Beiträge las, dass ein Grid-System nicht gleichzusetzen ist mit einem responsiven System.
Mein eigentliches Problem besteht allerdings derzeit darin, dass auf einigen! Seiten das Layout nicht stimmt; d.h., dass entweder Headerbild, Text und Navigation nach links, bzw. rechts springen. Aber wie schon erwähnt, nur auf einigen Seiten...
Ich hänge derzeit daran, dass ich einfach die Ursache hierfür nicht finde.
Kurze Eckdaten zur Webseite:
1. 16-Spalten-Grid (1140er Prozent Grid - ohne Holy Grail, 2 Spalten) in Verbindung mit dem Layout-Bilder,
2. es ist nur die basic.css und die mobile.css geladen / angehakt (wobei ich derzeit die mobile.css noch vernachlässigt habe).
Deaktiviere ich den Layoutbilder, wird die Navigation nach unten geschoben und alles ist linksbündig.
Die entsprechende Webseite ist hier zu sehen.
Hier die komplette basic.css; diese wird lt. FF (Firebug) und Chrome (implementiertes Tool) abgearbeitet.
Code:
Name: basic
Änderungsdatum: 2013-09-07 17:37
Medientypen: all
Style sheet basic
body {
margin:0;
padding:0;
background:#dff0f2 url("/files/Heilsteine+Reiki/Hintergrund_blau.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 {
position:relative;
margin-right:auto;
margin-left:auto;
padding-top:5px;
padding-bottom:5px;
font-family:Ubuntu,sans-serif,arial;
}
#container {
padding-bottom:50px;
}
#container,
.inside {
position:relative;
}
linke Spalte (Navigation)
#left {
position:relative;
float:left;
margin-top:52px;
}
#main {
width:100%;
position:relative;
float:left;
}
Hauptspalte
#main .inside {
min-height:1px;
position:relative;
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 {
vertical-align:middle;
border:0px;
}
p,
pre,
form,
figure {
}
table {
border-spacing:0;
}
:focus {
outline:0;
}
Vielleicht hat jemand von euch schon Erfahrungen mit dem 16-Spalten-Grid und eine Idee dazu?
Des Weiteren habe ich folgende Grundsatzfragen, zu denen mich Eure Meinung und Erfahrung interessieren würde:
1. Ich habe gelesen, dass man ein Raster über die Seite legen kann - Gibt es hierfür schon einen Thread, in der das beschrieben ist?
2. Was ist davon zu halten, Trennungen verschiedener Seiten-Einstellungen via basic.css, layout.css, usw. beizubehalten, bzw. aufzubauen? Ist dieses nur eine Sache der Übersicht?
Und ja... ich weiss, dass es vermessen ist, als Anfänger sich an so was ranzutrauen! ;)
Vielen Dank schon im Voraus für eure Hilfe,
Beste Grüße, Berliner
Liste der Anhänge anzeigen (Anzahl: 1)
Leider gibt's ein weiteres Problem, welches wohl allerdings eher in einen "Grundlagen-Thread" gehört. Leider habe ich zu meinem Problem nicht viel gefunden, ausser das hier.
Für mich steht ebenfalls die Frage, wie ich das Grid-System nun nachträglich anwende. Informationen / Grundlagen über ein 12Spalten-Grid lassen sich ja normalerweise ohne Probleme auf ein 16Spalten-Grid übertragen, oder?
Für die Artikel ist mir das soweit klar - denke ich... Siehe Screenshot.
Aber was ist mit der Navigation?
Muss ich ggf. das komplette Seitenlayout überarbeiten, bzw. ein neues erstellen?
Vielleicht hat jemand von euch einen "Grundlagen-Workshop" im Web gesehen, den ich durchrackern kann? Google wirft leider nicht viel aus, ausser ggf. kostenpflichtige Tutorials.. :(
Danke im Voraus an euch für eventuelle Tips.
Beste Grüße
