liberwinter: Eine frage an die Profis...

0 83

Eine frage an die Profis...

liberwinter
  • css
  • design/layout
  • html
  1. 2
    Rolf B
    1. 0
      liberwinter
      1. 1
        Rolf B
        1. 0
          liebewinter
          1. 0

            Der Div element ist nicht Leer

            liebewinter
            1. 0
              Rolf B
              1. 0
                Gunnar Bittersmann
                • css
                • design/layout
                • grid
          2. 0
            Rolf B
            1. 1
              Gunnar Bittersmann
              1. 0
                Rolf B
                1. 0
                  Gunnar Bittersmann
            2. 0
              liebewinter
    2. 1
      Gunnar Bittersmann
      • html
      1. 0
        Rolf B
        1. 0
          Gunnar Bittersmann
          1. 0
            Rolf B
    3. 0
      marctrix
      1. 1
        Gunnar Bittersmann
        1. 1
          Tabellenkalk
          • menschelei
          • sonstiges
  2. 1
    marctrix
    1. 0

      @Marc

      liebewinter
      1. 0
        marctrix
        1. 0
          liebewinter
          1. 0
            marctrix
            1. 0
              liebewinter
              1. 1
                Rolf B
                1. 0
                  liebewinter
                  1. 0
                    marctrix
                    1. 0
                      liebewinter
                      1. 0
                        marctrix
                        1. 0
                          liebewinter
                          1. 0
                            marctrix
                            1. 1
                              MudGuard
                              1. 0
                                marctrix
                            2. 1
                              Rolf B
                              1. 0
                                marctrix
                              2. 1
                                Gunnar Bittersmann
                                1. 0
                                  Rolf B
                                  1. 0
                                    JürgenB
                              3. 0
                                liebewinter
                            3. 0
                              liebewinter
                              1. 0
                                marctrix
                                1. 0
                                  liebewinter
                                  1. 1
                                    Tabellenkalk
                                    1. 0
                                      liebewinter
                                      1. 0
                                        marctrix
                                        1. 1
                                          liebewinter
                                          1. 0
                                            marctrix
                                          2. 0
                                            Tabellenkalk
                                            • design/layout
                                            • recht
                                            1. 1
                                              Gunnar Bittersmann
                                              1. 0

                                                OT: Menschenrechte

                                                Tabellenkalk
                                                • recht
                                                • sonstiges
                                              2. 0
                                                Matthias Apsel
                                                • recht
                                      2. 1
                                        Rolf B
                                        1. 0
                                          liebewinter
                                          1. 1
                                            Rolf B
                                            1. 1
                                              liebewinter
                                              1. 0
                                                marctrix
                                                1. 0
                                                  liebewinter
                                          2. 0
                                            marctrix
                                            1. 0
                                              Rolf B
                                            2. 0
                                              liebewinter
                                              1. 0
                                                marctrix
                                              2. 0
                                                Rolf B
                                                1. 0
                                                  liebewinter
                                                  1. 0
                                                    marctrix
                                                    1. 0
                                                      liebewinter
                                                  2. 0
                                                    Rolf B
                                                    1. 0
                                                      Gunnar Bittersmann
                                                2. 0
                                                  liebewinter
                            4. 0
                              liebewinter
                              1. 0
                                marctrix
                                1. 0
                                  liebewinter
                                  1. 1
                                    Tabellenkalk
                                    1. 0
                                      marctrix
                                      1. 0
                                        Tabellenkalk
                                        1. 0
                                          marctrix
                                      2. 0
                                        liebewinter
                            5. 0
                              liebewinter
    2. 1
      Gunnar Bittersmann
      • css
      • design/layout
      1. 0
        marctrix
        1. 0
          Gunnar Bittersmann
          1. 1
            marctrix

Hallo , ich bin kein deutsch und mein deutsch Sprache ist nicht so gut.... .ich bin mit html/css seit zwei Monate .Bin ich jetzt in eine Volksschule Online Kurs um html/css zu Lernen .Ich versuche auch meine Website zu bauen..... Ich habe meine Head , Navigation Menu mit Div gebaut , der Link Spalte (content) mit

UL	{ 
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%; 
    background-color: #f1f1f1;
    position: fixed; /* sagt welche Element (div ,text,..)               
    height: 100%; /* 1*/         
    overflow: auto;
}

aber wenn versuche der Rechte Spalte zu bauen , bekomme nicht ,

<div class="left"></div>
.left {
	display: flex;
	background-color: yellow;
	float: right;
	width: 15%;
	margin-right: 0;
}	

kann Bitte jemand hilfe und diese Proble zu lösen , Danke !

Edit Rolf B: ~~~ Formatierung hinzugefügt

akzeptierte Antworten

  1. Hallo liberwinter,

    Willkommen bei SelfHTML.

    Ich habe deine Code-Beispiele so geändert, dass das Forum sie besser anzeigt. Dafür setzt man davor und dahinter ein ~~~. Klicke einmal auf das Wort „Versionen“ über deinem Beitrag, da siehst Du was ich gemacht habe.

    Du schreibst "rechte Spalte". Möchtest Du insgesamt 3 Spalten haben? Links Navigation, in der Mitte der Haupt-Teil und rechts eine Spalte mit Informationen? Dann sollte das, was Du geschrieben hast, funktionieren. Kannst Du beschreiben, was falsch aussieht?

    Etwas anderes möchte ich auch noch schreiben: Du sagst, du verwendest div. Das kann man mit HTML 5 besser machen. Für den Kopf der Seite gibt es das <header> Element, für Navigation gibt es <nav>, für eine Spalte am Rand <aside>. Und für den Hauptteil <main>. Der Fuß der Seite ist <footer>. Diese Elemente verhalten sich genau so wie <div>, aber man weiß besser, was gemeint ist. Unser Wiki hat einen Artikel dazu.

    Rolf

    --
    sumpsi - posui - clusi
    1. Erste viel danke für deine Antwortet und für meine text zu korrigiert.. ! , die Idee für meine seite ist hier , Head und Navigation habe gemacht wie hier .

      Kannst Du beschreiben, was falsch aussieht?

      es kommt nicht.....

      ich habe bei eure Artikel gelesen das ist besser nicht viele Div benutze....,ich habe versuche es , aber weil meine html/css kenntnisse sehr einfache ist , benutze es... ich möchte jetzt ein Rechte Spaltung und einen Unten...

      Meine website wie jetzt ist

      Das Bild zeigt wie jetzt meine Website ist...

      1. Hallo ,

        ist dein div für rechts wirklich leer? dann ist die Größe null mal null und man sieht es nicht.

        was w3schools zeigt, ist aber veraltet. Das funktioniert, aber heute nimmt man lieber flexbox oder für den Aufbau der Seite. Unser Wiki enthält dazu viel. Entscheide Du, wie du es machen willst.

        Rolf

        --
        sumpsi - posui - clusi
        1. Ja , er ist leer .Danke für deine Antwort , welche von beiden empfiehlt du mich , danke

          Codec  von meine Website , html Codec

          Bild von meine html Codec

          CSS Codec von meine Website

          Dieses Bild zeigt Meine CSS Codec ,.left element zeigt wie ich der Rechte Spalte bauen möchte .

          1. Entschuldigung ,der Div für den Rechte Seite habe aufgefüllt , er hat der name ,.left element :

            .left {
            	display: flex;
            	background-color: yellow;
            	float: right;
            	width: 15%;
            	margin-right: 0;
            	
            	}
            
            1. Hallo ,

              ich war heute Abend nicht zu Hause und es ist jetzt spät, darum nur kurz.

              1. Sei bitte so nett und nenne eine Klasse nicht left, wenn sie „rechts“ bedeuten soll. Left bedeutet links, das verwirrt.

              2. Der Name "right" ist aber auch falsch. Klassen sollen sagen, was in einem HTML Element steht. Klassen sollen nicht sagen, wie das Element aussehen soll. Das wie steckt nur im CSS.

              3. Du hast 2 div mit class="left". Ist das Absicht?

              Eine Empfehlung ob du flexbox oder grid nehmen solltest habe ich nicht. Nimm das, was du besser verstehst.

              Rolf

              --
              sumpsi - posui - clusi
              1. @@Rolf B

                Eine Empfehlung ob du flexbox oder Gruß nehmen solltest habe ich nicht. Nimm das, was du besser verstehst.

                Die bessere Empfehlung dürfte sein: Nimm das, was für den Zweck besser geeignet ist. Und versuche, es zu verstehen.

                Das dürfte hier Grid sein. Damit sind Überschrift über volle Breite und 2 Spalten schnell umgesetzt (im Beispiel im media query) – mit im Code sichtbarem Layout (grid-template-areas).

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          2. Hallo liebewinter,

            Du kannst deinen Code auch als Text kopieren und hier zeigen. Dann kann man davon kopieren.

            Die Idee ist, dass Du die Bereiche deiner Seite im HTML so baust, dass sie einzeln sind. Wo sie angezeigt werden, baust Du mit CSS zusammen. Dafür ist Grid besser als Flexbox, du musst bei grid nur wissen, dass es zwei Versionen von grid gibt. Internet Explorer und Edge (bis Version 15) verwenden die alte Version, alle anderen Browser die neue Version. Wenn deine Seite in Internet Explorer und alten Edge Versionen so aussehen soll wie auf anderen Browsern, dann ist grid schwieriger. Weil ich meine Arbeit in einer Firma mache, die viel Internet Explorer 11 verwendet, benutze ich grid nicht und kenne mich damit nicht gut aus.

            Wenn Du Flexbox verwendest, musst Du ein "Helfer-div" verwenden, um linke Navigation, Hauptteil und eine rechte Spalte nebeneinander zu bekommen.

            Brauchst Du eigentlich zwei Navigationen? Wird deine Seite so groß, dass eine nicht reicht? Ich möchte mit Dir jetzt nicht über ein TopNav mit Aufklapp-Menüs sprechen; wenn man das so machen will, dass es jeder benutzen kann, ist es schwierig. Für eine erste Seite kannst Du die Navigation an den linken Rand setzen, und Listen ineinander legen wenn du eine Struktur darin haben willst. Wenn die Seite auf einem Handy angezeigt wird, KANN man etwas bauen womit die Navigation aufklappen und zuklappen kann, das muss für den Anfang aber nicht sein.

            Bevor ich ein Beispiel für Flexbox mache (Gunnar hat in seinem codepen ja schon etwas für grid gezeigt), möchte ich von Dir wissen, was Du mit "rechte Spalte" meinst. Wie soll deine Seite aussehen? Willst Du zwei oder drei Spalten haben?

            So                                          oder so
            ------------------------------------        ------------------------------------
            !           header                 !        !           header                 !
            ------------------------------------        ------------------------------------
            ! Na !                             !        ! Na !                       !     !
            ! vi !   Hauptteil                 !        ! vi !   Hauptteil           ! info!
            ! ga !                             !        ! ga !                       !     !
            ! ti !                             !        ! ti !                       !     !
            ! on !                             !        ! on !                       !     !
            !    !                             !        !    !                       !     !
            ------------------------------------        ------------------------------------
            !           footer                 !        !           footer                 !
            ------------------------------------        ------------------------------------
            

            Rolf

            --
            sumpsi - posui - clusi
            1. @@Rolf B

              Wenn Du Flexbox verwendest, musst Du ein "Helfer-div" verwenden, um linke Navigation, Hauptteil und eine rechte Spalte nebeneinander zu bekommen.

              Aber nicht doch. Geht völlig ohne zusätzliches div.

              Aber auch bei Flexbox müsste man für IE 10 die alte Syntax verwenden, „wenn deine Seite in Internet Explorer und so aussehen soll wie auf anderen Browsern“. Die Frage kann man aber auch getrost mit Nein beantworten.

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. Hallo Gunnar,

                ok, und das jetzt noch mit header und und footer für die Seite... Aber ich möchte erstmal abwarten ob ich das Grundlayout von liebewinter verstanden habe.

                IE10 kann man mit 0,08% wohl abhaken, für den würde ich nichts spezielles mehr tun. IE11 hat - in Deutschland - zumindest noch über 3% Nutzungsquote. Und der kann flexbox.

                Wir sollten unseren Winter-Liebhaber auch nicht tot diskutieren, denke an seinen Hinweis auf seine Deutschkenntnisse und dass er Einsteiger ist. Keep it simple.

                Rolf

                --
                sumpsi - posui - clusi
                1. @@Rolf B

                  Keep it simple.

                  Das wäre Grid, nicht Flexbox.

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            2. vielll danks für deine bemühst !

              ich habe mich Etscheide für CSS Grid , ich versuche jetzt wie Marc geschrieben hat .Deine Idee header , Link Spalte(navigator) , Hauptteilt , rechte Spalte(info) und footer , es mir gefällt ... ich versuche sie mit CSS Grid zu bauen....

    2. @@Rolf B

      Das kann man mit HTML 5 besser machen. […] für eine Spalte am Rand <aside>.

      Nein, aside hat zunächst einmal nichts mit „Spalte am Rand“ zu tun.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. Hallo Gunnar,

        es bietet sich aber für eine Infospalte am rechten Rand an.

        Zumindest verstehe ich die Spec so.

        Und natürlich kann man aside auch anders nutzen.

        Rolf

        --
        sumpsi - posui - clusi
        1. @@Rolf B

          [aside] bietet sich aber für eine Infospalte am rechten Rand an.

          Aus welchem Hut zauberst du eine Infospalte? Bei liberwinter gibt es keine solche.

          Und wenn es eine gäbe, dann wäre aside möglicherweise passend – aber nicht wegen „am rechten Rand“, sondern wegen „content that is tangentially related to the content of the parenting sectioning content“ [Spec]

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. Hallo Gunnar,

            was es bei liberwinter gibt und was nicht, hat sich mir tatsächlich noch nicht so recht erschlossen. Ich denke aber, dass er mit "rechte Spalte" eben nicht den Hauptteil meint. Eine Breite von 15% passt nicht dazu.

            sondern wegen „content that is tangentially related to the content of the parenting sectioning content“

            Ja. Klar. Infobereich halt. Ob nun rechts, links oder als Footer, das ist doch egal. Gibt's nicht in der Spec dafür auch ein Beispiel, wie die Grundstruktur einer Seite mit aside aufgebaut wird? Ich möchte es auch nicht zu kompliziert machen, sonst versteht liberwinter/liebewinter mich möglicherweise nicht.

            Rolf

            --
            sumpsi - posui - clusi
    3. Hej Rolf,

      Ein Plus und eine Anmerkung:

      Etwas anderes möchte ich auch noch schreiben: Du sagst, du verwendest div. Das kann man mit HTML 5 besser machen. Für den Kopf der Seite gibt es das <header> Element, für Navigation gibt es <nav>, für eine Spalte am Rand <aside>.

      aside dient zur Aufnahme von weiterführenden Inhalten, die nicht unbedingt an der Seite stehen müssen. Oft packt man solche Inhalte aber in eine Seitenleiste.

      Und für den Hauptteil <main>. Der Fuß der Seite ist <footer>. Diese Elemente verhalten sich genau so wie <div>, aber man weiß besser, was gemeint ist. Unser Wiki hat einen Artikel dazu.

      Die Elemente verhalten sich nciht wie div-Elemente, sie sehen aber so aus, weil sie standardmäßig wie div als Blockelemente dargestellt werden.

      Ihnen wohnt aber nicht nur eine andere Semnatik inne, diese wird auch von z.B. Screenreadern ausgewertet und verhalten sich dort auch anders. So ist ein main ein Element. das sich sich direkt mit der Taste m anspringen lässt.

      Dein Hinweis, dass der Code besser lesbar wird, ist natürlich schon ein ausreichender Grund, die Elemente korrekt zu verwenden.

      Keine Kritik also, nur eine kleine Ergänzung…

      Marc

      1. @@marctrix

        Und für den Hauptteil <main>. […] Die Elemente verhalten sich nciht wie div-Elemente, sie sehen aber so aus, weil sie standardmäßig wie div als Blockelemente dargestellt werden.

        main nicht in älteren Browsern. Da kann es nicht schaden, ggfs. noch main { display: block } im Stylesheet zu haben.

        Keine Kritik also, nur eine kleine Ergänzung…

        Dito.

        Außerdem muss man sich IMHO auch für Kritik nicht entschuldigen.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hallo,

          Keine Kritik also, nur eine kleine Ergänzung…

          Außerdem muss man sich IMHO auch für Kritik nicht entschuldigen.

          Weil Kritik nicht grundsätzlich negativ ist, sondern auch positiv sein kann/darf…

          Gruß
          Kalk

  2. Hej liberwinter,

    auch von mir ein herzliches Willkommen!

    Bin ich jetzt in eine Volksschule Online Kurs um html/css zu Lernen.

    Ich hoffe, da hat man Euch beigebracht, dass man grid für ein Layout benutzt…

    Ich versuche auch meine Website zu bauen..... Ich habe meine Head , Navigation Menu mit Div gebaut , der Link Spalte (content) mit

    UL	{ 
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 15%; 
        background-color: #f1f1f1;
        position: fixed; /* sagt welche Element (div ,text,..)               
        height: 100%; /* 1*/         
        overflow: auto;
    }
    

    Das möchtest du so bestimmt nicht lassen. Ich sehe da gleich mehrere Probleme:

    1.) Die meisten Menschen benutzen sehen sich Webseiten mit einem Smartphone an. Deine Spalte nimmt die ganze Höhe des Bildschirms ein und bleibt auch noch da stehen. Hast du dir das mal auf Deinem Smartphone angesehen?

    2.) Die Breite von 15% ist auf einem Smartphone viel zu gering.

    3.) Die Probleme vergrößern sich, wenn jemand größere Schriften verwendet, als von Dir vorgesehen.

    4.) Das was du geschrieben hast, wird mit jeder unsortierten Liste (unordered list ul) passieren. Das ist ganz sicher nicht gewollt!

    Wenn das das Beispiel aus dem Unterricht ist, hat Euer Lehrer Euch da mit etwas nach Hause geschickt, was nicht Gut ist. Das kann man nicht benutzen für eine richtige Webseite.

    aber wenn versuche der Rechte Spalte zu bauen , bekomme nicht ,

    <div class="left"></div>
    

    Dein HTML sollte ungefähr so aussehen: Zuerst brauchst du das Grundgerüst, wie es auf der Seite HTML-Grundgerüst beschrieben ist.

    In den bodykannst du dann Deine Seitenbereiche schreiben, zum Beispiel:

    
    <header></header>
    <nav></nav>
    <main></main>
    <aside></aside>
    <footer></footer>
    
    

    Jetzt möchtest Du sicher, dass der header oben steht, darunter willst du drei Spalten und zuletzt einen footer.

    Gunnar hat eine Methode gezeigt, die ich für Anfänger sehr gut geeignet halte, denn sie funktioniert so ähnlich wie skizzieren/malen und ist daher sehr intuitiv.

    Grundlage dafür ist CSS Grid. Das bedeutet, du erstellst ein raster, auf dem du deine Elemente anordnen kannst

    Dazu du gibst dem Eltern-Element von allem, was du anordnen möchtest, die Display-Eigenschaft grid:

    
    body {
      display: grid;
    }
    

    Daudrch werden alle Kinder von body automatisch zu sogenannten grid-items. Damit kannst du nun eine ganze Menge anstellen.

    Aber eins nach dem anderen. Grid bedeutet im deutschen Raster. Ein Raster findest du beispielsweise auf einem Schachbrett. Es besteht aus Reihen (beim Schach mit Zahlen gekennzeichnet) und aus SPalten (beim Schach mit Buchstaben gekennzeichnet).

    Aber wie viele Spalten und Zeilen soll unser Grid haben? Das müssen wir dem Browser mitteilen.

    Du möchtest drei Spalten (links, mitte, rechts).

    Das lässt sich so anlegen:

    body {
      display: grid;
    	grid-template-columns: 1fr 1fr 1fr;
    }
    

    Damit legst du drei gleich breite Spalten an, denn 1fr steht für ein Teil (fraction), das den vorhandenen Platz einnehmen darf.

    Wenn du drei davon angibst, werden alle gleich breit, denn der verfügbare Platz wird an alle drei Elemente gleichmäßig verteilt. Im Verhältnis 1:1:1

    Du möchtes sicher, dass die mittlere Spalte mehr Platz bekommt, als die beiden anderen. Dafür gibt es zwei Möglichkeiten:

    1.) Du gibst der mittleren Spalte mehr Platz, zum Beispiel 2fr oder sogar 3fr. Damit wird die mittlere Spalte doppelt oder gar drei mal so breit, wie die Spalten links und rechts.

    Das sieht so aus:

    body {
      display: grid;
    	grid-template-columns: 1fr 2fr 1fr; /* Mitte bekommt 2mal so viel Platz wie die Ränder */
    }
    

    2.) Du legst mehr als drei Raster-Spalten an und kannst dann dem mittleren Bereich sagen, er soll sich über mehrere Raster-Spalten strecken. Da das ein klein wenig komplizierter ist, werde ich es hier vormachen:

    body {
      display: grid;
    	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    

    Nun haben wir acht Spalten, wie auf einem Schachbrett (das kann man auch kürzer schreiben, aber belassen wir es an dieser Stelle mal dabei…)

    Auf diesen Spalten kannst du nun Deine Elemente anordnen. Am einfachsten geht das wie in Gunnars Beispiel, indem du deinen grid-areas Namen gibst.

    	header { grid-area: header; }
    
    	nav { grid-area: nav; }
    
    	main { grid-area: main; }
    
    	aside { grid-area: infoBox; }
    
    	footer { grid-area: footer; }
    

    Das Problem dabei ist, dass sich einige dieser Elemente genau wie deine Liste auch mehrfach in Deinem Dokument befinden können. Daher müssen wir etwas genauer beschreiben, welchen footer usw wir genau meinen.

    Wir wollen genau die Elemente formatieren, die Kinder von body sind. Dafür gibt es den sogenannten Kind-Selektor.

    Dabei gibt man das Eltern-Element und das Kind-Element gemeinsam an und kombiniert diese mit dem größer-als-Zeichen:

    	body > header { grid-area: header; }
    
    	body > nav { grid-area: nav; }
    
    	body > main { grid-area: main; }
    
    	body > aside { grid-area: infoBox; }
    
    	body > footer { grid-area: footer; }
    

    Von jetzt an ist klar, dass alle Formatierungen, die du an diesen Elementen vornehmen wirst, auch nur genau diese Elemente betreffen werden.

    Zurück zum Grid/Raster.

    Du hast jetzt also so etwas:

    Spalte1 Spalte2 Spalte3 Spalte4 Spalte5 Spalte6 Spalte7 Spalte8 
    

    Ohne das extra angegeben zu haben, darfst du aber deine Elemente zusätzlich auf beliebig vielen Zeilen angeben. Also so:

    Spalte1 Spalte2 Spalte3 Spalte4 Spalte5 Spalte6 Spalte7 Spalte8
    Spalte1 Spalte2 Spalte3 Spalte4 Spalte5 Spalte6 Spalte7 Spalte8
    Spalte1 Spalte2 Spalte3 Spalte4 Spalte5 Spalte6 Spalte7 Spalte8
    

    Deine Elemente jetzt auf diese Spalten zu verteilen geht indem du das genau so in dein CSS schreibst, nur mit den Namen, die du vergeben hast. Dazu benötigst du die Eigenschaft grid-template-areas

    Dahinter gibst du dann die Spalten so wie oben an:

    		grid-template-areas:
    "header  header  header  header  header  header  header   header"
    "nav     nav     main    main    main    main    infoBox  infoBox"
    "footer  footer  footer  footer  footer  footer  footer   footer";
    

    Das Raster ist damit fertig. Ich füge nur noch Farben hinzu, damit wir die einzelnen Boxen voneinander unterscheiden können:

    	body > header {
    		grid-area: header;
    		background-color: gray;
    		}
    
    	body > nav {
    		grid-area: nav;
    		background-color: lightcyan;
    		}
    
    	body > main {
    		grid-area: main;
    		background-color: lightyellow;
    		}
    
    	body > aside {
    		grid-area: infoBox;
    		background-color: lightcyan;
    		}
    
    	body > footer {
    		grid-area: footer;
    		background-color: gray;
    		}
    

    Bleibt eigentlich nur noch das Problem mit den kleinen Bildschirmen.

    Bisher ging es nur darum, wie man Boxen auf einem Grid/Raster platziert. Daher habe ich das gezeigt. Damit anzufangen wird aber aus vielen Gründen nciht empfohlen.

    Man kümmerst sich zuerst nur um die Darstellung auf den kleinsten Geräten, also Smartphones oder gar Smartwatches.

    Da machen mehrere Spalten keinen Sinn. Ich möchte also, dass die Spalten nur erscheinen, wenn der Bildschirm groß genug ist, um drei Spalten nebeneinader darzustellen. Dafür gibt es media-queries.

    Dadfür gibt es zwei Ansätze. Gunnar hat den eleganteren gewählt. Ich wähle hier einen anderen, weil er mir nach den gemachten Erklärungen leichter nachvollziehbar erscheint. Es geht also nur darum, dass auf Smartphones alle Spalten des Rasters nur einem Element bereit gestellt werden. Also so etwas:

    body {
    grid-template-areas:
    "header   header   header   header   header   header   header   header "
    "nav      nav      nav      nav      nav      nav      nav      nav    "
    "main     main     main     main     main     main     main     main   "
    "infoBox  infoBox  infoBox  infoBox  infoBox  infoBox  infoBox  infoBox"
    "footer   footer   footer   footer   footer   footer   footer   footer ";
    }
    

    Das gehört zuerst in das CSS.

    Das was wir vorher hatten, setzen wir in folgendes Konstrukt:

    @media screen and (min-width: 40em) {
    /* CSS Regeln, die hier stehen, werden nur angewendet, wenn der
       Platz im Browser (VIewport) mindestens so breit ist wie
       40 mal der Buchstabe 'm' */
    }
    

    Wie das aussieht, wenn du alles zusammen packst, siehst in meinem Codepen CSS-Grid mit benannten grid-areas.

    Marc

    1. Erste , vielll danks für deine bemühst !

      Ich hoffe, da hat man Euch beigebracht, dass man grid für ein Layout benutzt…

      Leider haben wir nichts bekommen... , der Kurs ist nur diese Website bauen .Die lehrerin gibt uns nur die Parameter , die Rest , sollen uns selbst suchen.....als Information Quelle um diese Website zu bauen , ist eure Website , so , habe ich euch kennengelernt ... ☺️ .

      Die meisten Menschen benutzen sehen sich Webseiten mit einem Smartphone an. Deine Spalte nimmt die ganze Höhe des Bildschirms ein und bleibt auch noch da stehen.

      Meine Webside möchte ich über Linux sprechen , ich denke meisten Linux benutze , sich benutzen Rechner ...

      Hast du dir das mal auf Deinem Smartphone angesehen?

      Nein , ich habe keine Smartphone ☺️ , ich habe eine Billiger Mobiltelefon ... .

      ich möchte jetzt versuche meine Website mit Css Grid layout bauen ,es wäre die möglichkeit wenn ich hilfe brauche , bei dir melden ???

      1. Hej liberwinter,

        Erste , vielll danks für deine bemühst !

        Keine Ursache!

        Ich hoffe, da hat man Euch beigebracht, dass man grid für ein Layout benutzt…

        Leider haben wir nichts bekommen... , der Kurs ist nur diese Website bauen .Die lehrerin gibt uns nur die Parameter , die Rest , sollen uns selbst suchen.....als Information Quelle um diese Website zu bauen , ist eure Website , so , habe ich euch kennengelernt ... ☺️ .

        Dann kann sie so schlecht nicht sein 😂

        Nein, keine Ahnung wie sie unterrichtet, aber das was sie gezeigt hat ist ja schon ziemlich anders als dein Versuch?!?

        Ist der Kurs denn schon vorbei? Oder kommt noch Hilfe?

        Hast du dir das mal auf Deinem Smartphone angesehen?

        Nein , ich habe keine Smartphone ☺️ , ich habe eine Billiger Mobiltelefon …

        Das ist gut! Es soll ja nicht nur in den neuesten High-End-Geräten gut aussehen!

        ich möchte jetzt versuche meine Website mit Css Grid layout bauen ,es wäre die möglichkeit wenn ich hilfe brauche , bei dir melden ???

        Lieber hier im Forum, dann können auch andere helfen und jeder kann es nachlesen.

        Übrigens falls du besser englisch sprichst und in dieser Hinsicht eine Ausbildung machen möchtest, schau dir doch mal die Kurse von dci an. Die Website ist zwar deutsch, es gibt aber englische Kurse. Am Anfang steht der Orientierungskurs

        Marc

        1. aber das was sie gezeigt hat ist ja schon ziemlich anders als dein Versuch?!?

          ja , weil was wir lernen ist bauen diese Website was ich machen möchte ist eine Website für mich ....ich möchte eine Website die über Linux sprechen um mit Werbung ein Bisschen Geld zu verdinen ☺️

          Ist der Kurs denn schon vorbei? Oder kommt noch Hilfe?

          noch nicht , der Kurs ist Online ,wir besuchen keine Unterricht ,wir machen alles zu Hause , der Kurs hat am 17 letzte Monat angefang , der Kurs dauert drei Monate aber ich versuche diese Woche zu beenden ....

          Übrigens falls du besser englisch sprichst und in dieser Hinsicht eine Ausbildung machen möchtest, schau dir doch mal die Kurse von dci an. Die Website ist zwar deutsch, es gibt aber englische Kurse. Am Anfang steht der Orientierungskurs…

          wie frühr gesagt habe , ich möchte nur meine Website bauen ...das probleme die habe viel drück von Arbeitsamt und Jobcenter und habe nicht viel zeit , deshalb möchte ich wie schneller möglick meine Website zu bauen.…

          Jetzt versuche mit deine Bespiel und diese meine Website bauen , bei deine habe schwierigkeit die

          body > header { grid-column: 1 / span 3; grid-row: 2 / span 3; background-color: gray; }

          großer zu bauen , bei die andere Beispiel , bekommen keine Probleme , Vielleicht weil er mit Div gebaut wurde ??

          1. Hej liberwinter,

            was ich machen möchte ist eine Website für mich ....ich möchte eine Website die über Linux sprechen um mit Werbung ein Bisschen Geld zu verdinen ☺️

            Oh, das wird nicht einfach. Die Konkurrenz ist groß. Aber ich will dich nicht abhalten.

            Ist der Kurs denn schon vorbei? Oder kommt noch Hilfe?

            noch nicht , der Kurs ist Online ,wir besuchen keine Unterricht ,wir machen alles zu Hause , der Kurs hat am 17 letzte Monat angefang , der Kurs dauert drei Monate aber ich versuche diese Woche zu beenden ....

            Dann würde ich trotzdem dort auch mal nachfragen. Kostet doch sicher Geld, dann müssen auch Fragen beantwortet werden. Aber ich mache natürlich auch weiter mit dir!

            Übrigens falls du besser englisch sprichst und in dieser Hinsicht eine Ausbildung machen möchtest, schau dir doch mal die Kurse von dci an. Die Website ist zwar deutsch, es gibt aber englische Kurse. Am Anfang steht der Orientierungskurs…

            wie frühr gesagt habe , ich möchte nur meine Website bauen ...das probleme die habe viel drück von Arbeitsamt und Jobcenter und habe nicht viel zeit

            Die Kosten werden meines Wissens nach mindestens teilweise von den Jobcentern übernommen und in Absprache mit den Jobcentern durchgeführt

            Jetzt versuche mit deine Bespiel und diese meine Website bauen , bei deine habe schwierigkeit die

            body > header { grid-column: 1 / span 3; grid-row: 2 / span 3; background-color: gray; }

            großer zu bauen , bei die andere Beispiel , bekommen keine Probleme , Vielleicht weil er mit Div gebaut wurde ??

            Ja klar, Body > header wählt ja kein div, sondern ein header-Element, das sich direkt im body befindet.

            Wenn du mit Werbung Geld verdienen mochtest, musst du gut in Suchmaschinen gefunden werden. Da ist eine gute Auszeichnung (neben vielen anderen Dingen) von Vorteil!

            Nur mit div wird es schwerer…

            Marc

            1. Dann würde ich trotzdem dort auch mal nachfragen. Kostet doch sicher Geld, dann müssen auch Fragen beantwortet werden. Aber ich mache natürlich auch weiter mit dir!

              ich habe schon die Lehrerin gefragt das ist was sie mich antgewortet hat....

              Sie haben an der VHSTK den Online-Kurs HTML und CSS gebucht. Dabei besteht meine Leistung darin, Sie für die Dauer dieses Kurses zu betreuen und Ihnen die Fragen, die im Zusammenhang mit dem Kurs stehen zu beantworten. Nicht enhalten in der Leisung ist meine Unterstützung oder Zuarbeit beim Aufbau Ihrer eigenen Website.

              Die Kosten werden meines Wissens nach mindestens teilweise von den Jobcentern übernommen und in Absprache mit den Jobcentern durchgeführt

              ich möchte raus von ihnen , nur bekomme streß von ihnen.....

              Ja klar, Body > header wählt ja kein div, sondern ein header-Element, das sich direkt im body befindet.

              Deshalb habe bei https://stackoverflow.com , -1 bekomme... , ich habe gefragt wie kann ein Bild mit CSS Grid ohne div postet...

              Mit Grid ist Besser arbeite mit oder ohne div ???

              1. Hallo Marc,

                danke für die Unterstützung :)

                Hallo liebewinter,

                bei Stackoverflow kann es schnell ein -1 geben, wenn jemand glaubt, dass die Frage blöd ist. Ärgere Dich nicht.

                Die Lehrerin kann ich aber auch verstehen. Wenn sie jedem Schüler bei der eigenen Webseite hilft, dann macht sie bald nichts anderes mehr. Wir bei SelfHTML können auch nicht deine Webseite für dich schreiben; wir können Dir erste Schritte zeigen, wir können dir sagen wo Du im Netz Wissen findest, und wir können konkrete Fragen beantworten.

                Du kannst grid mit vielen Elementen benutzen. Du musst im CSS nur sagen, wofür die Grid-Eigenschaften angewendet werden sollen.

                Das hier:

                body > header {  grid-column: 1 / span 3; }
                

                ist eine CSS Regel. Sie besteht aus einem Selektor body > header, der auswählt, für welche Elemente sie gilt. Innerhalb des { } stehen die Eigenschaften, die für die gewählten Elemente benutzt werden sollen.

                Wenn Du <div class="header"> verwendest, brauchst Du einen anderen Selektor:

                .header { grid-column: 1 / span 3; }
                

                Das ist alles. Es ist für grid egal ob du <div class="header"> oder <header> schreibst. Aber für "gutes HTML" ist es besser, semantische Elemente zu verwenden.

                Rolf

                --
                sumpsi - posui - clusi
                1. bei Stackoverflow kann es schnell ein -1 geben, wenn jemand glaubt, dass die Frage blöd ist. Ärgere Dich nicht.

                  ich weiss...ich have einige erfahrung mit ihnen gehabt....ich habe -3 bekomme....aber Heute hat jemand woran meine probleme war , und danke er/sie , habe meine Probleme gelösst....

                  Die Lehrerin kann ich aber auch verstehen. Wenn sie jedem Schüler bei der eigenen Webseite hilft, dann macht sie bald nichts anderes mehr.

                  ich weiss , aber hilfe machmal für sie es wäre nicht so "problematisch"..., ich habe auch gesagt an die anderen schuler wenn jemand mich fragt möchtet , kann das machen , und du kannst sehe wie meine kenntnisse ist....

                  Wir bei SelfHTML können auch nicht deine Webseite für dich schreiben; wir können Dir erste Schritte zeigen, wir können dir sagen wo Du im Netz Wissen findest, und wir können konkrete Fragen beantworten.

                  Hast du Recht , ich bin die Meinung wenn jemand etwas lernen möchtet , er/sie soll sich selbst alleine 80% machen... , Erste samen kenntnisse und dann das Projekt zu Realisieren... . jetz habe meine Bild auf head gepostet , weil ich die Kostelost habe , könnte nicht das Bild upload… . Um euch nicht alle fragen zu stellen , versuche jetzt mehr über css-grid zu lernen..

                  1. Hej liberwinter,

                    jetz habe meine Bild auf head gepostet , weil ich die Kostelost habe , könnte nicht das Bild upload… . Um euch nicht alle fragen zu stellen , versuche jetzt mehr über css-grid zu lernen..

                    Mach es dir doch nicht so schwer. Du kannst doch meinen pen als Anfang nehmen.

                    Ich bin ja nicht so sehr für fertigen Code, aber ich habe ja alles detailliert erklärt und gerade angesichts des komplexen grid-Moduls halte ich Beispiele für eine gute Lehrmethode. Siehe auch grid by example. Marc

                    1. Danke für deine hilfe ! , jetzt brauche noch nicht deine ....

                      ich auf deine Codec noch eine ,header2 ansetzen ...auf codepen.io sehen kannst . für smartphone und tablets das hat keine wirkung ... ich Hoffe... .Ich möchte deine benutze als Muster.....

                      1. Hej ,

                        Danke für deine hilfe ! , jetzt brauche noch nicht deine ....

                        ich auf deine Codec noch eine ,header2 ansetzen ...auf codepen.io sehen kannst . für smartphone und tablets das hat keine wirkung ... ich Hoffe... .Ich möchte deine benutze als Muster.....

                        Das funktioniert so leider nicht Header ist ein html-Element, header2 gibt es nicht. Was möchtest du denn mit dem header2 machen? Ich meine, was soll da rein?

                        Marc

                        1. Was möchtest du denn mit dem header2 machen? Ich meine, was soll da rein?

                          ich möchte Links anlegen , wie Beispiel Home , Über mich ,.... . Aber für meinen anderen Links ,ich möchte eine Linke Spalte benutze.....

                          noch eine andere frage..., wenn ich möchte ein Bild auf head postet , mache ich wie bei div ???

                          <img  style="max-width: 100%;height: auto;" src="/home/me/Document/HTML/work/my2.png" alt="header" />
                          

                          ich bedanke mich für deine Unterstürz!!

                          1. Hej liberwinter,

                            Was möchtest du denn mit dem header2 machen? Ich meine, was soll da rein?

                            ich möchte Links anlegen , wie Beispiel Home , Über mich ,.... .

                            Das klingt nach der Hauptnavigation. Die sollte in nav.

                            Aber für meinen anderen Links ,ich möchte eine Linke Spalte benutze.....

                            Dann wären weitere Links, die als nette Ergänzung zum Haupttext mitgegeben würden in ein aside zu verpacken.

                            Um die beiden Kästen (einer mit Links, einer vermutlich mit Texten) voneinander zu unterscheiden, wären IDs sinnvoll.

                            Ich habe das in meinem Codepen-Beispiel mal ergänzt.

                            noch eine andere frage..., wenn ich möchte ein Bild auf head postet , mache ich wie bei div ???

                            <img  style="max-width: 100%;height: auto;" src="/home/me/Document/HTML/work/my2.png" alt="header" />
                            

                            Ja, genau. head und div sind beide Blocklevel-Elemente und verhalten sich optisch gleich. Daher können sie auch auf dieselbe Weise gefüllt werden.

                            ich bedanke mich für deine Unterstürz!!

                            Gerne!

                            Marc

                            1. Hi,

                              Ja, genau. head und div sind beide Blocklevel-Elemente und verhalten sich optisch gleich.

                              Da melde ich mal starke Zweifel an. head ist üblicherweise unsichtbar, während div sichtbar ist.

                              Verwechselst Du head und header?

                              cu,
                              Andreas a/k/a MudGuard

                              1. Hej MudGuard,

                                Hi,

                                Ja, genau. head und div sind beide Blocklevel-Elemente und verhalten sich optisch gleich.

                                Da melde ich mal starke Zweifel an. head ist üblicherweise unsichtbar, während div sichtbar ist.

                                Verwechselst Du head und header?

                                Ja, ständig! . Danke für die Korrektur!

                                Es muss header heißen innerhalb von body!

                                Marc

                            2. Hallo liebewinter (oder Joseba :) ),

                              <img style="max-width: 100%;height: auto;" src="/home/me/Document/HTML/work/my2.png" alt="header" />

                              Das ist nur eine Zeile, aber dazu kann man viel sagen:

                              1. max-width und height stellst Du besser über die CSS Datei ein. Das style-Attribut kann man verwenden, wenn man mit JavaScript den Seiteninhalt ändert (aber class ist besser).
                              2. Wenn das Bild den <header> Bereich ausfüllen soll, dann ist es vielleicht besser ein background-image (CSS) statt ein <img> Element.
                              3. Die src-Angabe sieht falsch aus. Das ist ein absoluter Pfad, und er gilt auf deinem eigenen Computer. Wenn das Projekt an einen anderen Ort kopiert wird, oder wenn die Seite über einen Webserver ausgeliefert wird, funktioniert das nicht mehr. Man soll eigene Ressourcen immer mit relativen Pfaden laden. Relativer Pfad bedeutet: Der Browser beginnt bei dem Ordner, in dem die Datei steht, die die Ressource laden will. Der Unterschied zwischen absolutem Pfad und relativem Pfad ist das '/' zu Beginn.
                                UND es ist gut, wenn Ressourcen in eigenen Ordnern stehen.
                                Wenn die HTML Datei im Verzeichnis /home/me/Document/HTML/work steht, und das Bild in /home/me/Document/HTML/work/images, dann kannst Du es mit <img src="images/my2.png" alt="header"> laden. Wenn du das Bild mit CSS als Hintergrundbild lädst, und die CSS Datei in /home/me/Document/HTML/work/css gespeichert ist, dann würdest Du
                                header { background-image: url(../images/my2.png); } schreiben (und noch ein paar background- Eigenschaften mehr, damit es richtig angezeigt wird).
                                Ein .. in einem Pfad bedeutet: Gehe im Verzeichnis-Baum eine Stufe nach oben.

                              Rolf

                              --
                              sumpsi - posui - clusi
                              1. Hej Rolf,

                                <img style="max-width: 100%;height: auto;" src="/home/me/Document/HTML/work/my2.png" alt="header" />

                                Das ist nur eine Zeile, aber dazu kann man viel sagen:

                                Alles richtig! Und eine Ergänzung: ob Hintergrund-Bild mittels CSS oder ein Bild im HTML hängt davon ab, ob das Bild inhaltlich bedeutend ist oder nur eine Schmuckgrafik.

                                CSS ist für Schmuck/Dekoration zuständig, Inhalte gehören ins HTML.

                                Marc

                              2. @@Rolf B

                                max-width und height stellst Du besser über die CSS Datei ein. Das style-Attribut kann man verwenden, wenn man mit JavaScript den Seiteninhalt ändert

                                ?? Was hat die Verwendung des style-Attributs mit JavaScript zu tun?

                                Und es riecht nach 4711 1711.

                                (aber class ist besser).

                                Oder ID. Oder irgendwas anderes, wie man das betreffende Element selektieren kann.

                                LLAP 🖖

                                --
                                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                                1. Hallo Gunnar,

                                  Was hat die Verwendung des style-Attributs mit JavaScript zu tun?

                                  Wenn ich per Script im DOM rummache und Elemente hinzufüge, kann es einfacher und robuster sein, dem style direkt zu setzen (die Betonung liegt auf kann). Vor allem, wenn es Bibliotheks-Code ist, der keine Abhängigkeit zu einer CSS Datei haben soll.

                                  Wenn ich HTML von Hand schreibe, verzichte ich auf style und regele alles über CSS Dateien.

                                  Rolf

                                  --
                                  sumpsi - posui - clusi
                                  1. Hallo Rolf,

                                    Was hat die Verwendung des style-Attributs mit JavaScript zu tun?

                                    Wenn ich per Script im DOM rummache und Elemente hinzufüge, kann es einfacher und robuster sein, dem style direkt zu setzen (die Betonung liegt auf kann). Vor allem, wenn es Bibliotheks-Code ist, der keine Abhängigkeit zu einer CSS Datei haben soll.

                                    so mache ich es auch. Und wenn die Regeln dann zu komplex werden, kann man ja auch das Stylesheet per JS erstellen, wie z.B. beim Tabellensortierer.

                                    Gruß
                                    Jürgen

                              3. max-width und height stellst Du besser über die CSS Datei ein. Das style-Attribut kann man verwenden, wenn man mit JavaScript den Seiteninhalt ändert (aber class ist besser).

                                ich habe versuche mit padding: 50px; , weil max-width und height nicht funzioniert…

                                Wenn das Bild den <header> Bereich ausfüllen soll, dann ist es vielleicht besser ein background-image (CSS) statt ein <img> Element.

                                danke , das mache ich.... meinen ganze Codec :

                                .a {
                                      grid-column: 1 / span 4;
                                	    grid-row: 1 / 1;
                                		  background-image: url("../work/my2.png");
                                	    background-repeat: repeat-x;
                                	    background-attachment: fixed;
                                	    padding: 50px;	
                                    }
                                

                                wenn ich versuche mit alt="header" auf header { background-image: url(../images/my2.png); } das Bild wird nicht gezeigt.....

                                schreiben (und noch ein paar background- Eigenschaften mehr, damit es richtig angezeigt wird).

                                Kannst Bitte einiger Beispielen geben , danke

                            3. ich habe meine Bild in css zu stellen... meine code

                              .a {
                                    grid-column: 1 / span 4;
                              	    grid-row: 1 / span 2;
                              		  background-image: url("/home/me/Document/HTML/work/my2.png");
                              	    background-repeat: repeat-x;
                              	    background-attachment: fixed;	    
                                    padding: 50px;	
                              
                              1. Hej liebewinter,

                                ich habe meine Bild in css zu stellen... meine code

                                Und? Funktioniert es?

                                Vergleiche doch mal deinen Code mit meinem Code.

                                Da gibt es mehr Unterschiede als Gemeinsamkeiten…

                                Marc

                                1. Ja , das Bild kommt...

                                  Vergleiche doch mal deinen Code mit meinem Code.Da gibt es mehr Unterschiede als Gemeinsamkeiten…

                                  weil ich habe mit div versucht....

                                  1. Hallo,

                                    weil ich habe mit div versucht....

                                    Warum? Schon in der ersten Antwort ist dir davon abgeraten worden.

                                    Gruß
                                    Kalk

                                    1. danke , ich habe gemacht..

                                      html Codec:

                                      <nav class="me" >
                                        <ul>
                                          <li><a href="https://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/nav">Home</li>
                                          <li><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Seitenstrukturierung">Ich</li>
                                        </ul>
                                      </nav>
                                      
                                      

                                      css Codec :

                                      .me {
                                      	overflow: hidden;
                                        background-color: #EBF5E7;
                                      	height: 25px;
                                      }	
                                      .me a{	
                                      
                                      	
                                      	color: black;
                                        text-decoration: none;
                                      	float: left;
                                      	padding:  0px 8px;
                                      	line-height: 10%;
                                      	 left: 100%;
                                      }
                                          
                                      	
                                      ul {list-style-type: none;}   
                                       	
                                      li {display: block;}	   
                                      
                                      	
                                      
                                      1. Hej ,

                                        danke , ich habe gemacht..

                                        Und? Klappt, oder? 😉

                                        Aber es geht auch so (ohne Klasse):

                                        html Codec:

                                        <nav>
                                          <ul>
                                            <li><a href="https://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/nav">Home</li>
                                            <li><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Seitenstrukturierung">Ich</li>
                                          </ul>
                                        </nav>
                                        
                                        

                                        css Codec :

                                        nav{
                                        	overflow: hidden;
                                          background-color: #EBF5E7;
                                        	height: 25px;
                                        }	
                                        nav a{	
                                        
                                        	
                                        	color: black;
                                          text-decoration: none;
                                        	float: left;
                                        	padding:  0px 8px;
                                        	line-height: 10%;
                                        	 left: 100%;
                                        }
                                          
                                        /* hier solltest du noch "nav" ergänzen, damit nicht alle listen betroffen sind */  
                                        	
                                        nav ul {list-style-type: none;}   
                                         	
                                        nav li {display: block;}	   
                                        
                                        	
                                        

                                        Voilá!

                                        Marc

                                        1. Viellllllllll Danke!! , hier wie jetzt meine Website siehst ... ich weiss ich muss viel mehr machen ...aber lansannnnn anfang forme zu nehmen...

                                          1. Hej ,

                                            Viellllllllll Danke!! , hier wie jetzt meine Website siehst ... ich weiss ich muss viel mehr machen ...aber lansannnnn anfang forme zu nehmen…

                                            Meine Erläuterungen zum Thema grid sollten genau das erreichen: dass du einen Anfang hast. Befülle weiter die Kästen, versuche bei Problemen im Wiki Lösungen zu finden - und wenn das nicht reicht, freuen wir uns hier wieder von dir zu hören!

                                            Übung macht den Meister!

                                            Marc

                                          2. Hallo,

                                            Ich vermute, du hast den Text von hier, hast du da Eine Erlaubnis eingeholt? Normalerweise nimmt man für den Entwurf einer Webseite nicht Text von Anderen, sondern sogenannten Blindtext.

                                            Gruß
                                            Kalk

                                            1. @@Tabellenkalk

                                              Normalerweise nimmt man für den Entwurf einer Webseite nicht Text von Anderen, sondern sogenannten Blindtext.

                                              Ich nutze dafür üblicherweise die Allgemeine Erklärung der Menschenrechte. Da wird doch niemand was dagegen haben, dass die immer wieder in Erinnerung gerufen wird?

                                              LLAP 🖖

                                              --
                                              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                                              1. Hallo,

                                                Da wird doch niemand was dagegen haben, dass die immer wieder in Erinnerung gerufen wird?

                                                Jamil Hassan vielleicht?

                                                Gruß
                                                Kalk

                                              2. Hallo Gunnar Bittersmann,

                                                Ich nutze dafür üblicherweise die Allgemeine Erklärung der Menschenrechte. Da wird doch niemand was dagegen haben, dass die immer wieder in Erinnerung gerufen wird?

                                                Ich hatte da schon mal angefragt — keine Antwort.

                                                Bis demnächst
                                                Matthias

                                                --
                                                Rosen sind rot.
                                      2. Hallo ,

                                        in deinem Pen ist noch viel durcheinander.

                                        • du musst <a> mit einem </a> beenden. Die fehlenden </a> zerreißen das ganze Layout.
                                        • ein Browser zeigt die <li> in einem <ul> untereinander an. Du hast overflow:hidden und height:25px, deswegen verschwinden die <li>. Du verwendest für die <a> float:left um das zu ändern, aber das ist nicht die Lösung. Gib den li ein display:inline-block, dann erscheinen sie nebeneinander. Im <ul> brauchst Du dann kein height und kein overflow:hidden mehr.
                                        • line-height: Das funktioniert nicht so wie Du denkst. Die 10% für das <a> haben keine Wirkung. line-height ist nicht ganz einfach zu verstehen; unser Wiki erklärt zu wenig dazu.

                                        Deine Definition für das Grid musst Du noch verbessern.

                                        • Du verwendest eine @media-Regel, um das Grid-Layout zu ändern wenn der Bildschirm breit genug ist. Im ersten Teil (vor der @media Regel) fehlt ein Platz für linkBox
                                        • Verschiebe grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; aus der @media-Regel in die allgemeine body-Regel. Sonst hast Du bei schmalen Bildschirmen keine Spalten mehr festgelegt

                                        Was Du tun KANNST, aber nicht MUSST, ist dies: die Grid-Definition kann man einfacher machen. Du hast 8 Spalten angegeben, alle gleich breit. In den areas musst Du deswegen viel schreiben. Du hast aber eigentlich nur 3 Spalten: Links, Mitte, Rechts. Das kann man auch so bauen:

                                        grid-template-columns: 1fr 2fr 1fr;
                                        grid-template-areas:
                                          "header  header   header"
                                          "nav     nav     nav  "
                                          "linkBox main    infoBox"
                                          "footer  footer  footer  ";
                                        

                                        Rolf

                                        --
                                        sumpsi - posui - clusi
                                        1. Viel Dankt für deinen arbeitet ! , ich habe fast alles gemacht , wie du mir sagst …

                                          diese stück habe ich nicht verstande.…

                                          quDu verwendest eine @media-Regel, um das Grid-Layout zu ändern wenn der Bildschirm breit genug ist. Im ersten Teil (vor der @media Regel) fehlt ein Platz für linkBox te here

                                          Wenn du willst , kannst du siehst wie meine Website ist geworden...

                                          1. Hallo ,

                                            diese stück habe ich nicht verstande.…

                                            Ich meine folgendes: Du schreibst:

                                            grid-template-areas:
                                            "header   header   header"
                                            "nav      nav      nav    "
                                            "main     main     main   "
                                            "infoBox  infoBox  infoBox"
                                            "footer   footer   footer "
                                            

                                            Da fehlt ein Eintrag für linkBox. In der Definition für @media screen (min-width:40em) ist einer drin. Wenn Du für linkBox keinen Platz festlegst, sucht sich das grid selbst einen aus.

                                            Rolf

                                            --
                                            sumpsi - posui - clusi
                                            1. gemacht....

                                              grid-template-areas:
                                              	
                                              "header   header   header"   
                                              "nav      nav      nav" 
                                              "linkBox  linkBox  linkBox"	
                                              "main     main     main"     
                                              "infoBox  infoBox  infoBox"  
                                              "footer   footer   footer" ;  
                                              }
                                              @media screen and (min-width: 40em) {
                                                body {
                                                  display: grid;
                                                  grid-template-columns: 1fr 2fr 1f;
                                                    grid-template-areas:
                                                "header  header  header" 
                                                "nav     nav     nav"     
                                                "linkBox main    infoBox"
                                                "footer  footer  footer";
                                                }
                                              }
                                              
                                              1. Hej libewinter,

                                                gemacht.…

                                                Schneller als meine Antwort 😉

                                                Marc

                                                1. wie meine Website aussieht.. ich weiss...ich habe noch viel zu tun .. aber eine Sache ist sicher , ohne euch ich wäre vielllll mehr Zeit gebraucht ....

                                                  wenn jemand Interesse auf meine Codec ist...

                                                  body>
                                                  
                                                  <header></header>
                                                  <nav>
                                                    <ul>
                                                      <li><a href="https://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/nav">Home</a></li>
                                                      <li><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Seitenstrukturierung">About Us</a></li>
                                                      <li><a href="#">Contact</a></li>
                                                    </ul>
                                                  </nav>
                                                  
                                                  
                                                  <aside id="externalLinks">
                                                  <ul>
                                                    <li><a href="#">Computer</a></li>
                                                    <li><a href="#">News</a></li>
                                                    
                                                  </ul>
                                                  
                                                  </aside>
                                                  <main>
                                                  <br>
                                                  
                                                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
                                                  montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
                                                  aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. 
                                                  Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
                                                  dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. 
                                                  Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem 
                                                  neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis 
                                                  faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, 
                                                  leo eget bibendum sodales, augue velit cursus nunc, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. 
                                                  Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
                                                  </p>
                                                  <br>
                                                  <br>
                                                  <br>
                                                  <br>
                                                  <br>
                                                  <br>
                                                  <br>
                                                  <br>
                                                  <br>
                                                  <br>
                                                  
                                                  
                                                  
                                                  
                                                  
                                                  </main>
                                                  
                                                  <aside id="furtherInformation"></aside>
                                                  
                                                  <footer id="copry" >
                                                  	<p>My Website: Linux and More  © 2018. All Rights Reserved.</p>	
                                                  <a id="img1" href="https://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" width="120px" height="40px" src="../Meine-web/CC-Lizenz.png" ></a> 
                                                  <p>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0<br> International License.
                                                  	Content of this site cannot be republished<br> either online or offline without our permissions. </p>
                                                  
                                                  </footer>
                                                  </body>	
                                                  </html>	
                                                  
                                                  body {
                                                  background-color: #ebf5d7;
                                                  grid-gap: 5px;
                                                  grid-template-columns: 10% 72% 17%;
                                                  grid-template-areas:
                                                  	
                                                  "header   header   header"   
                                                  "nav      nav      nav" 
                                                  "linkBox  linkBox  linkBox"	
                                                  "main     main     main"     
                                                  "infoBox  infoBox  infoBox"  
                                                  "footer   footer   footer" ;  
                                                  }
                                                  @media screen and (min-width: 40em) {
                                                    body {
                                                      display: grid;
                                                      grid-template-columns: 10% 72% 17%;
                                                        grid-template-areas:
                                                    "header  header  header" 
                                                    "nav     nav     nav"     
                                                    "linkBox main    infoBox"
                                                    "footer  footer  footer";
                                                    }
                                                  }
                                                  body > header {
                                                  	grid-area: header;
                                                  	background-image: url("../Arbeit/meine2.png");
                                                      padding: 60px;
                                                  }
                                                  
                                                  body > nav {
                                                  	grid-area: nav;
                                                  	background-color: #d2f5c4;
                                                  	
                                                  }
                                                  
                                                  body > #externalLinks {
                                                  	grid-area: linkBox;
                                                  	background-color:  #d2f3c6;
                                                  	;
                                                  }	
                                                  body > main {
                                                  	grid-area: main;
                                                  	background-color: #eaf6e5;
                                                  }
                                                  
                                                  body > #furtherInformation {
                                                  	grid-area: infoBox;
                                                  	background-color: #d2f3c6;
                                                  }
                                                  
                                                  body > footer {
                                                  	grid-area: footer;
                                                  	background-color: #99ee7a;
                                                  	
                                                  }
                                                  
                                                  
                                                  /* Nav  */
                                                  
                                                  nav {
                                                  	
                                                      background-color: #d2f5c4;
                                                  	font-size: 17px;
                                                  	
                                                  	
                                                   }	
                                                  nav a{	
                                                  
                                                  	
                                                  	color: black;
                                                      text-decoration: none;
                                                  	margin: 0;
                                                  	display: inline;
                                                  	padding: 0px 8px;
                                                  	
                                                  	
                                                  }
                                                      
                                                  	
                                                  nav ul {list-style-type: none;}   
                                                   	
                                                  nav li {display: block;display:inline-block}	   
                                                  
                                                  a:hover{background-color: #a9c79d;color: #746cc0;}	
                                                  
                                                  /* ExternalLinks  */
                                                  
                                                  #externalLinks a	{
                                                  	
                                                      text-decoration: none;
                                                  	display: block;
                                                  	text-align: center;
                                                  	padding: 5px ;
                                                  	
                                                  }
                                                  	
                                                  #externalLinks ul {
                                                  	list-style-type: none;
                                                  	margin: 5px;
                                                      padding: 0;
                                                  }
                                                  
                                                  
                                                  #externalLinks li{float: left;}
                                                  
                                                  / * Footer  */
                                                  
                                                  #copry {
                                                  	overflow: auto;
                                                  	font-size: 2px;
                                                      list-style-type: none;
                                                  }	
                                                  #img1 {float: left;margin-bottom: 3px;}
                                                  #copry a {text-decoration: none;margin-bottom: 3px;}
                                                  #copry p {font-size: 10px;margin-bottom: 0;}	
                                                  
                                                  
                                          2. Hej ,

                                            Viel Dankt für deinen arbeitet ! , ich habe fast alles gemacht , wie du mir sagst …

                                            diese stück habe ich nicht verstande.…

                                            quDu verwendest eine @media-Regel, um das Grid-Layout zu ändern wenn der Bildschirm breit genug ist. Im ersten Teil (vor der @media Regel) fehlt ein Platz für linkBox te here

                                            Das verstehe ich auch nicht…

                                            Wenn du willst , kannst du siehst wie meine Website ist geworden...

                                            Wird immer besser.

                                            Aber schau dir noch mal genau das css an. Da sind Dinge drin, die nicht benötigt sind und auch noch allerhand Fehler.

                                            Ich finde gut, dass du versuchst, die Tipps umzusetzen, die wir dir hier geben.

                                            Aber dabei passieren manchmal auch Fehler.

                                            So hast du bei der ersten Grid-Platzierung Anführungszeichen vergessen.

                                            Das müsste so aussehen.

                                            grid-template-areas:
                                            "header   header   header "
                                            "nav      nav      nav      "
                                            "main     main     main     "
                                            "infoBox  infoBox  infoBox  "
                                            "footer   footer   footer   ";
                                            
                                            

                                            Vergleiche das mal mit deinem css und versuche auch ansonsten aufzuräumen. Es macht beispielsweise keinen Sinn, einem Element erst zu sagen, es soll sich wie ein Blockelement verhaltne und dann zu sagen, es soll doch ein inline-Block sein... 😉

                                            Auf jeden Fall bist du auf dem richtigen Weg!

                                            Nimm den Hinweis zum Copyright ernst, den @Rolf B dir gegeben hat.

                                            Im Impressum der Seite, wo du den text her hast steht ausdrücklich: „Eine Vervielfältigung oder Verwendung solcher Grafiken, Tondokumente, Videosequenzen und Texte in anderen elektronischen oder gedruckten Publikationen ist ohne ausdrückliche Zustimmung des Autors nicht gestattet.

                                            Blindtext-generatoren gibt es viele.

                                            Marc

                                            1. Hallo marctrix,

                                              der Copyright-Hinweis war von Tabellenkalk :)

                                              Rolf

                                              --
                                              sumpsi - posui - clusi
                                            2. ich habe gemacht wie du sagst , ich habe frühr die Anführungszeichen vergesen… , ich habe auch der Text verändert wie du siehst kannst

                                              body {
                                              background-color: #ebf5d7;
                                              grid-gap: 5px;
                                              grid-template-columns: 1fr 2fr 1fr;
                                              grid-template-areas:
                                              	
                                              "header   header   header"   
                                              "nav      nav      nav"      
                                              "main     main     main"     
                                              "infoBox  infoBox  infoBox"  
                                              "footer   footer   footer" ;  
                                              }
                                              @media screen and (min-width: 40em) {
                                                body {
                                                  display: grid;
                                                  grid-template-columns: 1fr 2fr 1f;
                                                    grid-template-areas:
                                                "header  header  header" 
                                                "nav     nav     nav"     
                                                "linkBox main    infoBox"
                                                "footer  footer  footer";
                                                }
                                              }
                                              

                                              eine sache habe nicht gut verstande... ,warum beim Erste grid-template-areas: nicht linkBox geschrieben wurde ? , warum wird nicht gleich geschrieben wie bei @media screen and (min-width: 40em) ?

                                              1. Hej ,

                                                ich habe gemacht wie du sagst , ich habe frühr die Anführungszeichen vergesen… , ich habe auch der Text verändert wie du siehst kannst

                                                eine sache habe nicht gut verstande... ,warum beim Erste grid-template-areas: nicht linkBox geschrieben wurde ? , warum wird nicht gleich geschrieben wie bei @media screen and (min-width: 40em) ?

                                                Das ist ein Fehler, den du noch beheben musst 😉

                                                Marc

                                              2. Hallo ,

                                                warum wird nicht gleich geschrieben wie bei @media screen and (min-width: 40em) ?

                                                Ich möchte jetzt nicht erklären, was Du schon weißt, darum frage ich erst einmal:

                                                Hast Du verstanden, warum man eine @media Abfrage macht?

                                                Rolf

                                                --
                                                sumpsi - posui - clusi
                                                1. Entschuldigung warum habe nicht frühr geantwortet , aber ich war bei Arbeit (ich arbeit Logistic , Reinigung,...)... .Wie habe verstande @media wird benutze für Tablets und Smartphone auch wenn habe nicht gut verstande ,media screen and (min-width: 40em) bedeutet etwas wie , wenn screen gleich oder kleins als 40em ist , zeigt....

                                                   "header  header  header" 
                                                   "nav     nav     nav"     
                                                   "linkBox main    infoBox"
                                                   "footer  footer  footer";
                                                  
                                                  1. Hej ,

                                                    media screen and (min-width: 40em) bedeutet etwas wie , wenn screen gleich oder kleins als 40em ist , zeigt.…

                                                    Wenn er größer als 40em ist - d.h. die Anzeigefläche im Browser (Viewport) muss breiter sein als 40 mal der Buchstabe „m“.

                                                    Marc

                                                    1. Danke für deine antwort... ich dachte min.width: bedeutet kleins aber bedeutet minimun...ich habe Ein Bissen mit dem Browser gespielt und wird gezeigt wie der Codec...

                                                  2. Hallo liebewinter,

                                                    benutze für Tablets und Smartphone

                                                    Ok. Es wird benutzt, um für unterschiedliche Geräte unterschiedliche Einstellungen zu machen. Du schreibst

                                                    @media BEDINGUNG {
                                                       CSS REGELN
                                                    }
                                                    

                                                    Der Browser überprüft die Bedingung, und wenn sie wahr ist, dann gelten die CSS Regeln, die im @media Block stehen, ZUSÄTZLICH.

                                                    Eine Bedingung kann prüfen, welcher Geräte-Typ es ist. Es gibt screen, print, speech und all. Speech ist für Sprachausgabe am Computer.

                                                    Eine Bedingung kann auch prüfen, ob das Gerät eine bestimmte Eigenschaft hat. min-width: 40em bedeutet: Ist das Gerät mindestens 40em breit? Oder ob das Smartphone aufrecht (portrait) oder quer (landscape) gehalten wird. In unserem Wiki und bei Mozilla steht mehr dazu.

                                                    Und man kann Bedingungen kombinieren. screen and (min-width:40em) ist wahr, wenn die Ausgabe auf den Bildschirm geht und das Anzeigefenster 40em breit ist.

                                                    Wichtig ist, dass Du nicht Pixel prüfst (min-width:600px), das gibt Probleme. Die Erklärung ist mir jetzt zu viel Arbeit 😉.

                                                    Deswegen steht im @media Block etwas anderes als vor dem Block. Man möchte ja, dass sich etwas ändert, wenn die @media Bedingung wahr ist. Man soll dabei der Idee "mobil zuerst" folgen, das heißt: man baut die Seite so, dass sie auf mobilen Geräten gut aussieht und ändert dann mit @media Abfragen das CSS so ab, dass sie auch auf großen Bildschirmen gut aussieht.

                                                    Du brauchst kein Smartphone um eine min-width Abfrage zu testen. Mache einfach das Fenster vom Browser schmaler. Irgendwann schaltet er um.

                                                    Rolf

                                                    --
                                                    sumpsi - posui - clusi
                                                    1. @@Rolf B

                                                      Speech ist für Sprachausgabe am Computer.

                                                      Gibt es user agents, die auf @media speech reagieren?

                                                      Wichtig ist, dass Du nicht Pixel prüfst (min-width:600px), das gibt Probleme. Die Erklärung ist mir jetzt zu viel Arbeit 😉.

                                                      Welche du dir sparen kannst; das haben andere schon erklärt.

                                                      Du brauchst kein Smartphone um eine min-width Abfrage zu testen. Mache einfach das Fenster vom Browser schmaler.

                                                      Oder nutze die Entwicklerwerkzeuge. Beispiel Firefox:

                                                      LLAP 🖖

                                                      --
                                                      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                                                2. Entschuldigung warum habe nicht frühr geantwortet , aber ich war bei Arbeit (ich arbeit Logistic , Reinigung,...)... .Wie habe verstande @media wird benutze für Tablets und Smartphone auch wenn habe nicht gut verstande ,media screen and (min-width: 40em) bedeutet etwas wie , wenn screen gleich oder kleins als 40em ist , zeigt....

                                                  "header  header  header" 
                                                   "nav     nav     nav"     
                                                   "linkBox main    infoBox"
                                                   "footer  footer  footer";
                                                  
                            4. eine frage.... für body in html , ist besser benutze :

                              <header>header</header>
                              <nav>nav</nav>
                              <aside id="externalLinks">Externl Links</aside>
                              <main>main</main>
                              <aside id="furtherInformation">Further Information</aside>
                              <footer>Dieser Pen ist eine Illustration von <a href="https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724420#m1724420">Erklärungen im SELFHTML-Forum</a></footer>
                              

                              oder mit div

                              <div class="wrapper">
                                <div class="box a">header</div>
                                <div class="box b">nav</div>
                                <div class="box c">aside</div>
                                <div class="box d">main</div>
                                <div class="box e">aside</div>
                                <div class="box F">footer</div>	
                              
                              </div>
                              
                              1. Hej ,

                                eine frage.... für body in html , ist besser benutze :

                                <header>header</header>
                                <nav>nav</nav>
                                <aside id="externalLinks">Externl Links</aside>
                                <main>main</main>
                                <aside id="furtherInformation">Further Information</aside>
                                <footer>Dieser Pen ist eine Illustration von <a href="https://forum.selfhtml.org/self/2018/jun/10/eine-frage-an-die-profis-punkt-punkt-punkt/1724420#m1724420">Erklärungen im SELFHTML-Forum</a></footer>
                                

                                Besser!

                                oder mit div

                                <div class="wrapper">
                                  <div class="box a">header</div>
                                  <div class="box b">nav</div>
                                  <div class="box c">aside</div>
                                  <div class="box d">main</div>
                                  <div class="box e">aside</div>
                                  <div class="box F">footer</div>	
                                
                                </div>
                                

                                Schlecht!

                                Marc

                                1. und wie kann bei <nav>nav</nav> meine nav und ul bauen ? , sorry aber mit dieser Methode habe nie gearbeitet.…

                                  1. Hallo,

                                    und wie kann bei <nav>nav</nav> meine nav und ul bauen ? , sorry aber mit dieser Methode habe nie gearbeitet.…

                                    die erste Antwort, die du bekamst, enthält einen Link in dem diese Frage beantwortet wird.

                                    Gruß
                                    Kalk

                                    1. Hej Tabellenkalk,

                                      und wie kann bei <nav>nav</nav> meine nav und ul bauen ? , sorry aber mit dieser Methode habe nie gearbeitet.…

                                      die erste Antwort, die du bekamst, enthält einen Link in dem diese Frage beantwortet wird.

                                      Außerdem: du hast von mir doch ein funktionierendes Beispiel. Probiere doch damit mal ein bisschen was aus. Pack in das <nav></nav> doch mal einefach eine ul und guck was passiert.

                                      Marc

                                      1. Hallo Marc,

                                        Hej Tabellenkalk,
                                        […]
                                        Außerdem: du […]

                                        warum erzählst du mir das?

                                        Hallo liebewinter,

                                        ich glaube, Marc versucht mit dir zu reden…

                                        Gruß
                                        Kalk

                                        1. Hej Tabellenkalk,

                                          Hallo Marc,

                                          Hej Tabellenkalk, […] Außerdem: du […]

                                          warum erzählst du mir das?

                                          Hallo liebewinter,

                                          ich glaube, Marc versucht mit dir zu reden…

                                          Ja 😂

                                          Marc

                                      2. danke , ich schon gemacht.....

                            5. Wenn versuche mit div wie du deine Codepen-Beispiel hast , bekomme diese Screenshot.…

                              wenn versuche mit .wrapper einiger Parameter geben , verändert ganze Browser .......

    2. @@marctrix

      1.) Du gibst der mittleren Spalte mehr Platz, zum Beispiel 2fr oder sogar 3fr. Damit wird die mittlere Spalte doppelt oder gar drei mal so breit, wie die Spalten links und rechts.

      Das sieht so aus:

      body {
        display: grid;
      	grid-template-columns: 1fr 2fr 1fr; /* Mitte bekommt 2mal so viel Platz wie die Ränder */
      }
      

      So sollte man das tun.

      2.) Du legst mehr als drei Raster-Spalten an und kannst dann dem mittleren Bereich sagen, er soll sich über mehrere Raster-Spalten strecken. Da das ein klein wenig komplizierter ist, werde ich es hier vormachen:

      body {
        display: grid;
      	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      }
      

      Nun haben wir acht Spalten […] Auf diesen Spalten kannst du nun Deine Elemente anordnen.

      		grid-template-areas:
      "header  header  header  header  header  header  header   header"
      "nav     nav     main    main    main    main    infoBox  infoBox"
      "footer  footer  footer  footer  footer  footer  footer   footer";
      

      So nicht. Dann kann man ja gleich bei einem Gridsystem wie dem von Bootstrap bleiben. 🤢

      Zum einen ist

      grid-template-areas:
      	"header header header" 
      	"nav    main   infoBox" 
      	"footer footer footer";
      

      besser zu lesen.

      Noch wichtiger ist, dass es weitaus besser handhabbar und wartbar ist.

      Wenn nun der Hauptinhalt nicht doppelt, sondern dreimal so breit sein soll wie die beiden Randspalten? Das ist schnell geändert: grid-template-columns: 1fr 3fr 1fr. Bei deinem 8er-Grid wäre das gar nicht möglich.

      Wenn man in altem Spaltendenken verharrt, beraubt man sich selbt der Möglichkeiten, die CSS Grid bietet.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. Hej Gunnar,

        @@marctrix

          display: grid;
        	grid-template-columns: 1fr 2fr 1fr; /* Mitte bekommt 2mal so viel Platz wie die Ränder */
        

        So sollte man das tun.

        Das stimmt. Ich würde aber das andere gerne auch noch erklären. 😉

        So nicht. Dann kann man ja gleich bei einem Gridsystem wie dem von Bootstrap bleiben. 🤢

        Ein Gridsystem muss nicht unsinnig sein. Die acht Spalten hier sind lediglich dem Schachbrett geschuldet.

        Hier geht es um Erklärung, nicht um die Umsetzung eines bekannten Layouts. Wie viele Spalten für lesende nötig sind, wissen wir gar nicht.

        Zum einen ist

        grid-template-areas:
        	"header header header" 
        	"nav    main   infoBox" 
        	"footer footer footer";
        

        besser zu lesen.

        Noch wichtiger ist, dass es weitaus besser handhabbar und wartbar ist.

        Wenn nun der Hauptinhalt nicht doppelt, sondern dreimal so breit sein soll wie die beiden Randspalten? Das ist schnell geändert: grid-template-columns: 1fr 3fr 1fr. Bei deinem 8er-Grid wäre das gar nicht möglich.

        Dafür sind andere Dinge möglich. Wie viele Spalten nötig sind, weiß man nur, wenn man das konkrete Projekt kennt.

        Wenn man in altem Spaltendenken verharrt, beraubt man sich selbt der Möglichkeiten, die CSS Grid bietet.

        Es lohnt sich sicher, dass in weiteren Blogeinträgen zu besprechen. Rom ist auch nicht an einem Tag erbaut worden.

        Marc

        1. @@marctrix

          Hier geht es um Erklärung, nicht um die Umsetzung eines bekannten Layouts.

          Eines. Nicht aller möglichen.

          Es lohnt sich sicher, dass in weiteren Blogeinträgen zu besprechen.

          Ein Blogbeitrag sollte in sich abgeschlossen sein, nicht durch andere ergänzt/korrigiert werden müssen. Also ein konkretes Thema behandeln, hier ein konkretes Layout – ein dreispaltiges.

          Ein dreispaltiges Layout mit einem achtspaltigen Grid zu implementieren halte ich nicht für sinnvoll. Also auch nicht für erwähnenswert. Es sei denn mit deutlichem Hinweis „So nicht!“

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. Hej Gunnar,

            Hier geht es um Erklärung, nicht um die Umsetzung eines bekannten Layouts.

            Eines. Nicht aller möglichen.

            Nein, nicht um eins. Genau genommen um gar keins. Es geht nur darum, grid-areas zu erklären.

            Es lohnt sich sicher, dass in weiteren Blogeinträgen zu besprechen.

            Ein Blogbeitrag sollte in sich abgeschlossen sein, nicht durch andere ergänzt/korrigiert werden müssen. Also ein konkretes Thema behandeln, hier ein konkretes Layout – ein dreispaltiges.

            Du hast einfach das Thema nicht verstanden, Das lautet nämlich nicht dreispaltiges Layout, sondern grid-areas. 😉

            Das halte ich für abschließend erklärt und keiner Korrektur bedürftig.

            Weitere Artikel würden andere Aspekte und Möglichkeiten von CSS Grid vorstellen, zum Beispiel wie man Elemente mit Angabe der Linien platziert — auch wie sich Elemente dann eine Area teilen könne und wie man dann stapelt.

            Was auch immer. Jedenfalls wird es wieder ein kleiner Happen sein und nur einen Aspekt behandeln, damit es leicht verständlich bleibt und schnell gelesen wird. Niemand hat Lust auf lange Texte!

            Ein dreispaltiges Layout mit einem achtspaltigen Grid zu implementieren halte ich nicht für sinnvoll. Also auch nicht für erwähnenswert. Es sei denn mit deutlichem Hinweis „So nicht!“

            Vieles an dem Artikel ist so wie es ist aus didaktischen Gründen nicht anders gemacht.

            Ich hatte überlegt so einen Satz wie den folgenden einzubauen:

            Für ein einfaches dreispaltiges Layout reicht das auch aus und da man seinen Code so einfach wie möglich halten sollte, solltest du es auch bei diesem Code belassen, wenn du damit hinkommst.

            Ich fürchte aber, dass dann viele den Rest nicht mehr lesen, der einem weitere Möglichkeiten eröffnet. Nämlich auf einer zweiten Zeile vier Spalten zu erzeugen. Das geht mit deinem dreispaltigen Grid nicht.

            Ich habe das aber nicht vorgemacht, denn das Prinzip wird in diesem Artikel bereits klar und weitere Beispiele würden nur verwirren. der Artikel sollte so einfach wie möglich sein. Ich hoffe, danach weiß man, wie man grid-areas anlegt und wird schon aus Faulheit nicht mehr Spalten erzeugen, als nötig.

            Ich habe seht großes Vertrauen in die Bequemlichkeit der Menschen!

            Marc