Ergebnis 1 bis 3 von 3

Thema: Hife! Formatierungen von mobilem CSS werden nicht dargestellt

  1. #1
    Interessierte/r Avatar von AnyKey
    Registriert seit
    31.01.2016
    Ort
    Raum Oldenburg / Bremen
    Beiträge
    107
    Danke
    16
    Bekam 0 mal "Danke" in 0 Postings

    Standard Hife! Formatierungen von mobilem CSS werden nicht dargestellt

    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 */
    
    
    
    }
    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;}

    Ganz vielen Dank schon mal im voraus!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Drücken Sie die Any-Taste um fortzufahren!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    620
    Danke
    0
    Bekam 72 mal "Danke" in 70 Postings

    Standard AW: Hife! Formatierungen von mobilem CSS werden nicht dargestellt

    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

  3. Folgende User finden die Antwort von MrMurphy gut:


  4. #3
    Interessierte/r
    Themenstarter
    Avatar von AnyKey
    Registriert seit
    31.01.2016
    Ort
    Raum Oldenburg / Bremen
    Beiträge
    107
    Danke
    16
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hife! Formatierungen von mobilem CSS werden nicht dargestellt

    Danke.

    Es klappt wieder.

    Welches Vorgehen würdest Du denn alternativ vorschlagen?
    Drücken Sie die Any-Taste um fortzufahren!

Ähnliche Themen

  1. Aufzählungszeichen werden nicht dargestellt
    Von Chamy im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 26.03.2016, 14:59
  2. google sitelinks werden nicht dargestellt
    Von html_hilfe_123 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 06.05.2014, 12:20
  3. ö ü ä ß werden als Fragezeichen dargestellt - was tun?
    Von wuppino im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 12.02.2008, 21:25
  4. Tabellen größen werden von IE nicht richtig dargestellt
    Von pbc-a im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 11.09.2006, 12:03
  5. Bestimmte Bilder werden nicht dargestellt
    Von Tom83 im Forum HTML & CSS Forum
    Antworten: 14
    Letzter Beitrag: 14.05.2004, 13:35

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •