Verständnisproblem für CSS (responsives Design)

[Berliner]

Liebe Forengemeinde,

leider habe ich zu meinem Problem hier nicht wirklich eine Lösung via Google oder Forum gefunden.

Anscheinend habe ich ein Verständnisproblem - welches vielleicht auf das "abarbeiten" des Praxistrainings (Responsives Webdesign) via DVD gemäß des CSS-Boxmodell basiert.
Derzeit bin ich total blockiert und hoffe, dass ich hier einen kleinen Stubs in die richtige Richtung bekomme...

Es geht um diese Seite. Im Anhang die neu angelegte CSS.

Folgendes Problem habe ich:

Wie man sieht, sind die einzelnen CSS-Module (Headerbild, Menü, Footer) völlig "ausser Form", d.h., sie passen sich nicht den Vorgaben der css an.

Komischerweise lädt die Seite (lt. Firebug für Crome) auch nicht die richtige CSS, sondern eine "xx55xxx66xxx.css"..
Nach vielen "googlen" musste ich zur Kenntnis nehmen, dass es keinen umschliessenden Container (div Container) für die Elemente Header, Artikel, Menü und Footer gibt, an dem ich die Elemente ausrichten kann (bzw. den ich als Bezug nutzen kann). "Wrapper" wird anscheinend in Contao 3.x von vorn herein durch das Theme gesetzt - ein Versuch mit #wrapper (oder #Container) in der CSS schlug fehl.

Vielleicht hat jemand ne Idee dazu - oder nen kleinen Stubser?

Vielen Dank im Voraus, der Berliner

Aussehen der gesamten Seite
body {
    background-color:#7ea7bf;
    background-repeat:repeat;
}

Aussehen des Headers
#headerbild {
    width:100%;
    max-width:100%;
    max-height:240px;
    background-color:#7ea7bf;
    background-repeat:repeat;
}

Aussehen der Navigation
#menue {
    width:28.26086956521739%;
    height:62.5%;
    max-width:260px;
    max-height:450px;
    background-color:#bfbdbd;
    background-repeat:repeat;
    text-transform:capitalize;
    list-style-type:none;
}

Aussehen des Artikels
#artikel {
    height:62.5%;
    min-height:62.5%;
    max-width:680px;
    max-height:450px;
    margin-right:auto;
    background-color:#fff;
}

Aussehen des Footers
#footer {
    width:100%;
    max-width:980px;
    max-height:50px;
    background-image:url("files/Reiki und Heilsteine/Bilder/footer.jpg");
    background-repeat:repeat;
}

[ciaobello]

Hast Du das schon mal Durchgelesen?
https://community.contao.org/de/show...ich-ge%E4ndert

Das Contao Responsive Design basiert auf dem "Holy Grail". Wenn Dein Responsives Design nicht darauf basiert, solltest Du es im Seitanlayout deaktivieren und anstelle Deines richtig einbinden.

Zudem den Quellcode angucken und schauen was für ID's und Klassen von Contao generiert werden und allenfalls Dein CSS danach anpassen.

[Berliner]

Hast Du das schon mal Durchgelesen?
https://community.contao.org/de/show...ich-ge%E4ndert

Das Contao Responsive Design basiert auf dem "Holy Grail". Wenn Dein Responsives Design nicht darauf basiert, solltest Du es im Seitanlayout deaktivieren und anstelle Deines richtig einbinden.

Zudem den Quellcode angucken und schauen was für ID's und Klassen von Contao generiert werden und allenfalls Dein CSS danach anpassen.

Vielen Dank erst mal für die Antwort. Wird mich dann erst mal dort durcharbeiten.

[Berliner]

Liebe Foren-Mitglieder,

nachdem ich nun dem Rat von ciaobello gefolgt bin, gelesen habe und mir in eigener Dummheit letztendlich das Layout und alles Drumherum "zerschossen" habe, steh ich nach einem "Neustart" wieder vor einem Problem - Für viele von euch sicherlich nur ein müdes Lächeln wert - Ich raufe mir die Haare! *lach*

Soweit gefällt mir diese Seite schon mal - das einzige, was ich einfach nicht hinbekomme ist, dass das Navigationsmenü oben (auf Höhe) des Artikels anfängt und unten mit dem Artikel aufhört, egal, wie lang der Artikel ist. So soll also die BG-Farbe, bzw. das BG Bild der Navigation bis auf den unteren Rand des Artikels (Artikel-Ende) ausgedehnt werden.

Vielleicht habe ich ja einfach nur einen Denkfehler bezüglich von %-Angaben in Bezug auf responsives Design?

Firebug sagt mir, dass es ein "left", "left.inside" , "mod_navigation" und "mod_navigation block" gibt... sämtliche Veränderungen, die ich dort vornahm, zeigten keinerlei Erfolg. Geladen werden sollen eigentlich die Default.css und die mobile.css - dass ich teilweise zwischen beiden im BE hin-und herspringen muss, hab ich schon bemerkt .

Vielleicht hat jemand eine Idee, was ich bisher übersehen haben könnte, um das Navigations-Menü, zumindest im Desktop-Screen "anzunageln"? (wenn ich dies Seite im "mobile" anschaue, kann ich eigentlich mit der derzeitigen Darstellung schon mal leben... Auch wenn`s später eines Feinschliffes bedarf )

Ich hoffe, jemand hat den richtigen Stubs für mich..

....


body {
    background-color:#7ea7b;
    background-repeat:repeat;
    font:12px Helvetica,Arial,sans-serif;;
    color:#4d4949;
}

#wrapper {
    max-width:100%;
}

Container (left + main)
#container {
    height:100%;
}

Hauptbereich - Artikel
#main {
    min-height:445px;
    max-height:100%;
    position:relative;
    margin-top:0;
    margin-bottom:10px;
    padding-top:5px;
}

#main .inside {
    height:50%;
    min-height:450px;
    max-height:100%;
    margin-left:5px;
    background-color:#fff;
    font:12px Helvetica,Arial,sans-serif;;
    color:#363535;
}

#left {
    height:100%;
    min-width:195;
    min-height:450px;
    max-width:195;
    max-height:1200px;
    top:5px;
    position:relative;
    margin-top:0;
    margin-bottom:10px;
    padding-top:5px;
    padding-bottom:5px;
}

#left .inside {
    height:100%;
    min-height:430px;
    max-height:100%;
    bottom:0;
    top:0;
    position:relative;
}

#top_image {
    margin-top:10px;
    margin-left:200px;
}



.....


.mod_navigation {
    height:100%;
    min-width:195px;
    min-height:450px;
    max-width:295px;
    max-height:1200px;
    position:relative;
    margin-top:5px;
    padding-top:15px;
    background-color:#cfcaca;
    background-image:url("files/Heilsteine+Reiki/navi_links.jpg");
    background-repeat:repeat-y;
    z-index:999;
}

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

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

Hover-Effekt im Menü - Farbänderung
.mod_navigation a:hover {
    font-size:14px;
    font-weight:bold;
    color:#0e689c;
}

Farbe des aktuellen Menüpunktes
.mod_navigation span.active {
    font-size:14px;
    font-weight:bold;
    font-style:italic;
    color:#147e87;
}

.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;
}

Danke schon einmal im Voraus, der Berliner.

[Spooky]

Du willst eigentlich dasselbe wie hier also: https://community.contao.org/de/show...ten-nachziehen

Ist aber nicht so ganz trivial. Wie schon in dem anderen thread erwähnt gibt es bspw. diese CSS only Lösung (neben vielen anderen möglichen Lösungen): https://community.contao.org/de/show...l=1#post273136 - erfordert aber eine Anpassung des fe_page templates (und mehr).
Oder eben eine mit JavaScript.

[Berliner]

Du willst eigentlich dasselbe wie hier also: https://community.contao.org/de/show...ten-nachziehen

Ist aber nicht so ganz trivial. Wie schon in dem anderen thread erwähnt gibt es bspw. diese CSS only Lösung (neben vielen anderen möglichen Lösungen): https://community.contao.org/de/show...l=1#post273136 - erfordert aber eine Anpassung des fe_page templates (und mehr).
Oder eben eine mit JavaScript.

Danke erst mal für die schnelle Antwort. Werde mich da mal reinlesen.