Hife! Formatierungen von mobilem CSS werden nicht dargestellt

AnyKey

Hilfe!

Ich habe folgendes Problem:

Ich habe zwei verschiedene css-Dateien, einmal für die normale Darstellung und einmal für eine mobile Darstellung.

In der normalen Darstellung wird auch alles so angezeigt, wie es sein sollte.

Nur mache ich das Browserfenster kleiner (bis das media query angesprochen wird), wird die Seite nur noch in der unformatierten, standardisierten HTML-Struktur nach den Browser-Defaults dargestellt (so als ob gar keine Styles definiert wurden).

Ich hab schon alles durchgesehen und finde des Fehler einfach nicht, kann mir jemand helfen?

Hier die Codes:

HTML-Bereich:

Code

<link type="text/css" rel="stylesheet" href="CSS/reset.css">


  <link type="text/css" rel="stylesheet" href="CSS/styles.css">


  <link type="text/css" rel="stylesheet" media="screen and max-width:800px" href="CSS/mobile.css">

Die styles.css:

Code

@media all and (min-width:801px) {




body {


    background: linear-gradient(-75deg, #444444 0%, #666666 50%, #000000 100%); background: -moz-linear-gradient(-75deg, #444444 0%, #666666 50%, #000000 100%); background: -webkit-linear-gradient(-75deg, #444444 0%, #666666 50%, #000000 100%); background: -ms-linear-gradient(-75deg, #444444 0%, #666666 50%, #000000 100%); background: -o-linear-gradient(-75deg, #444444 0%, #666666 50%, #000000 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#444444, endColorstr=#000000,GradientType=1);
    color: #202020;
    font-size:100%;
    font-family: Tahoma, Geneva, sans-serif;
    overflow-x:hidden;
    min-width:800px;
}








#header {
    width:90%;
    padding:2.5% 5%;
    border-top:#606060 solid 4px;
    border-bottom:#202020 solid 4px;
    margin:0;
    overflow:hidden;
    text-align:center;
    background-color:#404040;
}
    #header img {max-width:90%;}


#nav {

    width:100%;
    margin:0;
    color:#DDDDDD;
}
    #nav p {display:inline;}
    #nav img {display:none;}
    #nav a, #nav a:active, #nav a:visited {color:#DDDDDD;}
    #nav a:hover, #nav a:focus {color:white;}
    #navwrapper {width:100%;}
    #nav ul {
        display:block;

        list-style:none;
        margin:0 auto;
        width:100%;
    }
        #nav ul li {

            width:calc(20% - 2px);
            padding:1% 2.5%;
            float:left;
            border-left:#666666 solid 1px;
            border-right:#444444 solid 1px;
            border-bottom:#444444 solid 2px;
            text-align:center;
            color:#DDDDDD;
            font-family:Impact,Charcoal,sans-serif;
            font-size:1.088em;
        }


        #nav ul li:hover {background-color:#CC0000;color:white;}


        #nav ul li ul {display:none;}


        #nav ul li:hover ul {display:block;margin-top:calc(1% + 2px);margin-left:calc(-2.5% - 1px);list-style:none;position:absolute;}        

        #nav ul ul li {display:block;float:none;padding:0.5% 2.5%;text-align:left;font-size:0.938em;font-family:Tahoma,Geneva,sans-serif;font-weight:bold;border-bottom:#CCCCCC solid 1px;background-color:#111111;color:#DDDDDD;}
            #nav ul ul li:hover {background-color:#FF2222;color:white;}


            #spiel-ul {}
            #optionen-ul ul {width:120%;}
                #optionen-ul ul li {width:120%;}
            #highscore-ul {}
            #help-ul {}




#content {
    display:block;
    width:100%;
    padding:0;
    margin:0 auto;
    overflow:hidden;
    background-color:#999999;


}


    #userview {width:90%;padding:1.25% 5%;margin:0;color:#EEEEEE;font-size:0.938em;text-align:right;vertical-align:middle;}
        #userview img {max-width:32px;vertical-align:middle;}
            #userview #switchProfileView {margin-top:-1%;}
            #userview .notice {font-size:0.875em;line-height:1.3;}




#leftbar {width:25%;padding:2.5%;margin:0;background-color:#999999;color:ivory;text-align:center;float:left;}


#rightbar {width:60%;padding:1.25% 5%;margin:0;text-align:center;float:left;background-color:rgba(160,160,160,0.75);}


#canvasDiv {
    min-height: 400px;
}


    


#footer {
    width:100%;
    font-size:0.875em;
    overflow:hidden;
    background-color:rgba(8,8,8,0.8);
    color:#EEEEEE;
    padding-bottom:2.5%;

}


    #footer ul {
        list-style:none;
        margin:2% auto;
        display:block;
        text-align:center;
        margin-bottom:2%;
    }

        #footer ul li {
            display:inline-block;
            margin:0 5%;
        }


    #footer p {text-align:center;font-size:0.875em;}





.leftcol {float:left;text-align:left;vertical-align:middle;width:50%;margin:0;}
.rightcol {float:right;text-align:right;vertical-align:middle;width:50%;margin:0;}




#cleft {width:16%;padding:2%;margin:2%;float:left;height:600px;border:2px black solid;}


#cmid {width:42%;padding:2%;margin:2%;float:left;height:600px;border:2px black dashed;}


#cright {width:16%;padding:2%;margin:2%;float:right;height:600px;border:2px black solid;}



.clear {clear:both;}




h1 {font-family:Impact, Charcoal, sans-serif; font-size:2.5em;}
h2 {font-family:Impact, Charcoal, sans-serif; font-size:1.25em;padding-bottom:0.5%;border-bottom:1px black solid;display:block;width:96%;margin:0.5% auto;}


a, a:active, a:visited {color:#F00000;text-decoration:none;}
a:hover, a:focus {color:#888888;}


#flag {width:20px;height:20px;margin:0 auto;}


#socialmediablock {width:99%;margin:0.5% auto;text-align:justify;}
#fullscreenbutton {width:236px;height:24px;margin:1% auto;background-color:#555555;color:#EEEEEE;text-align:center;padding-top:4px;vertical-align:middle;}
    #fullscreenbutton:hover {background-color:#CC0000;color:white;}


#spectatebutton {width:85%;padding:1.5% 2.5% 1.75%;background-color:#555555;color:#EEEEEE;text-align:center;vertical-align:middle;}
#letspectatebutton {width:85%;padding:1.5% 2.5% 1.75%;background-color:#555555;color:#EEEEEE;text-align:center;vertical-align:middle;}
    #spectatebutton:hover,#letspectatebutton:hover {background-color:#CC0000;color:white;}


input, label {}


#userline {background-color:#777777;width:100%;}


#changeDesign {width:90%;padding:2.25% 5% 0;margin:0;color:#EEEEEE;font-size:0.938em;font-weight:bold;text-align:left;vertical-align:middle;}
    #changeDesign span {vertical-align:middle;}
    .cdbutton {width:16px;height:16px;border:1px solid black;display:inline-block;margin:0 0.5%;vertical-align:middle;}
    #greydesign {background-color:#444444;} #reddesign {background-color:#CC0000;} #bluedesign {background-color:#2222FF;}


.scoretable {width:80%;margin:1.25% auto;max-width:960px;border:1px #444444 solid;background-color:#111111;font-size:1.125em;}
.tableheader {width:90%;padding:2.5% 4.7%;margin:0 auto;background-color:#CC0000;color:ivory;border:1px #444444 solid;}
    .tableheader h2 {border-bottom:0;}
    .tablecellleft {width:60%;padding:2.33%;margin:0;text-align:left;color:#CCCCCC;border:1px #555555 solid;float:left;}
    .tablecellright {width:30%;padding:2.33%;margin:0;text-align:right;color:#CCCCCC;border:1px #555555 solid;float:right;}




.textfield {width:85%;padding:3.33%;margin:1.25% auto;text-align:justify;}
    .textfield h2 {border-bottom:0;}


    #credits {text-align:center;}




table  {width:80%;margin:1.25% auto;max-width:960px;border:1px #444444 solid;background-color:#111111;font-size:1.125em;}
table th {width:55%;padding:2.66% 2.33%;margin:0;background-color:#CC0000;color:ivory;border:1px #444444 solid;}
.thpoints {width:25%;}
.thavatar [width:10%;}
table td .playername {width:60%;padding:2.33%;margin:0;text-align:left;color:#CCCCCC;border:1px #555555 solid;}
table td .points {width:25%;padding:2.33%;margin:0;text-align:right;color:#CCCCCC;border:1px #555555 solid;}
table td .avatar {width:10%;padding:2.33%;margin:0;text-align:center;color:#CCCCCC;border:1px #555555 solid;}






/* greystyles */
.greystyle1 {background-color:#202020;} /* body */
.greystyle2 {background-color:#404040;border-top:#606060 solid 4px;border-bottom:#202020 solid 4px;} /* header */
.greystyle3 {border-left:#666666 solid 1px;border-right:#444444 solid 1px;border-bottom:#444444 solid 2px;} /* nav ul li */
.greystyle4 {background-color:#999999;} /* content - leftbar */
.greystyle5 {background-color:#A0A0A0;} /* rightbar */
.greystyle6 {background-color:#555555;} /* fullscreenbutton - spectatebutton - letspectatebutton */
.greystyle7 {background-color:#777777;} /* userline */
.greystyle8 {border:1px #444444 solid;background-color:#111111;} /* table */
.greystyle9 {border:1px #444444 solid;background-color:#CC0000;} /* table th */
.greystyle9a {border:1px #555555 solid;} /* table td */


/* redstyles */
.redstyle1 {background-color:#991111;} /* body */
.redstyle2 {background-color:#800000;border-top:#606060 solid 4px;border-bottom:#400000 solid 4px;} /* header */
.redstyle3 {border-left:#C00000 solid 1px;border-right:#880000 solid 1px;border-bottom:#880000 solid 2px;} /* nav ul li */
.redstyle4 {background-color:#ff5555;} /* content - leftbar */
.redstyle5 {background-color:#ff4040;} /* rightbar */
.redstyle6 {background-color:#AA0000;} /* fullscreenbutton - spectatebutton - letspectatebutton */
.redstyle7 {background-color:#CC1111;} /* userline */
.redstyle8 {border:1px #444444 solid;background-color:#111111;} /* table */
.redstyle9 {border:1px #444444 solid;background-color:#CC0000;} /* table th */
.redstyle9a {border:1px #555555 solid;} /* table td */


/* bluestyles */
.bluestyle1 {background-color:#6666FF;} /* body */
.bluestyle2 {background-color:#1111CC;border-top:#22EEEE solid 4px;border-bottom:#111166 solid 4px;} /* header */
.bluestyle3 {border-left:#666666 solid 1px;border-right:#444444 solid 1px;border-bottom:#444444 solid 2px;} /* nav ul li */
.bluestyle4 {background-color:#8888FF;} /* content - leftbar */
.bluestyle5 {background-color:#4444FF;} /* rightbar */
.bluestyle6 {background-color:#2222CC;} /* fullscreenbutton - spectatebutton - letspectatebutton */
.bluestyle7 {background-color:#1111EE;} /* userline */
.bluestyle8 {border:1px #444444 solid;background-color:#000022;} /* table */
.bluestyle9 {border:1px #444444 solid;background-color:#2222CC;} /* table th */
.bluestyle9a {border:1px #555555 solid;} /* table td */






}

Alles anzeigen

Die mobile.css

Code

body {    background: linear-gradient(-75deg, #444444 0%, #666666 50%, #000000 100%); background: -moz-linear-gradient(-75deg, #444444 0%, #666666 50%, #000000 100%); background: -webkit-linear-gradient(-75deg, #444444 0%, #666666 50%, #000000 100%); background: -ms-linear-gradient(-75deg, #444444 0%, #666666 50%, #000000 100%); background: -o-linear-gradient(-75deg, #444444 0%, #666666 50%, #000000 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#444444, endColorstr=#000000,GradientType=1);
          color: #202020;
          font-size:100%;
          font-family: Tahoma, Geneva, sans-serif;
          overflow-x:hidden;
        min-width:240px;   }


header { width:90%;
         padding:2.5% 5%;
         border-top:#606060 solid 4px;
         border-bottom:#202020 solid 4px;
         margin:0;
         overflow:hidden;
         text-align:center;
         background-color:#404040;
}
    #header img {max-width:90%;}


#nav {


    width:100%;
    margin:0;
    color:#DDDDDD;
}
      #nav a, #nav a:active, #nav a:visited {color:#DDDDDD;}
          #nav a:hover, #nav a:focus {color:white;}
          #navwrapper {width:100%;}
          #nav ul {
              display:block;


              list-style:none;
              margin:0 auto;
              width:100%;
          }
              #nav ul li {


                  width:calc(20% - 2px);
                  padding:1% 2.5%;
                  float:left;
                  border-left:#666666 solid 1px;
                  border-right:#444444 solid 1px;
                  border-bottom:#444444 solid 2px;
                  text-align:center;
                  color:#DDDDDD;
                  font-family:Impact,Charcoal,sans-serif;
                  font-size:1.088em;
              }


    #nav p {display:none;}


    #nav img {display:inline;}


    #nav ul li:hover {background-color:#CC0000;color:white;}


        #nav ul li ul {display:none;}


        #nav ul li:hover ul {display:block;margin-top:calc(1% + 2px);margin-left:calc(-2.5% - 1px);list-style:none;position:absolute;}


        #nav ul ul li {display:block;float:none;padding:0.5% 2.5%;text-align:left;font-size:0.938em;font-family:Tahoma,Geneva,sans-serif;font-weight:bold;border-bottom:#CCCCCC solid 1px;background-color:#111111;color:#DDDDDD;}
            #nav ul ul li:hover {background-color:#FF2222;color:white;}




            #spiel-ul ul {width:398%;}
            #optionen-ul ul {margin-left:-99%;width:398%;}
            #highscore-ul ul {margin-left:-199%;width:398%;}
            #help-ul ul {margin-left:-299%;width:398%;}


#content {
    display:block;
    width:100%;
    padding:0;
    margin:0 auto;
    overflow:hidden;
    background-color:#999999;


}


#userview {width:90%;padding:1.25% 5%;margin:0;color:#EEEEEE;font-size:0.938em;text-align:right;vertical-align:middle;}
        #userview img {max-width:32px;vertical-align:middle;}
            #userview #switchProfileView {margin-top:-1%;}
            #userview .notice {font-size:0.875em;line-height:1.3;}








#socialmediablock {width:96%;}


#leftbar {width:25%;padding:2.5%;margin:0;background-color:#999999;color:ivory;text-align:center;float:none;}


#rightbar {width:60%;padding:1.25% 5%;margin:0;text-align:center;float:none;background-color:rgba(160,160,160,0.75);}


table {width:96%;}




#footer {
    width:100%;
    font-size:0.875em;
    overflow:hidden;
    background-color:rgba(8,8,8,0.8);
    color:#EEEEEE;
    padding-bottom:2.5%;


}


    #footer ul {
        list-style:none;
        margin:2% auto;
        display:block;
        text-align:center;
        margin-bottom:2%;
    }


        #footer ul li {
            line-height:1.3;
        }


    #footer p {text-align:center;font-size:0.875em;}


.clear {clear:both;}


h1 {font-family:Impact, Charcoal, sans-serif; font-size:2.5em;}
h2 {font-family:Impact, Charcoal, sans-serif; font-size:1.25em;padding-bottom:0.5%;border-bottom:1px black solid;display:block;width:96%;margin:0.5% auto;}


a, a:active, a:visited {color:#F00000;text-decoration:none;}
a:hover, a:focus {color:#888888;}


#flag {width:20px;height:20px;margin:0 auto;}


#socialmediablock {width:99%;margin:0.5% auto;text-align:justify;}
#fullscreenbutton {width:236px;height:24px;margin:1% auto;background-color:#555555;color:#EEEEEE;text-align:center;padding-top:4px;vertical-align:middle;}
    #fullscreenbutton:hover {background-color:#CC0000;color:white;}


#spectatebutton {width:85%;padding:1.5% 2.5% 1.75%;background-color:#555555;color:#EEEEEE;text-align:center;vertical-align:middle;}
#letspectatebutton {width:85%;padding:1.5% 2.5% 1.75%;background-color:#555555;color:#EEEEEE;text-align:center;vertical-align:middle;}
    #spectatebutton:hover,#letspectatebutton:hover {background-color:#CC0000;color:white;}


input, label {}


.leftcol {float:none;text-align:left;vertical-align:middle;width:100%;margin:0;}
.rightcol {float:none;text-align:right;vertical-align:middle;width:100%;margin:0;}


#userline {background-color:#777777;width:100%;}
    #userline .leftcol {display:none;}


#changeDesign {display:none;}




.textfield {width:85%;padding:3.33%;margin:1.25% auto;text-align:justify;}
    .textfield h2 {border-bottom:0;}


    #credits {text-align:center;}






table  {width:80%;margin:1.25% auto;max-width:960px;border:1px #444444 solid;background-color:#111111;font-size:1.125em;}
table th {width:55%;padding:2.66% 2.33%;margin:0;background-color:#CC0000;color:ivory;border:1px #444444 solid;}
.thpoints {width:25%;}
.thavatar [width:10%;}
table td .playername {width:60%;padding:2.33%;margin:0;text-align:left;color:#CCCCCC;border:1px #555555 solid;}
table td .points {width:25%;padding:2.33%;margin:0;text-align:right;color:#CCCCCC;border:1px #555555 solid;}
table td .avatar {width:10%;padding:2.33%;margin:0;text-align:center;color:#CCCCCC;border:1px #555555 solid;}

Alles anzeigen

Ganz vielen Dank schon mal im voraus!

MrMurphy

Hallo

Der Link zu der Seite fehlt.

Hast du mal

Code

<link type="text/css" rel="stylesheet" media="screen and (max-width:800px)" href="CSS/mobile.css">

probiert?

Wobei dein Vorgehen sich bereits als Irrweg erwiesen hat. Warum gehst du ihn trotzdem?

Gruss

MrMurphy

AnyKey

Danke.

Es klappt wieder.

Welches Vorgehen würdest Du denn alternativ vorschlagen?

Tags