Ankündigung

Einklappen
Keine Ankündigung bisher.

Problem mit Grid Layout

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Problem mit Grid Layout

    Hallo zusammen, hier habe mich in letzter Zeit ein bisschen mit dem Grid Layout beschäftigt und eigentlich ist es ja nicht so schwer und es klappt so weit ganz gut.

    Hier ein einfaches Beispiel:

    Code:
    <div id="container">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">
            <h3>main content</h3>
            </div>
       <div class="box4">box4</div>
        <div class="box5">box5</div>
    </div>
    und hier die CSS:

    Code:
    *{
        margin: 0; padding: 0;
    }
    
    body{
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
    }
    
    #container {
    
        width: 100vw;
        height: 100vh;
        background: #FFCDD2;
        display: grid;
        grid-template-areas:
            'header header header header header header'
            'header header header header header header'
            'leftnavi main main main main sidebar'
            'leftnavi main main main main sidebar'
            'leftnavi main main main main sidebar'
            'leftnavi main main main main sidebar'
            'footer footer footer footer footer footer';
    
    
    }
    
    
    
    .box1 {
        grid-area: header;
        background: #CE93D8;
    }
    .box2 {
        grid-area: leftnavi;
        background: #90CAF9;
    }
    .box3 {
        grid-area: main;
        background: #80CBC4;
    }
    .box4 {
        grid-area: sidebar;
        background: #FFF59D;
    }
    .box5 {
        grid-area: footer;
        background: #FFAB91;
    }
    Wenn man jetzt Box3 Main Content mit Inhalt befüllt, z.B ein längere Fließtext, dann verzerren sich die anderen Grid Boxen und werden kleiner. Hat jemand eine Idee warum?

  • #2
    Hallo

    Sofern du den Containern keine Breite zuweist richtet die Breite sich nach den jeweiligen Inhalten.

    Gruss

    MrMurphy

    Kommentar


    • #3
      Zitat von MrMurphy Beitrag anzeigen
      Hallo

      Sofern du den Containern keine Breite zuweist richtet die Breite sich nach den jeweiligen Inhalten.

      Gruss

      MrMurphy
      Ist dafür nicht das Grid Layout zuständig? Ist ja alles über das Raster definiert. Größenangaben würden doch das Raster brechen, bzw überflüssig machen. Oder verstehe ich das was falsch?

      Kommentar


      • #4
        Hallo

        Du erwartest zu viel. Die automatische Größenanpassung ohne Vorgaben funktioniert nur in Ausnahmefällen wie vom Webseitenersteller gewünscht.

        Gruss

        MrMurphy

        Kommentar

        homepage-forum.de - Hilfe für Webmaster! Statistiken

        Einklappen

        Themen: 56.413   Beiträge: 428.240   Mitglieder: 27.798   Aktive Mitglieder: 69
        Willkommen an unser neuestes Mitglied, planaigeist.

        Online-Benutzer

        Einklappen

        193 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 190.

        Mit 1.625 Benutzern waren am 17.03.2018 um 18:52 die meisten Benutzer gleichzeitig online.

        Die neuesten Themen

        Einklappen

        • arnego2
          Antwort auf Suche Filehoster
          mega und hidive Mega (nz) komplett umsonst bis 5gb glaub ich....
          Heute, 13:42
        • andi656
          Suche Filehoster
          hallo,

          welche Anbieter gibt es momentan die günstig oder sogar kostenlos ihren Dienst anbieten?
          Ich bin da noch etwas ratlos, da ich sowas noch nie genutzt habe und bin daher über jeden Ratschlag dankbar....
          Heute, 10:34
        • Sempervivum
          Antwort auf Zusätzliche fusszeile
          Wenn Du also beide Boxen, #footer und #bereich, untereinander anzeigen willst, brauchst Du sie ja nur nacheinander in deine HTML-Seite einzufügen. Durch
          Code:
          display: flex;
          flex-direction: column;
          werden sie dann untereinander angeordnet. Woran scheiterst Du dabei denn?
          BTW: float_center...
          Gestern, 22:08
        • föni
          Antwort auf Zusätzliche fusszeile
          Um die Codes auseinander zu halten, hab ich diese einfach anders benannt.

          den...
          HTML-Code:
          #footer {
              width: 95%;
          ...hab ich ja bereits mit eingepackt. Es erschein aber nicht mal einen Rahmen oder sonst was... als wäre der Code nicht da...

          Weiss da auch nicht mehr w...
          Gestern, 21:01
        • Sempervivum
          Antwort auf Zusätzliche fusszeile
          Wenn Du den Footer über (fast) die ganze Breite haben willst, sieht dies doch vernünftig aus:
          Code:
          #footer {  
           width: 95%;
          Ich bin nur ein wenig verwirrt, weil Du zunächst vom Footer schreibst und dann von #bereich? Soll diese Box zusätzlich zum Footer angezeigt werden?
          Gestern, 19:39

        Kostenlose Homepage bei Jimdo!

        Einklappen

        Jimdo

        Die neuesten Beiträge

        Einklappen

        • andi656
          Suche Filehoster
          hallo,

          welche Anbieter gibt es momentan die günstig oder sogar kostenlos ihren Dienst anbieten?
          Ich bin da noch etwas ratlos, da ich sowas noch nie genutzt habe und bin daher über jeden Ratschlag dankbar....
          Heute, 10:34
        • arnego2
          Antwort auf Suche Filehoster
          mega und hidive Mega (nz) komplett umsonst bis 5gb glaub ich....
          Heute, 13:42
        • föni
          Zusätzliche fusszeile
          Hallo Leute

          Ich hab eine html Seite am laufen mit folgendem Code:

          HTML-Code:
           <!DOCTYPE HTML>
          <html lang="de">
          <head>
              <link rel="icon" href="bim/favicon.ico" type="image/x-icon" />
          <title>x.ch</title>
          ...
          17.05.2019, 22:00
        • Sempervivum
          Antwort auf Zusätzliche fusszeile
          Wenn Du also beide Boxen, #footer und #bereich, untereinander anzeigen willst, brauchst Du sie ja nur nacheinander in deine HTML-Seite einzufügen. Durch
          Code:
          display: flex;
          flex-direction: column;
          werden sie dann untereinander angeordnet. Woran scheiterst Du dabei denn?
          BTW: float_center...
          Gestern, 22:08
        • föni
          Antwort auf Zusätzliche fusszeile
          Um die Codes auseinander zu halten, hab ich diese einfach anders benannt.

          den...
          HTML-Code:
          #footer {
              width: 95%;
          ...hab ich ja bereits mit eingepackt. Es erschein aber nicht mal einen Rahmen oder sonst was... als wäre der Code nicht da...

          Weiss da auch nicht mehr w...
          Gestern, 21:01
        • Sempervivum
          Antwort auf Zusätzliche fusszeile
          Wenn Du den Footer über (fast) die ganze Breite haben willst, sieht dies doch vernünftig aus:
          Code:
          #footer {  
           width: 95%;
          Ich bin nur ein wenig verwirrt, weil Du zunächst vom Footer schreibst und dann von #bereich? Soll diese Box zusätzlich zum Footer angezeigt werden?
          Gestern, 19:39
        • föni
          Antwort auf Zusätzliche fusszeile
          Vielen Dank für Deine hilfreiche Antwort.

          Ich hab nun den Code wie folgt ergänzt und möchte eigentlich unten gerne auch die selbe box quer (ca. 95% breit) über die Seite haben. (wie im Bild oben)

          HTML-Code:
          #footer {
          width: 95%;
          min-height: 560px;
          margin: 0 auto;
          ...
          Gestern, 19:07
        • Sempervivum
          Antwort auf Zusätzliche fusszeile
          Dann versuche es mit...
          Gestern, 07:27
        • föni
          Antwort auf Zusätzliche fusszeile
          Die Fusszeile sollte normal in die Seite eingebaut werden und nicht immer fix zu sehen sein....
          Gestern, 07:13
        • Sempervivum
          Antwort auf Zusätzliche fusszeile
          Soll die Fußzeile denn ganz normal in die Seite eingebettet sein oder soll sie beim Scrollen fixiert sein? In jedem Fall ist float:left der falsche Weg. Wenn ersteres zutrifft, ist es wahrscheinlich schon ausreichend, wenn Du es weglässt und beim body flex-direction:column und align-items:center hinzu...
          Gestern, 06:27
        Lädt...
        X