Skalieren des Browserfensters mit Grid

lady_x · 9. Januar 2021

Servus,

ich habe an einer Website mit Grid gearbeitet.

Das Problem: Wenn ich den Browserfenster z.B. halbiere, dann rutscht alles hoch oder runter (siehe Bild).

html-seminar.de/woltlab/attachment/2799/

Was musst ich machen, dass alles automatisch verkleinert, wenn sich das Browserfenster ändert?

Ich habe einen ziemlich langen Code geschrieben, weshalb ich hier nicht eingefügt habe. Auf konkrete (Probem-)Stellung, die ihr mit nennen könnt, füge ich dann gerne den Code ein.

Danke vorraus.

Sempervivum · 9. Januar 2021

Ja, ohne Code wird man deine Frage nicht beantworten können. Versuche, diesen auf das wesentliche zu reduzieren, z. B. wenn es viele Zeilen sind, dann nur wenige posten, die das Problem genau so zeigen. Oder hast Du die Seite online? Dann poste die URL.

lady_x · 9. Januar 2021

CSS

.container { 
        width: 100%;
        display: grid; 
        grid-template-rows: 400px 100px auto 150px; 
        grid-template-columns:15% 70% 15%; 
        grid-template-areas:  
            "logo überschrift header-pic" 
            "leer navigator search"
            "leer inhalt buttons" 
            ". footer ." 
      }

        .search {
                    grid-area: search;
                    background-color: rgb(218, 218, 218)
                }

                #search {
                    position: absolute;
                    margin-left: 15px;
                    width: 185px;
                    height: 2em;
                    border: 2px solid #999;
                    font-size: 1em;
                    }

                #search-button {
                    position: absolute;
                    margin-left: 11%;
                    font-size: 1em;
                    height: 2em;
                }

Alles anzeigen

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial=scale=1.0" />
        <link rel="stylesheet" href="Style.css">
        <title>Vispra</title>
    </head>
    <body>
            <div class = "search">
                <p>
                    <label for="search"></label>
                    <input type="search" id="search" placeholder="Suchbegriff eingeben">
                    <button id= "search-button">Suche</button>
                </p>
            </div>
    </body>
</html>

Alles anzeigen

Ich habe nur auf diesen Suchbutton eingefügt.

AndreasB · 9. Januar 2021

Ich habe mir den Code angesehen, aber ich muss zugeben, dass ich nicht verstehe, was du mit

Zitat von lady_x

[...] Wenn ich den Browserfenster z.B. halbiere, dann rutscht alles hoch oder runter [...]

meinst.

Wenn du meinst, dass sich der Button und das Input-Feld überlappen, liegt das nicht an dem Grid, sondern an dem position: absolute.

Das hat aber nix mit "hoch oder runter" zu tun.

Übrigens:

In dem CSS Code, den du gepostet hast, befinden sich Unerlaubte Zeichen, die im W3C Validator, zu Einlesefehlern führt:

html-seminar.de/woltlab/attachment/2801/

Wenn das in deiner Datei auch so ist (und dies nicht nur beim Einfügen in den Codeblock passiert ist) kann das zu unerwarteten Ergebnissen führen.

Sempervivum · 9. Januar 2021

Das war jetzt wiederum ein bisschen sehr wenig Code. Poste doch wenigstens die Container, die Inhalte kannst Du ja weg lassen.

lady_x · 9. Januar 2021

Zitat von AndreasB

Ich habe mir den Code angesehen, aber ich muss zugeben, dass ich nicht verstehe, was du mit
meinst.

Wenn du meinst, dass sich der Button und das Input-Feld überlappen, liegt das nicht an dem Grid, sondern an dem position: absolute.
Das hat aber nix mit "hoch oder runter" zu tun.

Übrigens:
In dem CSS Code, den du gepostet hast, befinden sich Unerlaubte Zeichen, die im W3C Validator, zu Einlesefehlern führt:
html-seminar.de/woltlab/attachment/2801/
Wenn das in deiner Datei auch so ist (und dies nicht nur beim Einfügen in den Codeblock passiert ist) kann das zu unerwarteten Ergebnissen führen.

Alles anzeigen

html-seminar.de/woltlab/attachment/2803/

Headerbild: width: 100% und height: auto

html-seminar.de/woltlab/attachment/2804/

Headerbild: width 100% und height 100%

Das ist ein Beispiel von einem halben Browserfenster. Es wäre schön wenn, da keine Umbrüche macht oder verzerrt.

lady_x · 9. Januar 2021

Zitat von Sempervivum

Das war jetzt wiederum ein bisschen sehr wenig Code. Poste doch wenigstens die Container, die Inhalte kannst Du ja weg lassen.

CSS

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap');

@media screen {

    .container { 
        width: 100%;
        display: grid; 
        grid-template-rows: auto auto auto auto; 
        grid-template-columns:15% 70% 15%; 
        grid-template-areas:  
            "logo überschrift header-pic" 
            "leer navigator search"
            "leer inhalt buttons" 
            ". footer ." 
      }

        .leer {
            grid-area: leer;
            background-color: rgb(218, 218, 218)
        } 

        header { 
            grid-column: 1/4; 
            grid-row: 1/2;
        }    

                #header-pic {
                    width: 100%;
                    height: 100%; 
                }

                .logo {
                    grid-area: logo;
                    padding: 20px;
                }

                        #logo-pic {
                            width: 80%;
                            margin-left: 15px;
                        }


                .überschrift {
                    grid-area: überschrift;
                    padding: 100px;
                    margin-left: 50px;
                }

                        #headline {
                            font-family: 'Josefin Sans', sans-serif;
                            font-size: 6em;
                            line-height: none;
                        }

                        #subline {
                            font-family: 'Josefin Sans', sans-serif;
                            font-size: 3em;
                            line-height: none;
                            margin-left: 50px; 
                        }
                        
                       
                .header-pic {
                    grid-area: header-pic;
                }


        /*nav {
            grid-column: 2/3; 
            grid-row: 2/3;
        }*/

                .nav {
                    grid-area: navigator;
                }

                ul.nav-bar {
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                    overflow: hidden;
                    background-color: #333;
                  }
                  
                  li.bar {
                    float: left;
                    border-right: 1px solid #bbb;
                  }

                  li:last-child.bar {
                    border-right: none;
                  }
                  
                  li a.bar-hover {
                    display: block;
                    font-size: 1.5em;
                    font-family: 'Josefin Sans', sans-serif;
                    color: white;
                    text-align: center;
                    padding: 20px 22px;
                    text-decoration: none;
                  }
                  
                  li a:hover.bar-hover {
                    background-color: #111;
                  }
        

        #search {
            position: absolute;
            margin-left: 15px;
            width: 185px;
            height: 2em;
            border: 2px solid #999;
            font-size: 1em;
        }

                #search-button {
                    position: absolute;
                    margin-left: 11%;
                    font-size: 1em;
                    height: 2em;
                }


        content {
            grid-column: 2/3; 
            grid-row: 3/4;
        }

                .inhalt {
                    grid-area: inhalt;
                    font-family: 'Times New Roman', Times, serif;
                    font-size: 1.5em;
                    margin-top: 450px;
                    text-align: center;
                }

                        #willkommen {
                            font-size: 2em;
                            font-weight: bold;
                        }
       
                
                .search {
                    grid-area: search;
                    background-color: rgb(218, 218, 218)
                }

                span {
                    font-size: 2em;
                    font-weight: bold;
                }

                /*canvas {
                    border: 1px solid #111;
                    width: 800px; 
                    height: 400px;
                    margin-left: 21%;
                    margin-top: 4%;
                    position: relative;
                }*/


        aside {
            grid-column: 3/4; 
            grid-row: 3/4;
        }

                .buttons {
                    grid-area: buttons;
                    padding: 10px;
                    background-color: rgb(218, 218, 218)
                }

                #ls-button {
                    font-family: 'Josefin Sans', sans-serif;
                    font-size: 1em;
                    height: 2em;
                    background: #333;
                    color: white;
                    margin-top: 800px;
                    margin-right: 5%;
                    margin-left: 20%;
                    float: right;
                }

                #translate {
                    font-family: 'Josefin Sans', sans-serif;
                    font-size: 1em;
                    height: 2em;
                    background: #333;
                    color: white;
                    margin-top:5px;
                    margin-right: 5%;
                    float: right;
                }


        footer {
            background: #f1f1f1;
            grid-column: 1/4; 
            grid-row: 4/5;
        }

                .foot {
                    grid-area: footer;
                    padding: 30px;
                    font-size: 10pt;
                }

                #left {
                    float: left;
                    margin-left: 5%;
                    padding: 0;
                }

                #middle {
                    float: left;
                    margin-left: 10%;
                    padding: 0;
                }

                #right {
                    float: right;
                    margin-right: 0;
                    padding: 0;
                }

                .impressum {
                    list-style: none;
                    color: #555;
                    border: none;
                    text-decoration: none;
                }

                a:visited, a {
                    color: rgb(56, 56, 56);
                }

                /*a:link, a:visited {
                    text-decoration: none;
                }*/

                .adress {
                    color:rgb(56, 56, 56);
                    list-style: none;
                }
}

Alles anzeigen

Sempervivum · 9. Januar 2021

Oh, auch ohne das HTML sieht man schon, dass da einiges durcheinander geht:

Du verwendest float und grid gemischt, verzichte auf float und versuche, das Layout konsequent mit grid umzusetzen.

Sempervivum · 9. Januar 2021

PS: Aber ohne das HTML tappt man da immer noch weitgehend im Dunkeln.

lady_x · 9. Januar 2021

Zitat von Sempervivum

Oh, auch ohne das HTML sieht man schon, dass da einiges durcheinander geht:

Du verwendest float und grid gemischt, verzichte auf float und versuche, das Layout konsequent mit grid umzusetzen.

Ah, das macht Sinn. Wie kann ich texte z.B. Adresse in Footer nebeneinander schreiben ohne zusätzlich Spalten zu machen?

Float kommt nicht im Header vor, auch nicht bei Head- und Subline. Trotzdem ändert sich das, was ich nicht möchte.

lady_x · 9. Januar 2021

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial=scale=1.0" />
        <link rel="stylesheet" href="Style.css">
        <title>Vispra</title>
    </head>

    <script>
        'use strict';
            (function () {
                function init() {
                    document.getElementById('ls-button')
                        .addEventListener('click', changeHTMLContent);
                }

            function changeHTMLContent() {
                var neu = "<span>Herzlich Willkommen!</span><br/><br/>Du möchtest Gebärdensprache lernen<br/>aber Gebärdensprache ist schwer?<br/><br/>Du möchtest mit Menschen unterhalten<br/>aber sie können nicht über Mund laut aussprechen?<br/><br/>Du bist hier richtig!<br/><br/>Vispra ist kostenlos.<br/>Und hat keine Werbung.<br/>Vispra ist Gebärdensprache für alle Leute.<br/><br/>Viel Spaß!";
                document.getElementById('absatz')
                        .innerHTML = neu;
            }
            document.addEventListener('DOMContentLoaded', init);
            }());


            'use strict';
            (function () {
                function init() {
                    document.getElementById('translate')
                        .addEventListener('click', changeHTMLContent);
                }

            function changeHTMLContent() {
                var neu = "<span>Welcome!</span><br/><br/>You want to learn sign language, but you don't know what to do?<br/>You would like to communicate with people who cannot speak via spoken language?<br/><br/>Then you've come to the right place!<br/>Vispra is an ad-free and free information site about visual language for everyone.<br/><br/>Have fun trying it out!";
                document.getElementById('absatz')
                        .innerHTML = neu;
            }
            document.addEventListener('DOMContentLoaded', init);
            }());


            function checkSupported() {
                canvas = document.getElementById ('canvas')
                if (canvas.getContext) {
                    ctx = canvas.getContext('2d');
                    this.gridSize = 10;
                    start ();   
                }
                else {
                alert ("We're sorry, but your browser does not support the canvas tag." +
                "Please use any web browser other than Internet Explorer.");    
                }
            }
    </script>

    <body>

        <div class="container">

            <header>
                <img id="header-pic"src="./Header.jpg">
            </header>

                <div class = "logo">
                    <a href="./Home.html"><img id = "logo-pic" src="./Logo.png"></a>
                </div>
                
                <div class = "überschrift">
                    <div id = "headline">Vispra</div>
                    <div id = "subline"><b>Vis</b>uelle <b>Spra</b>che für alle</div>
                </div>

                <!--<div class = "header-pic">Bild (Header)</div>-->


            <!--Navigator-->

                <div class = "nav">
                    
                    <ul class= "nav-bar">
                        <li class = "bar"><a class= "bar-hover" href="#">Home</a></li>
                        <li class = "bar"><a class= "bar-hover" href="#">Vispra</a></li>
                        <li class = "bar"><a class= "bar-hover" href="#">DGS</a></li>
                        <li class = "bar"><a class= "bar-hover" href="#">LBG</a></li>
                        <li class = "bar"><a class= "bar-hover" href="#">"Zwergensprache"</a></li>
                        <li class = "bar"><a class= "bar-hover" href="#">Über uns</a></li>
                    </ul>

                    
                </div>

            
            <!--<content>
               <canvas id="canvas"></canvas> 
            </content>-->

                <div class = "inhalt">
                    <p id="absatz"><span>Herzlich Willkommen! </span>
                    <br />
                    <br />
                        Du möchtest Gebärdensprache lernen, aber du weißt nichts anzufangen? <br />
                        Du möchtest mit Menschen kommunizieren, die aber nicht über Lautsprache sprechen können?
                    <br />  
                    <br />  
                        Dann bist du hier genau richtig! <br />
                        Vispra ist eine werbefreie und kostenlose Informationsseite über die visuelle Sprache für alle. 
                    <br />   
                    <br /> 
                    Viel Spaß beim Ausprobieren!
                    </p>

                </div>

            <div class = "search">
                <p>
                    <label for="search"></label>
                    <input type="search" id="search" placeholder="Suchbegriff eingeben">
                    <button id= "search-button">Suche</button>
                </p>
            </div>

            
            <aside><!--Icons--></aside>
                
                <div class = "buttons">
                    <button id = "ls-button">Leichte Sprache</button>
                    <button id = "translate">English</button>
                </div>

          
            <footer><!--Impressum/Datenschutz--></footer>
            
                <div class = "foot">
                    <div id = "left">
                    <dl>
                        <li class = "impressum"><a href="#">Impressum</a></li>
                        <li class = "impressum"><a href="#">Datenschutz</a></li> 
                    </dl>
                    </div>

                   <div id = "right"> 
                    <dl>
                        <li class = "adress">Email: <a href="#">martina.mustermann@mustermail.de</a></li>
                        <li class = "adress">Telefon: 01234 5678910</li>
                        <li class = "adress">Fax: 01234 5678911</li>
                    </dl>
                   </div>

                   <div id = "middle">
                    <dl>
                        <li class = "adress">Martina Mustermann</li>
                        <li class = "adress">Musterstraße 45</li>
                        <li class = "adress">123456 Musterstadt</li>
                    </dl>
                   </div>

                </div>

            <div class = "leer"></div> 

        </div>

    </body>

    </html>

Alles anzeigen

Sempervivum · 9. Januar 2021

Zitat

Wie kann ich texte z.B. Adresse in Footer nebeneinander schreiben ohne zusätzlich Spalten zu machen?

Da warst Du mit template-areas schon auf einem guten Wege: Du kannst Spalten verbinden, indem Du dort mehrmals die selbe Area angibst:

Code

            .container {
                width: 100%;
                display: grid;
                grid-template-rows: auto auto auto auto;
                grid-template-columns: 15% 70% 15%;
                grid-template-areas:
                    "logo überschrift header-pic"
                    "leer navigator search"
                    "leer inhalt buttons"
                    "footer footer footer"
            }

Alles anzeigen

Dann erstreckt sich der Footer über die ganze Breite.

Sempervivum · 9. Januar 2021

... und die drei Blöcke im Impressum kannst Du ganz leicht nebeneinander anordnen, indem Du dem umgebenden Container ein display: flex; gibst:

Code

div.foot {
    display: flex;
}

Sempervivum · 10. Januar 2021

Ich habe mir noch deinen Header und die Screenshots in Posting #6 angesehen und eine Lösung ausgearbeitet, die mit absoluter Positionierung arbeitet. Etwas, wovon man i. allg. abrät, weil es häufig die Ursache von Problem ist. Der Grund ist, dass es dann einfach ist, das Seitenverhältnis des Bildes beim Skalieren beizubehalten.

Den Container .ueberschrift habe ich auf die volle Höhe gesetzt und die Texte mit Flex vertikal mittig ausgerichtet. Dann mit zwei Mediaqueries die Schriftgröße angepasst, so dass die Text immer gut hinein passen.

Code

            header {
                grid-area: header;
                position: relative;
            }

            #header-pic {
                width: 100%;
                height: auto;
                vertical-align: top;
            }

            .logo {
                position: absolute;
                left: 10px;
                top: 10px;
            }

            .ueberschrift {
                height: 100%;
                position: absolute;
                top: 0;
                left: 45%;
                transform: translateX(-50%);
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            #logo-pic {
                width: 6em;
                height: auto;
            }

            #headline {
                font-family: 'Josefin Sans', sans-serif;
                font-size: 5em;
            }

            #subline {
                font-family: 'Josefin Sans', sans-serif;
                font-size: 3em;
                margin-left: 1em;
            }

            @media (max-width: 70em) {
                #headline {
                    font-size: 4em;
                }

                #subline {
                    font-size: 2em;
                    margin-left: 50px;
                }
            }

            @media (max-width: 60em) {
                #headline {
                    font-size: 3em;
                }

                #subline {
                    font-size: 1.5em;
                    margin-left: 50px;
                }
            }

Alles anzeigen

Code

        <header>
            <img id="header-pic" src="images/headerbild.png">
            <div class="ueberschrift">
                <div id="headline">Vispra</div>
                <div id="subline"><b>Vis</b>uelle <b>Spra</b>che für alle</div>
            </div>
            <div class="logo">
                <a href="./Home.html"><img id="logo-pic" src="images/logo2.png"></a>
            </div>
        </header>

lady_x · 10. Januar 2021

Zitat von Sempervivum

Ich habe mir noch deinen Header und die Screenshots in Posting #6 angesehen und eine Lösung ausgearbeitet, die mit absoluter Positionierung arbeitet. Etwas, wovon man i. allg. abrät, weil es häufig die Ursache von Problem ist. Der Grund ist, dass es dann einfach ist, das Seitenverhältnis des Bildes beim Skalieren beizubehalten.
Den Container .ueberschrift habe ich auf die volle Höhe gesetzt und die Texte mit Flex vertikal mittig ausgerichtet. Dann mit zwei Mediaqueries die Schriftgröße angepasst, so dass die Text immer gut hinein passen.

Vielen Dank! Jetzt funktioniert es das, was ich wollte. Ich freue mich, immer wieder neue Dinge zu erfahren.

HTMLLerner23 · 11. Januar 2021

+1 Ich danke auch, sowas vergisst man doch sehr schnell und braucht es doch viel zu oft.

Skalieren des Browserfensters mit Grid

Jetzt mitmachen!

Teilen

Tags