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.375   Beiträge: 428.051   Mitglieder: 27.717   Aktive Mitglieder: 80
        Willkommen an unser neuestes Mitglied, Oldiebumser.

        Online-Benutzer

        Einklappen

        670 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 668.

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

        Die neuesten Themen

        Einklappen

        • daniel5959
          Antwort auf Hallo, ein Neuer!
          Hallo,

          bei den Websites Nr. 1 und 3 sind mir rechtliche Probleme aufgefallen - Hinweise an die Mailadressen der Betreiber verschickt.

          Allerdings bin ich kein Jurist und habe deshalb auch nicht alle möglichen rechtlichen Fehlerquellen überprüft.

          Optisch sind...
          Gestern, 18:55
        • TheBablegum
          Antwort auf Meine Webseite, eure Meinung!
          Danke für ihre Meinung, ich werde versuchen dies umzusetzen.
          Natürlich ist mir klar das man Geld investieren muss, dass geht allerdings erst wenn man genug Geld hat
          Gestern, 16:11
        • arnego2
          Antwort auf Meine Webseite, eure Meinung!
          Webseiten die noch nicht fertig sind ins Netz zu stellen ohne ihre Indexierung zu verhindern ist grob Fahrlässig, die Suchmaschinen sehen das nicht gern den es gibt Mittel und Wege die Bots am Indexieren zu hindern.

          Na ja eventuell sind diejenigen die Geldnebenbei verdienen wollen weniger...
          Gestern, 14:21
        • hubix
          Antwort auf Hallo, ein Neuer!
          Wow, krass, wie die Zeit vergeht!

          Von den Foren habe ich keines mehr. Aber dafür sind hier und da neue Homepages und auch 2 Online-Shops dazu gekommen...

          Für unseren Taekwondo-Verein:
          Kampfsport Neustadt

          Im Aufbau ein Blog über die grieschiche Urlaubsinsel...
          Gestern, 09:00
        • arnego2
          Antwort auf hreflang Tags
          2 Domains eins für Französisch eins für Deutsch.
          Bei den Franzosen bin ich recht sicher das ihnen eine voll Französische Seite mehr gefallen würde als eine mit Deutschen geteilte. Das meinte ich mit dem Eigensinn der Menschen.

          Eine Webseite muss dem User gefallen, ihm was abzunehmen,...
          24.03.2019, 16:13

        Kostenlose Homepage bei Jimdo!

        Einklappen

        Jimdo

        Die neuesten Beiträge

        Einklappen

        • daniel5959
          Antwort auf Hallo, ein Neuer!
          Hallo,

          bei den Websites Nr. 1 und 3 sind mir rechtliche Probleme aufgefallen - Hinweise an die Mailadressen der Betreiber verschickt.

          Allerdings bin ich kein Jurist und habe deshalb auch nicht alle möglichen rechtlichen Fehlerquellen überprüft.

          Optisch sind...
          Gestern, 18:55
        • TheBablegum
          Meine Webseite, eure Meinung!
          Mooin,
          ich betreibe nun seit geraumer Zeit meine eigene Webseite zum Thema Paidmailer und Werbemöglichkeiten.
          Da ich noch relativ weit am Anfang stehe und das meine erste Webseite ist, suche ich auch immer wieder Meinungen und Verbesserungsvorschläge.
          Sei es jetzt zum Layout, der...
          24.03.2019, 15:30
        • TheBablegum
          Antwort auf Meine Webseite, eure Meinung!
          Danke für ihre Meinung, ich werde versuchen dies umzusetzen.
          Natürlich ist mir klar das man Geld investieren muss, dass geht allerdings erst wenn man genug Geld hat
          Gestern, 16:11
        • arnego2
          Antwort auf Meine Webseite, eure Meinung!
          Webseiten die noch nicht fertig sind ins Netz zu stellen ohne ihre Indexierung zu verhindern ist grob Fahrlässig, die Suchmaschinen sehen das nicht gern den es gibt Mittel und Wege die Bots am Indexieren zu hindern.

          Na ja eventuell sind diejenigen die Geldnebenbei verdienen wollen weniger...
          Gestern, 14:21
        • hubix
          Antwort auf Hallo, ein Neuer!
          Wow, krass, wie die Zeit vergeht!

          Von den Foren habe ich keines mehr. Aber dafür sind hier und da neue Homepages und auch 2 Online-Shops dazu gekommen...

          Für unseren Taekwondo-Verein:
          Kampfsport Neustadt

          Im Aufbau ein Blog über die grieschiche Urlaubsinsel...
          Gestern, 09:00
        • Atlan
          hreflang Tags
          Hallo,
          habe immer noch ein Problem mit den hreflang Tags

          unsere Seite: https://www.*****.com, besteht aus dem Deutschen Teil unter *****.com und dem französischen Teil unter *****.com/fr/.
          -----------
          <!DOCTYPE html>
          <html lang="de">
          ...
          23.03.2019, 16:41
        • arnego2
          Antwort auf hreflang Tags
          2 Domains eins für Französisch eins für Deutsch.
          Bei den Franzosen bin ich recht sicher das ihnen eine voll Französische Seite mehr gefallen würde als eine mit Deutschen geteilte. Das meinte ich mit dem Eigensinn der Menschen.

          Eine Webseite muss dem User gefallen, ihm was abzunehmen,...
          24.03.2019, 16:13
        • Fragman
          Ausgabe als Link
          Hallo...

          habe eine Datenbank mit Songtexten mit Ausgabe auf einer Webseite. Es gibt eine Vorauswahl der Titel nach Buchstaben.
          Angezeigt wird dann eine Liste der Titel und des Interpreten.
          Wie mache ich aus der Ausgabe der Titel einen Link der dann den entsprechenden Text anzeigt??...
          21.03.2019, 21:05
        • Sempervivum
          Antwort auf Ausgabe als Link
          Danke für den Hinweis, PHP und Datenbanken sind weniger meine Stärke. Wenn man eine ID verwendet, wird das Ganze dann wesentlich einfacher.
          24.03.2019, 14:22
        • Rudolfo
          Antwort auf Online Speicherplatz / Storage / Cloud gesucht!
          Also ich bin auch ein überzeugter Cloud-Nutzer. Deswegen würde ich dir die Ratgeber von G Data empfehlen. Dieser zeigt alle Angebote, wichtige Information und erklärt auch ein paar Hintergründe. Ich bin selber auch durch den Ratgeber auf die Option der Cloud aufmerksam geworden und er hat mich überzeugt....
          ☁ Fotos, Videos, Dokumente: Einfach in die Cloud laden und teilen.☀ Wir zeigen Ihnen, wie sie funktioniert und wie im Cloud-Speicher alles sicher bleibt! ☁
          24.03.2019, 14:20
        Lädt...
        X