Probleme mit Media Queries von Contao 3

[fall2out]

Hallo Leute,

ich hab ein paar Fragen. Habe schon einige Seiten mit Media Queries gebaut und es klappte auch immer wunderbar, aber nun bin ich am verzweifeln.

Bildschirmfoto 2013-06-29 um 20.04.23.png

Hier sieht man die CSS Dateien die ich angelegt habe! So ich habe z.B. einen Header der :fixed ist wie man hier http://www.hewamed.net sehen kann. Der Code war z.B.

#header {
    width:100%;
    height:80px;
    top:0;
    position:fixed;
    margin:0;
    padding:0;
    background-color:#FFF;
    border-top:6px solid #357EBF;
    z-index: 10;
    -webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.75);
}

Nun wollte ich die Position für Mobile Geräte :relative haben, und konnte es nur wie folgt lösen:

header#header {
    height:100%;
    position:relative;
    text-align:center;
}

Eigentlich hätte ich einfach in der Mobilen CSS

#header {
    height:100%;
    position:relative;
    text-align:center;
}

das hier geschrieben. Aber dann packt er die CSS einfach unter meiner Layout CSS die ja für >768px gedacht ist. Was passiert da? Das gleiche hatte ich mit dem Footer und vielen anderen Dingen. Nun möchte ich z.B. das Background-Image bzw. die Position ändern. So sieht es in der Layout.css aus:

html {
    overflow-Y:scroll;
    background: url(/files/theme/bg/bg1.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: 0px 86px;
}

Jetzt schreibe ich in der Mobile.css folgendes:

html {
    background-image:url("/files/theme/bg/bg1.jpg");
    background-repeat:no-repeat;
    background-attachment: fixed;
    background-clip: border-box;
    background-color: transparent;
    background-origin: padding-box;
    background-position: 0 0;
    background-size: cover;
    overflow-y: scroll;
}

Und es passiert nix. Ich dreh ab! :-) und jetzt kommt das aller schlimmste:

Bildschirmfoto 2013-06-29 um 20.18.30.png

Warum kommt so etwas wenn man Width auf 100% stellt?

So das wars :-) Hoffentlich ist ein Profi da, der mir aus der Misere helfen kann.

Lieben Gruß Simon

[Fkhm]

Hast du mal eine reset.css eingebunden, die alle margins und paddings auf 0 setzt?

Ansonsten typische Frage: Ist die mobile.css im Layout aktiviert? Blöde Frage aber daran lags schon einige Male ;-)

Edit: Das mit dem Horrizontalen-Scrollen lässt sich beheben in dem du bei

#footer

das

padding: 10px;

rausnimmst.

Edit: bzw. durch die 2 Befehle:

padding-top:10px;
padding-bottom:10px;

ersetzt.

[fall2out]

Super Danke! Also darauf hätte ich eigentlich kommen müsssen :-D Habe das adding nun in der #footer .inside eingefügt! Jetzt ist das kein Problem mehr!


Die Mobile.css ist eingebunden, man sieht ja auch das sich etwas bei verkleinern verändert! Nur verstehe ich nicht wenn ich in der layout.css einen html tag einfüge, dann muss sich dieser doch wieder mit dem html tag in der Mobil.css ändern lassen oder? Ging doch immer so....

Probiert das bitte einmal aus :-) Danke!


Ach noch einmal eine kleine Frage: Wie schreibt ihr eure CSS tags?

So z.B.

#wrapper div#header .inside {}

oder einfach nur

#header .inside {}

Was ist besser bzw. warum sollte man es so schreiben?

[Fkhm]

also das #wrapper mache ich nie, da im standard template ja alles im wrapper liegt, einzig um dem wrapper selbst die ein oder andere Formatierung zu geben.

Was mir noch auffällt gerade, dass im Footer teile vom Text verschwinden, wenn ich das Fenstser verkleinere, kann dir aber grad nicht sagen welche Auflösung es hat. Also "M" und "AGB" sind nicht mehr sichtbar, da kein horrizontales scrollen möglich ist.

Wenn ich einen css Pfad nicht kenne, kopiere ich ihn mir vom css mittels Firebug und erhalte z.B.

html body#top.win div#wrapper footer#footer div.inside a

wovon ich alles unnötige wegstreiche:
#footer .inside a

im Notfall dann noch anpassen mit

#footer .inside > a

oder aus

html body#top.win div#wrapper header#header div.inside nav.mod_navigation ul.level_1 li.active span.active

mache ich dann ein

#header .inside .mod_navigation > ul.level_1 > li.active > span.active

[fall2out]

Das darstellungsproblem konnte ich grad nicht sehen. Wofür sind die > klammerpfeile ? Sind die notwendig?

[Fkhm]

Ich mache später mal einen Screen, bin gleich auf dem Wasser ;-)

Das mit den > musste ich auch erst noch lernen, habe ich letztens hier im Forum erst kennen gelernt und bedeutet in folgendem Link beschriebenes:

http://www.css4you.de/wscss/css04.html