Druckbare Version
was mache ich falsch? Wenn ich im Seitenlayout für einen 2 Spalter für zB linke Spalte 400 oder 500px eingebe rutscht die linke Spalte unter #main wenn ich das Browserfenster kleiner schieb, so ab 800px breite etwa. Der Platz der linken Spalte bleibt weiss, #main rutscht nicht nach links. Das ist gar nicht gut, denn für eine spezielle Seite möchte ich zwei gleichbreite Spalten haben, also meinetwegen#left 50% und #main 50%. Irgendwie bricht dann das layout.
Gibt es einen Link zur Seite? Was hast du an CSS aktiviert im Seitenlayout?
Seite wird offline aufgebaut, leider kein link.
Ein paar Eckdaten der css:
also fixer header mit nav, dazu eigener Layoutbereich unterhalb mit großen Bild ("header-wrapper"), optimiert auch für wide screen.Code:@charset "UTF-8";
/* CSS Document */
html {
overflow-y: scroll;
}
body {
background-image: url("files/Bildermappe/hg69.png");
background-position: left top;
background-repeat: repeat;
color: #545454;
font: 87.5% 'Open Sans Condensed', sans-serif;
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
max-width: 1600px;
}
#header {
width: 100%;
height: 60px;
min-height: 60px;
max-width: 1600px;
position: fixed;
color: #666;
box-sizing: border-box;
z-index: 40;
padding: 0px;
}
#header-wrapper {
height:296px;
box-sizing:border-box;
}
#container {
width: 96%;
max-width: 1600px;
margin: 0 20px 20px;
box-sizing: border-box;
}
#left {
padding: 20px;
box-sizing: border-box;
}
#main {
padding: 10px 10px 10px 30px;
box-sizing: border-box;
}
Das funktioniert auch alles bestens, wenn ich im Seitenlayout 240 px als Breite für die linke Spalte eingebe. Nur, wenn ich dort als Breite z.B 400 oder 500px eingebe passiert folgendes: Bei Browserbreiten über ca 850px ist alles ok, ziehe ich das Fenster weiter klein, springt left herunter, aber main nicht nach links, es entsteht links eine leere Fläche, und "left" steht unten drunter. Erst wenn ich den Browser noch weiter zusammenziehe auf 768px springt alles wie gewünscht nach links.
Statisches layout ist aktiviert, Breite 100%. Angehakt sind der Layout Buider, CSS Reset und responsives Layout und die eigenes css Dateien.
Bin ja irgendwie neu bei Contao, im Dreamweaver ist das (für mich) einfacher. Hier blicke ich noch nicht so durch, insbesondere was an css von Haus aus festgelegt ist und was mein eigenes css überschreibt.
Thomas
Hmm, ich glaube, das hatten wir schon mal. Wenn die Seitenspalten kleiner werden als die Hauptspalte, dann funktioniert das Holy-Grail CSS nicht mehr richtig. Da die Mehrspaltigkeit vom "responsiven Layout" erst bei 767px Fensterbreite auf einspaltig schaltet kommt es zu diesem Effekt zwischen 768 und 799 px, wenn die linke Spalte 400px breit ist, zwischen 768 und 999px wenn die Spalte 500px breit ist. Es liegt im Endeffekt daran, dass die linke Spalte ein margin-left von -100% hat, was nicht mehr reicht, wenn die linke Spalte breiter ist als die Hauptspalte. Irgendwo gabs da schon mal einen Thread dazu, ist aber schon ne Weile her. Ist jedenfalls eine bekannte Einschränkung. Prozentuale Seitenspalten funktionieren mit dem Layoutbuilder CSS prinzipiell auch nicht richtig.
Danke für den Hinweis, damit kann man leben - es dürfte ja eher eine Ausnahme sein, wäre aber auch nicht schlecht, wenn die Gralshüter das etwas mehr publik machen würden ;)
Hallo zusammen,
ich selber benutze zwar nicht das Contao Intere Grid System sondern Bootstrap, deswegen meinen Kommentar bitte nur als Anregung nehmen ;)
Wie schaut es denn aus, wenn man hier mit media Queries arbeitet ?
Das angehakte "responsive Layout" beinhaltet ja eine Media-Query, die das Layout for 767px und schmaler einspaltig macht. Das könnte man rauslassen und durch eigebes CSS mit Media-Queries ersetzen. Der Breakpunkt sollte dabei dann halt bei mindestens der doppelten Breite der linken Spalte liegen, dann tritt das Problem nicht auf. Bei 500px Breite der linken Spalte wäre das dann allerdings schon ab 1000px Viewport-Breite einspaltig, das wird auch nicht in jedem Fall gewollt sein.
IMHO hast du die äußeren Container zu sehr modifiziert. Wenn du das Contao-CSS-Framework benutzt, solltest du da erstmal nicht ran gehen. In der Online-Demo funktioniert das z.B. mit 50% für left sehr gut. Die Breite beim statischen Layout ist uninteressant, wenn du das responsive Grid benutzt, weil die Breite damit auf 960px eingestellt wird.
Für die Spalten in der Mitte könnteste du die flexbox-Eigenschaften nehmen, das dürfte damit sehr einfach sein und du könntest auf das Contao-Layout verzichten.