CSS Frage (betrifft Container und Inhaltscontainer)

Hallo liebe Community,

ich habe mal wieder eine Frage zu einem Thema, wo ich mir denke, dass die Lösung recht einfach sein muss, aber ich steh da echt grad aufn Schlauch.

Hier habe ich die DIV´s unterschiedlich eingefärbt, um alles besser zu erkennen.

Was will ich eigentlich?
Nunja, die Seite soll eine gute alte statische Seite werden (bitte nicht hauen, wird extra so gewünscht), ich kann jedoch keine einheitlich Hintergrundfarbe verwenden, da es ein paar Balken gibt die die gesamte Bildschirmbreite einnehmen sollen.

Von daher habe ich mir bisher damit abgeholfen, zB beim #header und beim #footer

Code:

---

#header {
    width:100%;
    background-color:#58585a;
}

#header .inside {
    width:960px;
    margin:0 auto;
}

---

was auch wunderbar funktioniert.

Nur beim Container will das nicht funktionieren, hier mal der code dazu:

Code:

---

#container {
    width:100%;
    background-color:#abcdef;
}

#container .inside {
    width:960px;
    margin:0 auto;
}

#main {
    background-color:#00f;
}

#right {
    background-color:#0f0;
}

---

Dass die rechte Spalte 200px hat, habe ich in den Layouteinstellungen schon eingestellt, und auch wenn ich hier dem #main noch 760px zuweise, wird die Mainspalte doch zu 100% Breite ausgegeben und die rechte Spalte klebt da ausserhalb des Containers noch dran. Diese sollte doch eigentlich auch innerhalb des "#container .inside" liegen, den ich eigentlich auf 960px begrenzt habe?

Kann mir hier jemand auf die Sprünge helfen?

Vielen Dank :)

Edit: wenn ich #main die 760px zuweise, dann wird der innere Container zwar schon mit 960px dargestellt, aber nicht mehr zentriert.

Edit 2: Peinlich :( grad gemerkt, dass es "#container .inside" ja garnicht gibt. Hmm aber wie kann ich nun trotz der width: 100% des #container´s die 2 Inhaltscontainer zentrieren?

Mach Dir unter dem Punkt "Templates" ne Kopie des fe_page-Templates, und in der Kopie fügst Du innerhalb des Container Deinen div.inside manuell hinzu. Dann hast Du Deinen benötigten Zentrierungs-Div. ;)

Danke für den Tipp, nun ist der Container zentriert, jedoch noch immer um die 200px breiter als der header und der footer (sieht man, dass man nach rechts scrollen kann)
Hängt wohl mit der rechten Spalte zusammen.

hier mal der code dazu:

Code:

---

#container {
    width:100%;
    margin:0 auto;
    background-color:#abcdef;
}

#container .inside {
    width:960px;
    margin:0 auto;
}

#main {
    width:760px;
    background-color:#00f;
}

#right {
    background-color:#0f0;
}

#footer {
    width:100%;
    margin:0 auto;
    background-color:#ac0000;
}

#footer .inside {
    width:960px;
    margin:0 auto;
    background-color:#ff0;
}

---

ich tippe auf

Code:

---

#container {padding-right: 200px;}

---

hmm, nö leider nicht

neuer versuch

Code:

---

#right .inside {width:960px;}

---

du meinst wohl 200px oder?

das hat zumindest schonmal verhindert, dass der text aus dem #right rausfährt. Was abe rkomisch ist, ich hab doch in den Layouteinstellungen die rechte Spalte schon mit 200px definiert.

#right hat ja auch die weite von 200px, aber das div ".inside" in right bekommt von #container .inside die 960px zugewiesen.
Könnte man ändern, indem man #container.inside schreibt

dazu müsste dann aber auch das Div #container selbst die Klasse .inside haben und nicht der DIV darin

Jo, hast recht, war eine dev-tool Falle, durch ändern von #container .inside in #container.inside wurde die Anweisung ungültig und dadurch hat #right width: 200px, wieder gewirkt.

Vielleicht noch jemand ne Idee, wie ich verhinden kann, dass der Container rechts um die 200x, die ja die rechte Spalte hat, zu breit ist?

Steht eigentlich schon oben, dein Container hat immer noch ein padding-right:200px, dadurch verlängert sich dieser halt um 200px.

Hmm, wo siehst du das? Ich hab nämlich dem Container kein padding-right:200px; verpasst

Anhang 11894

Ist inline gecodet

Oh, ok danke. Ich setze das also mit padding-right:-200px wieder auf Null?

Ich habe keine Ahnung woher der Style kommt, aber wenn du ihn überschreiben willst, dann mit #container {padding-right: 0px!important;}.
Kann es sein, dass die Zeile vom Contao-Layout kommt ? Statisches Layout und entsprechenden Werten in der Spaltenweite ?

Noch mal nachgesehen, kommt tatsächlich vom Layout-Builder.css

vielen dank, das wars :)

jetzt muss ich nur noch schaun, b das e in allen Browsern so funktioniert und die Media Query Angaben im layout.css zurücksetzen, damit die rechte Spalte bei kleinen Bildschirmen nicht runterrutscht, dann hab ich das gewünschte statische Layout

Hab zum überschreiben der Layout.css noch ne frage: man soll die datei direkt ja nicht ändern, weil sie dann nicht mehr updatesicher ist. Deshalb liest man immer, wenn amn ein statisches Layout möchte, die betreffenden Styles einfach überschreiben:

ok,d as sind nun die Styles, aus der layout.css, die die Spalten untereinander schieben bei ner gewisen Auflösung:

Code:

---

@media (max-width: 767px) {
#wrapper {
    margin: 0;
    width: auto;
}
#container {
    padding-left: 0;
    padding-right: 0;
}
#main, #left, #right {
    float: none;
    width: auto;
}
#left {
    margin-left: 0;
    right: 0;
}
#right {
    margin-right: 0;
}
}

---

wenn diese Anweisungen alle weg sind, bleibt die Seite statisch, aber mit welchen Werten soll ich sie überschreiben? Es stehen doch alle auf 0. Und man kann doch einen existierenden Style wie hier doch nicht mit einem anderen Style nicht einfach unexistent machen sondern halt nur andere Werte zuweisen

Kann man die einzelnen css nicht im Seitenlayout deaktivieren ?

ich habe das oben nun mal alles über den Haufen geworfen.

Wie ihr hier sehen könnt, soll es ein im Grunde einfaches statisches Layout werden, jedoch zwischen header und container und zwischen container und footer mit den durchgehenden weissen Linien, die sich über den ganzem Bildschirm strecken. Deshalb habe ich dem wrapper und auch den Divs #header, #container und #footer ursprünglich die width:100% verpasst und nur den jeweiligen .inside Containern mit der statischen Breite versehen.

Da machte mir jedoch der Layout Builder Probleme, und nun verzichte ich einfach darauf und habe das Grundlayout-CSS selbstgemacht.
Ich habe nun nur noch dem #wrapper, #header und #footer die width:100% verpasst, der #container hat nun fix die 960px und die weissen Linie enstehen nun einfach durch eine Rahmenlinie vom header und footer, die ja beide 100% breit sind.

Das funktioniert nun soweit auch alles

Anhang 11906

hmm, kann mir vielleicht jemand sagen, wie es zu dem Abstand zwischen den 2 roten Flächen kommt? kommt der automatisch durch den image_container, in dem das Bild liegt?

Evtl. mal img{display:block;} versuchen

super, danke :)

das wars