Anzeigeprobleme in Chrome

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Screencore

Neues Mitglied
29 Dezember 2016
5
0
1
19
#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

MrMurphy

Senior HTML'ler
28 Juli 2009
1.464
215
63
#2
Hallo

Du hast den Link zu der Seite vergessen.

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

Gruss

MrMurphy
 

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#3

Screencore

Neues Mitglied
29 Dezember 2016
5
0
1
19
#4
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
 

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#6
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
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
 

Screencore

Neues Mitglied
29 Dezember 2016
5
0
1
19
#7
<!--Taskchat - GRI - Startseite(Index)-->

HTML:
<!DOCTYPE html>
<html>
    <head>
  
    <link href='[URL]https://fonts.googleapis.com/css?family=Montserrat:700[/URL]' rel='stylesheet'>
    <link href='[URL]https://fonts.googleapis.com/css?family=Quicksand[/URL]' rel='stylesheet'>
    <link href="[URL]https://fonts.googleapis.com/css?family=Dosis[/URL]" rel="stylesheet">
    <link href="[URL]https://fonts.googleapis.com/css?family=Baloo+Bhaina[/URL]" rel="stylesheet">
    <link rel='stylesheet' type="text/css" href="css/index_style.css">
  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Task Chat</title>
    <style type="text/css">
    a:link {
            text-decoration:none;
            font-family: Arial, Helvetica, 'sans serif';
            font-weight:bold;
    }
    </style>
    </head>
  
    <body style="background-color:#000; margin:0px; padding:0px;">
        <div style="height:50%; width:50%;margin:0px auto;background-color:#000; text-align:center;">
            <img src="Bilder/TaskchatSchriftzug.png" style="width:95%; height:95%;" />
        </div>
        <!-- Register Button -->
        <a class="ghost-button-semi-transparent2" href="#popup1">Registrieren</a>
        <div id="popup1" class="overlay">
        <div class="popup">
        <h2>Registrieren</h2>
        <a class="close" href="#">×</a>
        <div class="content">
        <ul class="input-list style-4 clearfix">
            <li>
                    <input type="text" placeholder="Username" size = "35" class = "focus">
            </li>
                <br />
            <li>
                    <input type="text" placeholder="E-Mail" size = "35" class = "focus">
            </li>
        </ul>
        <ul class="input-list style-5 clearfix">
            <li>
                <input type="password" placeholder="Passwort" size = "35" class="focus">
            </li>
                <br />
            <li>
                <input type="password" placeholder="Passwort" size = "35" class="focus">
            </li>
        </ul>
            <button type="submit">Registrieren</button>
        </div>
        </div>
        </div>
        <!-- Enter as Guest Button Hauptseite -->
        <a class="ghost-button-semi-transparent" href="Seiten/Menue.html">Enter as Guest</a>
                          
        <div style="height:220px; width:100%; position: absolute; bottom: 0;background-color:#00a8ff; text-align:center;">
            <span style="font-family: 'Baloo Bhaina', cursive; font-weight:bold;font-size:36pt;">
                Login
            </span>
  
            <table style="width:100%; margin:-20px auto; text-align:center;">
                <tr>
                    <td>
                        <input type="text" placeholder="E-Mail"  style="height:30px; width:250px;">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="password" placeholder="Passwort" size="35"  style="height:30px; width:250px;">
                    </td>
                </tr>
            </table>
                                        <!-- Passwort vergessen? -->
            <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>
                <div id="popup_pw" class="overlay">
                <div class="popup_pw">
                    <h2>Passwort vergessen?</h2>
                        <a class="close_pw" href="#">×</a>
                        <div class="content_pw">
                            Wir haben dir eine E-Mail geschrieben! Mit einem Verifizierungs Code:
                    <ul class="input-list style-6 clearfix">
                        <li>
                        <br />
                    <input style ="text-align:center;"type="text" placeholder="Code" size = "15" class = "focus">
                        </li>
                    </ul>
                        </div>
                </div>
                </div>
                                        <!-- Impressum -->
            <p style="float:left">
                <a href="Seiten/Impressum.html">Impressum</a>
            </p>
                                        <!-- Hackerl Button Hauptseite -->
            <p style="width:40px; margin:0px auto;">
                <a href="Seiten/Menue_User.html"> <input type="image" src="Bilder/hackerl.png" style="width:30px; height:30px;" name="submit"/> </a>
            </p>
        </div>
                      
    </body>
</html>
CSS:


CSS:
 .style-4 input[type="text"] {
             padding: 10px;
             border: none;
             border-bottom: solid 2px #c9c9c9;
             transition: border 0.3s;
             margin: 0px 20%;
             font-family: 'Dosis', sans-serif;
             font-size:100%;
        }
        .style-4 input[type="text"]:focus,
        .style-4 input[type="text"]:focus {
            border-bottom: solid 2px black;
        }
        .style-5 input[type="password"] {
             padding: 10px;
             border: none;
             border-bottom: solid 2px #c9c9c9;
             transition: border 0.3s;
             margin: 0px 20%;
             font-family: 'Dosis', sans-serif;
             font-size:100%;
        }
        .style-5 input[type="password"]:focus,
        .style-5 input[type="password"]:focus {
            border-bottom: solid 2px black;
        }
        .style-6 input[type="text"] {
             padding: 10px;
             border: none;
             border-bottom: solid 2px #c9c9c9;
             transition: border 0.3s;
             margin: -15px 20%;
             font-family: 'Dosis', sans-serif;
             font-size:100%;
        }
        .style-6 input[type="text"]:focus,
        .style-6 input[type="text"]:focus {
            border-bottom: solid 2px black;
        }
        .hackerl_login {
            margin-top:0.5%;
            height:20%;
            width: 3%;
        }
        .ghost-button-semi-transparent {
            display: inline-block;
            width: 20%;
            padding: 1%;
            color: #fff;
            border: 3px solid #fff;
            font-size: 130%;
            text-align:center;
            font-weight:bold;
            text-decoration: none;
            transition: background-color 0.2s ease-out,
            border-color 0.2s ease-out;
        }
            .ghost-button-semi-transparent:hover,
            .ghost-button-semi-transparent:active {
            background-color: rgba(255, 255, 255, 0.4);
            border-color: #fff; 
            transition: background-color 0.3s ease-in,
            border-color 0.3s ease-in;
        }
        .ghost-button-semi-transparent2 {
            display: inline-block;
            width: 20%;
            padding: 1%;
            color: #fff;
            border: 3px solid #fff;
            font-size: 130%;
            text-align:center;
            font-weight:bold;
            text-decoration: none;
            transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
            margin-left: 25%;
        }
            .ghost-button-semi-transparent2:hover,
            .ghost-button-semi-transparent2:active {
            background-color: rgba(255, 255, 255, 0.4);
            border-color: #fff; 
            transition: background-color 0.3s ease-in,
            border-color 0.3s ease-in;
        }
        }
        h2{
            text-align:center;
            font-size:200%;
            color:#1f232d;
            margin-top:0%;
            font-family: 'Baloo Bhaina', cursive;
        }
        .impressum{
            position:absolute;
            margin-left:1%;
            margin-top:2.5%;
            color:#1f232d;
            text-decoration:none;
            font-size:20px;
            font-family: Arial;
        }
        .img_schriftzug{
            position:relative;
            margin-top:2%;
            margin-left:25%;
        }
        .overlay {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         background: rgba(0, 0, 0, 0.7);
         transition: opacity 500ms;
         visibility: hidden;
         opacity: 0;
        }
        .overlay:target {
         visibility: visible;
         opacity: 1;
        }

        .popup {
         margin: 20px auto;
         padding: 20px;
         background: #1f232d;
         border-radius: 5px;
         width: 30%;
         position: relative;
        }

        .popup h2 {
            text-align:center;
            font-size:200%;
            margin-top:-5%;
            font-family: 'Baloo Bhaina', cursive;
            color: #fff;
        }
        .popup .close {
         position: absolute;
         top: 20px;
         right: 30px;
         font-size: 30px;
         font-weight: bold;
         text-decoration: none;
         color: #fff;
        }
        .popup .close:hover {
         color: orange;
        }
        .popup .content {
         max-height: 30%;
         overflow: auto;
        }
        [type="submit"] {
         font-family: 'Montserrat', Arial, Helvetica, sans-serif;
         width: 50%;
         background:#ed295d;
         border-radius:5px;
         border:0;
         cursor:pointer;
         color:#191c21;
         font-size:30px;
         padding-top:15px;
         padding-bottom:15px;
         transition: all 0.3s;
         margin-top:7%;
         margin-left:25%;
         font-weight:700;
        }
        [type="submit"]:hover { background:#ed295d; }
        ul {
            list-style-type: none;
        }
        .overlay_pw {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         background: rgba(0, 0, 0, 0.7);
         transition: opacity 500ms;
         visibility: hidden;
         opacity: 0;
        }
        .overlay_pw:target {
         visibility: visible;
         opacity: 1;
        }
        .popup_pw {
         margin: 0% auto;
         padding: 20px;
         background: #ed295d;
         border-radius: 5px;
         width: 35%;
         position: relative;
        }

        .popup_pw h2 {
         margin-top: 0;
         color: #fff;
         font-family: Tahoma, Arial, sans-serif;
        }
        .popup_pw .close_pw {
         position: absolute;
         top: 15px;
         right: 30px;
         font-size: 30px;
         font-weight: bold;
         text-decoration: none;
         color: #fff;
        }
        .popup_pw .close_pw:hover {
         color: orange;
        }
        .popup_pw .content_pw {
         color:#fff;
         font-size:20px;
         font-family: Tahoma, Arial, sans-serif;
         max-height: 10%;
         max-height: 50%;
         overflow: auto;
        }
 

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#10
Ich entdecke keine Unterschiede in IE u. Chrome, wenn ich ihre Fenster rauf-/runterskaliere.
Kann ich dir den dazu gehörigen Bilder ordner schicken? sonst sieht das alles nicht wirklich schön aus
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.
 

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#12
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. ...