Skalieren des Browserfensters mit Grid

  • 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).


    pasted-from-clipboard.png



    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.

  • Ich habe nur auf diesen Suchbutton eingefügt.

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

    [...] 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:

    pasted-from-clipboard.png

    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.

  • pasted-from-clipboard.png

    Headerbild: width: 100% und height: auto


    pasted-from-clipboard.png

    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.

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

  • 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.

  • 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:

    Dann erstreckt sich der Footer über die ganze Breite.

  • 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
    1. <header>
    2. <img id="header-pic" src="images/headerbild.png">
    3. <div class="ueberschrift">
    4. <div id="headline">Vispra</div>
    5. <div id="subline"><b>Vis</b>uelle <b>Spra</b>che für alle</div>
    6. </div>
    7. <div class="logo">
    8. <a href="./Home.html"><img id="logo-pic" src="images/logo2.png"></a>
    9. </div>
    10. </header>
  • 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. :)