1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Anzeigeprobleme in Chrome

Dieses Thema im Forum "Alles rund HTML und XHTML" wurde erstellt von Screencore, 29 Dezember 2016.

  1. Screencore

    Screencore Neues Mitglied

    Registriert seit:
    29 Dezember 2016
    Beiträge:
    5
    Punkte für Erfolge:
    1
    Hallo Community,

    ich bin schon seit einiger Zeit dabei eine Website zu designen, im IE (neueste Version) lässt sich alles Prima anzeigen lassen. Im Chrome ist alles verrückt. Hier ein Beispiel meines Register PopUps: (Im Anhang befinden sich zwei Screenshots)
     

    Anhänge:

    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.225
    Punkte für Erfolge:
    63
    Hallo

    Du hast den Link zu der Seite vergessen.

    Bilder helfen nur bei der Problembeschreibung, nicht jedoch bei der Fehlersuche.

    Gruss

    MrMurphy
     
  3. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.187
    Punkte für Erfolge:
    63
    Oder alternativ ein Demo auf https://jsfiddle.net, falls die Seite noch nicht online ist.

    Der erste Eindruck, was die Ursache sein könnte: Da in Chrome alles (Schriftgröße, Formularelemente) größer erscheint, überprüfe zunächst mal, ob der Zoomfaktor in beiden Browsern identisch ist (Reset auf 100% = STRG + 0).
     
  4. Screencore

    Screencore Neues Mitglied

    Registriert seit:
    29 Dezember 2016
    Beiträge:
    5
    Punkte für Erfolge:
    1
    Am großen Bildschirm bei mir funktioniert die Seite jetzt auf Chrome & IE :D auch wenn ich die auflösung runter auf 1024x1080 einstelle. Sobald ich jedoch zum Laptop - Screen umschalte sind manche Input felder oder sonstiges verschoben
     
  5. bdt600

    bdt600 Senior HTML'ler

    Registriert seit:
    30 Mai 2012
    Beiträge:
    3.747
    Punkte für Erfolge:
    83
    Ähmmmm, was hast du daran nicht verstanden:
     
  6. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.187
    Punkte für Erfolge:
    63
    Wenn Du hier zielführende Antworten lesen willst, ist es an der Zeit, unserer Bitte nachzukommen, und das Demo hier zu verlinken - sei es auf Deinem Webserver oder auf jsfiddle.net
     
  7. Screencore

    Screencore Neues Mitglied

    Registriert seit:
    29 Dezember 2016
    Beiträge:
    5
    Punkte für Erfolge:
    1
    <!--Taskchat - GRI - Startseite(Index)-->

    Code (html5):
    1. <!DOCTYPE html>
    2.     <head>
    3.  
    4.     <link href='[URL]https://fonts.googleapis.com/css?family=Montserrat:700[/URL]' rel='stylesheet'>
    5.     <link href='[URL]https://fonts.googleapis.com/css?family=Quicksand[/URL]' rel='stylesheet'>
    6.     <link href="[URL]https://fonts.googleapis.com/css?family=Dosis[/URL]" rel="stylesheet">
    7.     <link href="[URL]https://fonts.googleapis.com/css?family=Baloo+Bhaina[/URL]" rel="stylesheet">
    8.     <link rel='stylesheet' type="text/css" href="css/index_style.css">
    9.  
    10.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    11.         <title>Task Chat</title>
    12.     <style type="text/css">
    13.     a:link {
    14.             text-decoration:none;
    15.             font-family: Arial, Helvetica, 'sans serif';
    16.             font-weight:bold;
    17.     }
    18.     </style>
    19.     </head>
    20.  
    21.     <body style="background-color:#000; margin:0px; padding:0px;">
    22.         <div style="height:50%; width:50%;margin:0px auto;background-color:#000; text-align:center;">
    23.             <img src="Bilder/TaskchatSchriftzug.png" style="width:95%; height:95%;" />
    24.         </div>
    25.         <!-- Register Button -->
    26.         <a class="ghost-button-semi-transparent2" href="#popup1">Registrieren</a>
    27.         <div id="popup1" class="overlay">
    28.         <div class="popup">
    29.         <h2>Registrieren</h2>
    30.         <a class="close" href="#">×</a>
    31.         <div class="content">
    32.         <ul class="input-list style-4 clearfix">
    33.             <li>
    34.                     <input type="text" placeholder="Username" size = "35" class = "focus">
    35.             </li>
    36.                 <br />
    37.             <li>
    38.                     <input type="text" placeholder="E-Mail" size = "35" class = "focus">
    39.             </li>
    40.         </ul>
    41.         <ul class="input-list style-5 clearfix">
    42.             <li>
    43.                 <input type="password" placeholder="Passwort" size = "35" class="focus">
    44.             </li>
    45.                 <br />
    46.             <li>
    47.                 <input type="password" placeholder="Passwort" size = "35" class="focus">
    48.             </li>
    49.         </ul>
    50.             <button type="submit">Registrieren</button>
    51.         </div>
    52.         </div>
    53.         </div>
    54.         <!-- Enter as Guest Button Hauptseite -->
    55.         <a class="ghost-button-semi-transparent" href="Seiten/Menue.html">Enter as Guest</a>
    56.                          
    57.         <div style="height:220px; width:100%; position: absolute; bottom: 0;background-color:#00a8ff; text-align:center;">
    58.             <span style="font-family: 'Baloo Bhaina', cursive; font-weight:bold;font-size:36pt;">
    59.                 Login
    60.             </span>
    61.  
    62.             <table style="width:100%; margin:-20px auto; text-align:center;">
    63.                 <tr>
    64.                     <td>
    65.                         <input type="text" placeholder="E-Mail"  style="height:30px; width:250px;">
    66.                     </td>
    67.                 </tr>
    68.                 <tr>
    69.                     <td>
    70.                         <input type="password" placeholder="Passwort" size="35"  style="height:30px; width:250px;">
    71.                     </td>
    72.                 </tr>
    73.             </table>
    74.                                         <!-- Passwort vergessen? -->
    75.             <a href="#popup_pw"/><p style="font-size:15t; font-weight:bold; font-family:Arial, Helvetica, 'sans serif'; padding-bottom:3px; padding-top:25px; width:300px; text-align:center; margin:0px auto;">Passwort vergessen?</p></a>
    76.                 <div id="popup_pw" class="overlay">
    77.                 <div class="popup_pw">
    78.                     <h2>Passwort vergessen?</h2>
    79.                         <a class="close_pw" href="#">×</a>
    80.                         <div class="content_pw">
    81.                             Wir haben dir eine E-Mail geschrieben! Mit einem Verifizierungs Code:
    82.                     <ul class="input-list style-6 clearfix">
    83.                         <li>
    84.                         <br />
    85.                     <input style ="text-align:center;"type="text" placeholder="Code" size = "15" class = "focus">
    86.                         </li>
    87.                     </ul>
    88.                         </div>
    89.                 </div>
    90.                 </div>
    91.                                         <!-- Impressum -->
    92.             <p style="float:left">
    93.                 <a href="Seiten/Impressum.html">Impressum</a>
    94.             </p>
    95.                                         <!-- Hackerl Button Hauptseite -->
    96.             <p style="width:40px; margin:0px auto;">
    97.                 <a href="Seiten/Menue_User.html"> <input type="image" src="Bilder/hackerl.png" style="width:30px; height:30px;" name="submit"/> </a>
    98.             </p>
    99.         </div>
    100.                      
    101.     </body>
    102. </html>
    CSS:


    Code (css):
    1.  .style-4 input[type="text"] {
    2.              padding: 10px;
    3.              border: none;
    4.              border-bottom: solid 2px #c9c9c9;
    5.              transition: border 0.3s;
    6.              margin: 0px 20%;
    7.              font-family: 'Dosis', sans-serif;
    8.              font-size:100%;
    9.         }
    10.         .style-4 input[type="text"]:focus,
    11.         .style-4 input[type="text"]:focus {
    12.             border-bottom: solid 2px black;
    13.         }
    14.         .style-5 input[type="password"] {
    15.              padding: 10px;
    16.              border: none;
    17.              border-bottom: solid 2px #c9c9c9;
    18.              transition: border 0.3s;
    19.              margin: 0px 20%;
    20.              font-family: 'Dosis', sans-serif;
    21.              font-size:100%;
    22.         }
    23.         .style-5 input[type="password"]:focus,
    24.         .style-5 input[type="password"]:focus {
    25.             border-bottom: solid 2px black;
    26.         }
    27.         .style-6 input[type="text"] {
    28.              padding: 10px;
    29.              border: none;
    30.              border-bottom: solid 2px #c9c9c9;
    31.              transition: border 0.3s;
    32.              margin: -15px 20%;
    33.              font-family: 'Dosis', sans-serif;
    34.              font-size:100%;
    35.         }
    36.         .style-6 input[type="text"]:focus,
    37.         .style-6 input[type="text"]:focus {
    38.             border-bottom: solid 2px black;
    39.         }
    40.         .hackerl_login {
    41.             margin-top:0.5%;
    42.             height:20%;
    43.             width: 3%;
    44.         }
    45.         .ghost-button-semi-transparent {
    46.             display: inline-block;
    47.             width: 20%;
    48.             padding: 1%;
    49.             color: #fff;
    50.             border: 3px solid #fff;
    51.             font-size: 130%;
    52.             text-align:center;
    53.             font-weight:bold;
    54.             text-decoration: none;
    55.             transition: background-color 0.2s ease-out,
    56.             border-color 0.2s ease-out;
    57.         }
    58.             .ghost-button-semi-transparent:hover,
    59.             .ghost-button-semi-transparent:active {
    60.             background-color: rgba(255, 255, 255, 0.4);
    61.             border-color: #fff;
    62.             transition: background-color 0.3s ease-in,
    63.             border-color 0.3s ease-in;
    64.         }
    65.         .ghost-button-semi-transparent2 {
    66.             display: inline-block;
    67.             width: 20%;
    68.             padding: 1%;
    69.             color: #fff;
    70.             border: 3px solid #fff;
    71.             font-size: 130%;
    72.             text-align:center;
    73.             font-weight:bold;
    74.             text-decoration: none;
    75.             transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
    76.             margin-left: 25%;
    77.         }
    78.             .ghost-button-semi-transparent2:hover,
    79.             .ghost-button-semi-transparent2:active {
    80.             background-color: rgba(255, 255, 255, 0.4);
    81.             border-color: #fff;
    82.             transition: background-color 0.3s ease-in,
    83.             border-color 0.3s ease-in;
    84.         }
    85.         }
    86.         h2{
    87.             text-align:center;
    88.             font-size:200%;
    89.             color:#1f232d;
    90.             margin-top:0%;
    91.             font-family: 'Baloo Bhaina', cursive;
    92.         }
    93.         .impressum{
    94.             position:absolute;
    95.             margin-left:1%;
    96.             margin-top:2.5%;
    97.             color:#1f232d;
    98.             text-decoration:none;
    99.             font-size:20px;
    100.             font-family: Arial;
    101.         }
    102.         .img_schriftzug{
    103.             position:relative;
    104.             margin-top:2%;
    105.             margin-left:25%;
    106.         }
    107.         .overlay {
    108.          position: absolute;
    109.          top: 0;
    110.          bottom: 0;
    111.          left: 0;
    112.          right: 0;
    113.          background: rgba(0, 0, 0, 0.7);
    114.          transition: opacity 500ms;
    115.          visibility: hidden;
    116.          opacity: 0;
    117.         }
    118.         .overlay:target {
    119.          visibility: visible;
    120.          opacity: 1;
    121.         }
    122.  
    123.         .popup {
    124.          margin: 20px auto;
    125.          padding: 20px;
    126.          background: #1f232d;
    127.          border-radius: 5px;
    128.          width: 30%;
    129.          position: relative;
    130.         }
    131.  
    132.         .popup h2 {
    133.             text-align:center;
    134.             font-size:200%;
    135.             margin-top:-5%;
    136.             font-family: 'Baloo Bhaina', cursive;
    137.             color: #fff;
    138.         }
    139.         .popup .close {
    140.          position: absolute;
    141.          top: 20px;
    142.          right: 30px;
    143.          font-size: 30px;
    144.          font-weight: bold;
    145.          text-decoration: none;
    146.          color: #fff;
    147.         }
    148.         .popup .close:hover {
    149.          color: orange;
    150.         }
    151.         .popup .content {
    152.          max-height: 30%;
    153.          overflow: auto;
    154.         }
    155.         [type="submit"] {
    156.          font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    157.          width: 50%;
    158.          background:#ed295d;
    159.          border-radius:5px;
    160.          border:0;
    161.          cursor:pointer;
    162.          color:#191c21;
    163.          font-size:30px;
    164.          padding-top:15px;
    165.          padding-bottom:15px;
    166.          transition: all 0.3s;
    167.          margin-top:7%;
    168.          margin-left:25%;
    169.          font-weight:700;
    170.         }
    171.         [type="submit"]:hover { background:#ed295d; }
    172.         ul {
    173.             list-style-type: none;
    174.         }
    175.         .overlay_pw {
    176.          position: absolute;
    177.          top: 0;
    178.          bottom: 0;
    179.          left: 0;
    180.          right: 0;
    181.          background: rgba(0, 0, 0, 0.7);
    182.          transition: opacity 500ms;
    183.          visibility: hidden;
    184.          opacity: 0;
    185.         }
    186.         .overlay_pw:target {
    187.          visibility: visible;
    188.          opacity: 1;
    189.         }
    190.         .popup_pw {
    191.          margin: 0% auto;
    192.          padding: 20px;
    193.          background: #ed295d;
    194.          border-radius: 5px;
    195.          width: 35%;
    196.          position: relative;
    197.         }
    198.  
    199.         .popup_pw h2 {
    200.          margin-top: 0;
    201.          color: #fff;
    202.          font-family: Tahoma, Arial, sans-serif;
    203.         }
    204.         .popup_pw .close_pw {
    205.          position: absolute;
    206.          top: 15px;
    207.          right: 30px;
    208.          font-size: 30px;
    209.          font-weight: bold;
    210.          text-decoration: none;
    211.          color: #fff;
    212.         }
    213.         .popup_pw .close_pw:hover {
    214.          color: orange;
    215.         }
    216.         .popup_pw .content_pw {
    217.          color:#fff;
    218.          font-size:20px;
    219.          font-family: Tahoma, Arial, sans-serif;
    220.          max-height: 10%;
    221.          max-height: 50%;
    222.          overflow: auto;
    223.         }
     
  8. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.187
    Punkte für Erfolge:
    63
    Der Inhalt von index_style.css fehlt noch, um ein reproduzierbares Dokument zu erstellen.

    EDIT: OK
     
  9. Screencore

    Screencore Neues Mitglied

    Registriert seit:
    29 Dezember 2016
    Beiträge:
    5
    Punkte für Erfolge:
    1
    Kann ich dir den dazu gehörigen Bilder ordner schicken? sonst sieht das alles nicht wirklich schön aus
     
  10. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.187
    Punkte für Erfolge:
    63
    Ich entdecke keine Unterschiede in IE u. Chrome, wenn ich ihre Fenster rauf-/runterskaliere.
    Nö, dafür gibt's doch http://placehold.it/ :D:cool:

    Du solltest Dir Gedanken über den Einsatz von CSS Media Queries machen, die u.a. die Schriftgrößen für die jeweiligen Fensterbreiten anpassen, damit die skalierbaren Buttons bei kleinen Displays/Viewports nicht verunstaltet werden.

    Außerdem ist das Attribut size="35" für die Eingabefelder nicht dienlich, wenn die Breite des Browserfensters dieses Maß unterschreitet.

    Auch hier stattdessen mittels CSS Media Queries die jeweils zutreffende Breite definieren.

    Insgesamt ist das der Knackpunkt, dass Elemente mit relativen Breiten, die auf die Fensterskalierung reagieren, aber innerhalb von ihnen absolute Angaben vorherrschen.
     
  11. Screencore

    Screencore Neues Mitglied

    Registriert seit:
    29 Dezember 2016
    Beiträge:
    5
    Punkte für Erfolge:
    1
    Bedeutet was? 1. Was soll ich mit der Size machen ? 2. Was sind CSS MEDIA Queries? Und Danke für deine schnelle Hilfe :O
     
  12. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.187
    Punkte für Erfolge:
    63
    Hab ich doch erwähnt: mit CSS width die passende Breite für die einzelnen Breakpoints definieren.
    So eine Frage kann eigentlich nebenher an Google weitergereicht werden, um das selbstständig in Erfahrung zu bringen.

    https://www.google.de/search?q=css+media+queries
    1. https://wiki.selfhtml.org/wiki/CSS/Media_Queries
    2. https://www.mediaevent.de/css/media-queries.html
    3. https://www.mediaevent.de/css/media-query.html
    4. ...