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

Anzeigeprobleme in Chrome

Screencore

Neues Mitglied
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

  • PagePopUp_Chrome.PNG
    PagePopUp_Chrome.PNG
    63 KB · Aufrufe: 7
  • PagePopUp_IE.PNG
    PagePopUp_IE.PNG
    52,1 KB · Aufrufe: 6
Werbung:
Hallo

Du hast den Link zu der Seite vergessen.

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

Gruss

MrMurphy
 
Werbung:
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
 
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
 
Werbung:
<!--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;
        }
 
Der Inhalt von index_style.css fehlt noch, um ein reproduzierbares Dokument zu erstellen.

EDIT: OK
 
Werbung:
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.
 
Bedeutet was? 1. Was soll ich mit der Size machen ?
Hab ich doch erwähnt: mit CSS width die passende Breite für die einzelnen Breakpoints definieren.
2. Was sind CSS MEDIA Queries?
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. ...
 
Werbung:
Zurück
Oben