Problem mit css-grid

[Pit]

Hallo,

warum sieht das so zerissen aus? Ich hätte eigentlich ein bündiges, geordnetes Grid erwartet?!

Zusatzfrage: Kann man in jsfiddle die "Frames" nicht mehr individuell groß auseinanderziehen?

Pit

[Gunnar Bittersmann]

@@Pit

warum sieht das so zerissen aus? Ich hätte eigentlich ein bündiges, geordnetes Grid erwartet?!

Weil du dem Grid mit margin für .container_m dazwischenfunkst?

Was sollen die ganzen überflüssigen Angaben width, height da überhaupt?

Zusatzfrage: Kann man in jsfiddle die "Frames" nicht mehr individuell groß auseinanderziehen?

Ich halte JSFiddle für CSS-Probleme sowieso nicht geeignet. Warum verwendest du nicht CodePen?

LLAP 🖖

[Pit]

Hi Gunnar,

Was sollen die ganzen überflüssigen Angaben width, height da überhaupt?

...weil sonst die Hintergründe nur über den Text gingen.

Ich halte JSFiddle für CSS-Probleme sowieso nicht geeignet. Warum verwendest du nicht CodePen?

2 Gründe: Ich möchte meine Fragen und Beispiele zentral in einem Fiddle behalten und ich mag Codepen so ganz und gar nicht.

Ich habe das grid übrigens jetzt ganz anders aufgebaut und jetzt gehts.

Aber eine Frage noch: Wie formatiere ich denn nun Inhalte im Grid, ohne dass es wieder so zerreißt?

Pit

[Regina Schaukrug]

So gehts:

nav
{

	background: #F2F2F2;
  vertical-align: middle;
	height: 85px;
	padding: 15px;
}

.container {
  display: grid;
  grid-template-columns: 32% 32% 32%;
  grid-gap: 5px;
  justify-items: start;
}

.container_l {
   grid-row: 1;
   grid-column: 1 / 3;
   background:#D2FFD2;
	 width:100%;
   height:100%;
}

.container_m {
   grid-row: 1;
   grid-column: 2 / 3; 
   background:#D2E9FF;
   width:100%;
   height:100%;
}

.container_r {
   grid-row: 1;
   grid-column: 3 / 3;
   background:#FFFFAE;
   width:100%;
	 height:100%;

}

.container footer {
   grid-row: 2;
   grid-column: 1 / 1;
   background:#FFFF00;
   width:100%
}

Zu dem, was Gunnar schon "sagte": Wenn Du in grid-row falsche Angaben machst, dann darfst Du Dich nicht wundern.

[Gunnar Bittersmann]

@@Regina Schaukrug

nav
{
	height: 85px;
}

Sowas ist wohl nie eine gute Idee. Es sollte min-height heißen.

.container {
  display: grid;
  grid-template-columns: 32% 32% 32%;
}

32%?? Wieso sollte man da irgendeine Prozentzahl ausrechnen? Das kann der Browser viel besser.

grid-template-columns: 1fr 1fr 1fr oder grid-template-columns: repeat(3, 1fr).

Wenn Du in grid-row falsche Angaben machst, dann darfst Du Dich nicht wundern.

??

LLAP 🖖

[Regina Schaukrug]

Wenn Du in grid-row falsche Angaben machst, dann darfst Du Dich nicht wundern.

??

Ok. Es war grid-column. Da stand für die Elemente der ersten Zeile:

• 1 2
• 2 3
• 3 4

statt

• 1 3
• 2 3
• 3 3

Ich wüsste auch nicht was ich damit soll. Der Browser macht halt irgendwas daraus.

[Pit]

So gehts:

Hallo Regina,

ist besser, aber nicht optimal. Sieht man, wenn man das result im Bottom darstellt.

Pit

[Tabellenkalk]

Hallo,

Zusatzfrage: Kann man in jsfiddle die "Frames" nicht mehr individuell groß auseinanderziehen?

Doch, kann man noch.

Gruß
Kalk

[einsiedler]

Hallo liebe Forumer, entschuldigt, das ich hier so dazwischenfunke. aber zu der Fragestellung habe ich auch eine Frage.
Ich eigne mir auch grad das "Grid-System" an, möchte dazulernen.
Beim Internet Explorer 10 / 11 / Edge muss man eine "ältere" Grid-Implementation anwenden. Das habe ich hierher: https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/
Dort steht auch das man derzeit schon ganz "einfache" Layouts mit Grid gestalten kann. Zu der Problematik habe ich auch folgendes gelesen: https://msdn.microsoft.com/de-de/library/hh673533(v=vs.85).aspx
Hierzu meine Frage: Ist es derzeit angebracht Flexbox und Grid gleichzeitig zu verwenden?
Mir schwebt ein ganz einfaches System vor, ein Card-layout, etwa so:

Wenn das überhaupt so geht und funktioniert.

Dabei möchte ich article ein display: grid; mitgeben wobei die sections die einzelnen cards sind. Bei mir wäre das so der Fall oder soll ich ganz auf Flexbox setzen?

Grüße der einsiedelnde

[Gunnar Bittersmann]

@@einsiedler

Dabei möchte ich article ein display: grid; mitgeben wobei die sections die einzelnen cards sind.

Was du article nennst sollte wohl kein article-Element sein, sondern das main-Element.

Die Navigation gehört durchaus mit in den header; das was du header nennst ist ein div oder p.

Grundstruktur:

<body>
	<header>
		<a href="#main">Zum Hauptinhalt</a>
		<p>Meine Website</p>
		<nav> … </nav>
	</header>

	<main id="main" tabindex="-1">
		<section> … </section>
		⋮
	</main>

	<footer> … </footer>
</body>

Bei mir wäre das so der Fall oder soll ich ganz auf Flexbox setzen?

Nein. Für main (article) ist Grid das Richtige.

Es ginge sicher auch alle mit einem Grid, aber man das durchaus trennen: Einteilung des Viewports (header/main/footer) mit Flexbox (oder Grid, da es aber nur in eine Richtung geht, ist Flexbox angebracht); Einteilung des Haupbereichs mit Grid.

body
{
	margin: 0;
	padding: 0;
	height: 100vh;
	display: flex;
	flex-flow: column nowrap;
}

main
{
	flex: 1;
	display: grid;
}

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

body
{
	height: 100vh;
}

Bei fixen Header und Footer und außerdem main { overflow: auto }.

Bei mitscrollenden Header und Footer stattdessen body { min-height: 100vh }.

Sieht dann so aus.

LLAP 🖖

[einsiedler]

Vielen Dank! Prima!
So weit, so hübsch! ;o))
So siehts aus: Grid-Demo-Seite
Im Opera 49.0 // Chrome 63.0.3239.84 // Firefox 57.0.4 sieht`s PRIMA aus,
so wie es soll!
Nur der IE (Edge) ist wieder Bescheiden.... *grummel×
Habe gelesen:
*There is no auto-placement behaviour in IE10 implementation. This means that you need to position everything rather than use the autoplacement ability of grid.

If you don’t position items they will stack up in the first cell of the grid.×
Gut, habe ich verstanden…
Den "cards" habe ich folgendes hinzugefügt:

`#card4 {grid-row-end: span 2; -ms-grid-column: 1; -ms-grid-row: 2;}

#card5 {grid-column-end: span 2; -ms-grid-column: 2; -ms-grid-row: 2;}`

Jede "card" muss also einzeln positioniert werden.
Doch wie mache ich das jetzt nun mit den card`s 1 - 3 & 6 - 11 ???
Ich glaube, auch wenn es umständlicher ist, das ich jede einzelne "card" einzeln
/ individuell behandeln möchte, ist für später besser wenn Bilder und Texte
in diese "Cards" kommen. Auch wenn alles dadurch "länger" wird!
Dann ist mir aufgefallen das "grid-column-gap, grid-row-gap and grid-gap" im IE
noch nicht funktioniert.
Habe ich es richtig verstanden das man dann das grid-template-columns:
um ein Paar Felder erweitern muss, also auf insgesamt 6 in der Breite?
Etwa so: grid-template-columns: 1rem 1fr 1rem 1fr 1rem 1fr 1rem;
Und dann die Cards "positioniert" zwischen diesen "1rem Lücken"?

Lieben Gruß der einsiedelnde

[Gunnar Bittersmann]

@@einsiedler

There is no auto-placement behaviour in IE10 implementation. This means that you need to position everything rather than use the autoplacement ability of grid.

Anstatt sich da einen abzukrebsen ist es vielleicht besser, auf die -ms--Präfize zu verzichten und einen Fallback mit Floats zu basteln. grid-gap simulieren mit border, dazu padding von main entsprechend verringern.

Dummerweise lässt sich der Fallback nicht in einem @supports not (display: grid)-Block angeben, da genau die Browser, die das benötigen, @supports nicht unterstützen. Also erstmal setzen und im @supports (display: grid)-Block wieder überschreiben.

Ich hab das in meinem Pen mal nachgerüstet.

LLAP 🖖

[einsiedler]

DANKE Dir! :o)
Aber 2 Punkte:
A) Im IE klebt der footer knapp unter dem header.
Ich habe versucht durch das einfügen von "display: -ms-flexbox;"
und: footer { -ms-flex-order: 3; }
dies zu beheben, aber vergeblich. Ich denke mal da muss irgendwo ein "altmodisches clear"
hin. Da kenne ich mich aber nicht mehr mit aus.
B) Ich denke mal: section::after { content: attr(id); }
das sind die übrigen "cards" 1 - 3 & 6 - 11
was aber nun wenn ich die cards individueller gestalten möchte:
Die erste "card" in der "höhe" sehr schmal und horizontal über alle 3 cards hinweg
bis zum ende.
(Dort kommt eine Sub-Überschrift hin!)
Alle weiteren cards je nach Inhalt eine unterschiedliche Höhe!
Oder aber kann man:
section::after { content: attr(id); }
durch:

#card1 { grid-row-end: span 2;

		/* fallback */
		min-height: 2rem;
	}  

#card2 { grid-row-end: span 2;

		/* fallback */
		min-height: 20rem;
	}  

#card3 { grid-row-end: span 2;

		/* fallback */
		min-height: 20rem;
	}  

(...)

#card11 { grid-row-end: span 2;

		/* fallback */
		min-height: 20rem;
	}  

ersetzen???

Gute N8 der einsiedelnde

[marctrix]

Hej einsiedler,

dies zu beheben, aber vergeblich. Ich denke mal da muss irgendwo ein "altmodisches clear"
hin. Da kenne ich mich aber nicht mehr mit aus.

Wer floatet, muss auch clearen 😉

Clear verwendest du immer daort, wenn ein Element unter dem bisher gefloateten stehen soll. Dabeiu kannst du clear: left | right | both; verwenden, je nachdem ob ein Element nur unter Elementen mit float: left oder float: right oder allen stehen soll.

Marc

[Gunnar Bittersmann]

@@einsiedler

A) Im IE klebt der footer knapp unter dem header.

Hm, der kommt mit min-height: 100vw bei Flexbox nicht klar. height statt min-height würde gehen – solange der Inhalt nicht höher ist als ohne zu scrollen in den Viewport passt. Da man das nicht wissen kann, fällt das also Lösung aus.

Dann eben für IE keine Flexbox; das Zeug also in einen @supports-Block gepackt und so vor IE versteckt. Im Pen ergänzt.

Warum der mit den Floats da jetzt noch rumzickt um Card3 nach unten rutscht, weiß ich auf die Schnelle auch nicht. Liegt am padding für main. Könnte man auch mit in den @supports-Block packen …

LLAP 🖖

[einsiedler]

Nunja, nun ist es nicht besser geworden:

Ich glaube in dieser Richtung bringt es nichts.
Ein besseres, aber leider schreibintensives Ergebnis, ist das was ich vorhin eingeschlagen hatte. Die "altmodische" IE - Implementation "mitzuschreiben", jedes Element "einzeln" zu positionieren.
Ist zwar "schreibaufwändig" aber anscheinend geht es nicht anders.
Oder??? Any ideas??? (Von den anderen?)
Irgendwie habe ich keine Lust weiter auf Fehlersuche wegen diesem veralteteten Float zu gehen.

Nebenbei bemerkt habe ich hier: https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/
etwas interessantes gefunden, wobei die Flexbox- und Grid-Funktion gegenübergestellt werden.
Dort funktioniert auch beides im IE! *seufZ×

Lieben Gruß der einsiedelnde

[Gunnar Bittersmann]

@@einsiedler

Nunja, nun ist es nicht besser geworden:

Ich hatte das im Pen stillschweigend ergänzt: footer { clear: both }.

LLAP 🖖

[einsiedler]

Aaaahhhhhhhh ja,
PRIMA, es funktioniert so!
Nur ist (nur im IE!!!) der unterste Abstand von main zum footer
nur halb so breit wie die übrigen Zwischenräume der Cards.
Das muss ich so hinnehmen oder?
Ist das so weil nicht so viel Platz in der HÖHE ist? Eigentlich müsste durch das margin doch rundum von der Card der
gleiche Abstand sein. Naja, villeicht nebensächlich…

Gruß der einsiedelnde

[einsiedler]

Nunja, nun ist es nicht besser geworden:

Ich glaube in dieser Richtung bringt es nichts.
Ein besseres, aber leider schreibintensives Ergebnis, ist das was ich vorhin eingeschlagen hatte. Die "altmodische" IE - Implementation "mitzuschreiben", jedes Element "einzeln" zu positionieren.
Ist zwar "schreibaufwändig" aber anscheinend geht es nicht anders.
Oder??? Any ideas??? (Von den anderen?)
Irgendwie habe ich keine Lust weiter auf Fehlersuche wegen diesem veralteteten Float zu gehen.

Nebenbei bemerkt habe ich hier: https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/
etwas interessantes gefunden, wobei die Flexbox- und Grid-Funktion gegenübergestellt werden.
Dort funktioniert auch beides im IE! *seufZ×

ANMERKUNG AKTUELL 14:28

Nun habe ich dem footer ein clear: left; mitgegeben und es scheint das es auch im IE
funktioniert.
Nur ist nun der Abstand von main zum footer nur halb so breit wie die übrigen Zwischenabständen zwischen den cards. Muss das so sein und muß ich das so hinnehmen?

Ich frage mich noch ob ich nicht doch die "altmodische harte Tour" fahre und es mit dem float lieber lasse!
hmmmmmmmmmmmmm seufZ

Lieben Gruß der einsiedelnde

[Gunnar Bittersmann]

@@einsiedler

Nun habe ich dem footer ein clear: left; mitgegeben und es scheint das es auch im IE
funktioniert.
Nur ist nun der Abstand von main zum footer nur halb so breit wie die übrigen Zwischenabständen zwischen den cards. Muss das so sein und muß ich das so hinnehmen?

Vielleicht musst du das nicht. Du kannst es aber.

Ehrlich mal: Wen interessiert’s, wenn das in einem Uralt-Browser nicht perfekt aussieht?

„Anstatt seine Zeit mit dem Versuch zu verbringen, Webseiten in den verschiedensten Browsern gleich aussehen zu lassen, kann man seine Zeit darin investieren sicherzustellen, dass die Kernfunktion dessen, was man baut, überall funktioniert, und gleichzeitig in fähigeren Browsern die bestmögliche Nutzungserfahrung zu bieten.“ —Jeremy Keith

☞ mehr davon

LLAP 🖖

[einsiedler]

Ja, ist wohl vernünftig!
Schlimm genug das man sich überhaupt noch um diese Dinosaurier "kümmern" muss...
Obwohl der Internet Explorer ja mit der Implementation von grid ja der Vorreiter war!
Hoffentlich wird der Edge in dieser Hinsicht recht bald verbessert!

der einsiedler

[Felix Riesterer]

Lieber Gunnar,

Was du article nennst sollte wohl kein article-Element sein, sondern das main-Element.

+1

Die Navigation gehört durchaus mit in den header;

Das sehe ich völlig anders. Warum soll die Navigation nicht alleine für sich stehen? Warum sollte eine Dokumentstruktur wie die folgende weniger gut/sinnvoll/richtig/whatever sein?

<html>
  <head>...</head>
  <body>
    <main/>
    <nav>
    <header>
    <footer>
  </body>
</html>

das was du header nennst ist ein div oder p.

Warum? <header> kann doch ein Block-Element wie ein <div> sein. Wozu verschachteln? Vor allem dann, wenn <nav> ein eigenes Kind von <body> ist?

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer

Die Navigation gehört durchaus mit in den header;

Das sehe ich völlig anders. Warum soll die Navigation nicht alleine für sich stehen?

“A <header> typically contains a group of introductory or navigational aids.” [Spec]

Der header enthält die Navigation.

Warum sollte eine Dokumentstruktur wie die folgende weniger gut/sinnvoll/richtig/whatever sein?

<html>
  <head>...</head>
  <body>
    <main/>
    <nav>
    <header>
    <footer>
  </body>
</html>

Abgesehen von der Schachtelung header/nav sieht die Reihenfolge sonderbar aus.

LLAP 🖖

[marctrix]

Hej Gunnar,

Die Navigation gehört durchaus mit in den header;

Das sehe ich völlig anders. Warum soll die Navigation nicht alleine für sich stehen?

“A <header> typically contains a group of introductory or navigational aids.” [Spec]

Ich habe da mal was hervorgehoben

Der header enthält die Navigation.

Kann…

Weil etwas typischerweise so ist, muss es nicht gut, schon gar nicht optimal sein. Es kann aber in Ordnung sein. Es ist für die eigene Seite schlicht irrelevant. Man sollte schon immer selber begründen können, warum man etwas auf eine bestimmte Art und Weise umsetzt.

In vielen Agenturen wird typischerweise mit BEM, Atomic CSS o.ä. gearbeitet. Das heißt nciht, dass das gut, sinnvoll oder klug wäre^[1] - um nur ein Beispiel zu nennen. Und wie sagt @Gunnar Bittersmann immer: Weder "weil es alle so machen", noch "weil es immer schon so gemacht wurde" sind Argumente 😉

Marc

---

1. Es ist einfach billiger, auf diese Weise Massenware herzustellen… ↩︎

[Gunnar Bittersmann]

@@marctrix

Und wie sagt @Gunnar Bittersmann immer: Weder "weil es alle so machen", noch "weil es immer schon so gemacht wurde" sind Argumente 😉

Das ist richtig! Aber „weil es alle so machen“ ist schon etwas anderes als „weil es so spezifiziert ist“. (Wobei letzteres aber auch nicht zwangsläufig heißt, dass es deshalb gut wäre).

Ich hab da mal in die Runde gefragt.

LLAP 🖖

[marctrix]

Hej Gunnar,

Ich hab da mal in die Runde gefragt.

Deckt sich mit meinen Erfahrungen. - Danke für die Aufklärung!!!

Marc

[Matthias Apsel]

Hallo marctrix,

… Das heißt nciht, dass das gut, sinnvoll oder klug wäre^[1] - um nur ein …

^[1:1]: Es ist einfach billiger, auf diese Weise Massenware herzustellen…

Ich hab mal deine Fußnote gebaut 😉

---

… Das heißt nciht, dass das gut, sinnvoll oder klug wäre^[1:2] - um nur ein …

Bis demnächst
Matthias

---

1. Es ist einfach billiger, auf diese Weise Massenware herzustellen… ↩︎ ↩︎ ↩︎

[marctrix]

Hej Matthias,

Ich hab mal deine Fußnote gebaut 😉

So simpel die Syntax ist: ich vergesse sie trotzdem immer wieder... 😕

Marc

[marctrix]

Hej Gunnar,

Die Navigation gehört durchaus mit in den header

Ich lese und sehe das immer häufiger, es gibt aber durchaus Entwickler, die ich schätze, welche die Hauptnavigation als so bedeutend ansehen, dass sie neben header, main und footer einen eigenen Bereich beansprucht.

Obwohl ich da relativ leidenschaftslos bin, würde mich mal die Begründung interessieren.

Marc

[marctrix]

Hej einsiedler,

entschuldigt, das ich hier so dazwischenfunke. aber zu der Fragestellung habe ich auch eine Frage.

Dafür wäre ein eigener Thread aber angebrachter gewesen 😉

Beim Internet Explorer 10 / 11 / Edge muss man eine "ältere" Grid-Implementation anwenden.

Ja, das kann aber nur einen Bruchteil dessen, was die aktuelle Spezifikation ermöglicht. Ich nutze das ungern, weil man jedes Element händisch einzeln platzieren muss.

Für Dein Layout benötigst du aber genau das, weshalb das kein Problem sein sollte.

Mir schwebt ein ganz einfaches System vor, ein Card-layout, etwa so:

Wenn das überhaupt so geht und funktioniert.

Weil wir hier von links nach rechts lesen, würde ich die Karten 4 und 5 vertauschen…

Marc

[MrMurphy1]

Hallo Pit

Das Grundproblem ist dass du mittels CSS zu viel bestimmen willst.

Grade die neuen Möglichkeiten von Flexbox und CSS Grid sollen aber dem Browser viele Berechnungen übertragen.

Dazu gehört auf Angaben wie width, height und beim Grid auch auf margin zu verzichten. Das margin wird durch das grid-gap ersetzt. Innenabstände werden weiterhin durch padding erzeugt.

Zunächst solltest du auch bei Testseiten immer ein vernünftiges HTML-Grundgerüst verwenden.

Dazu gehört, Texte nur in dafür vorgesehende Elemente zu schreiben wie p, h1 bis h6, li, dt, dd, figcaption und so weiter.

Nicht jedoch in Container wie div, nav, header, footer, main, article, section, aside und so weiter.

Also in deinem Fall

   <nav>
      <div class="gridcontainer">
         <div class="gridcontainer_l">
            <p>links</p>
         </div>
         <div class="gridcontainer_m">
            <p>mitte</p>
         </div>
         <div class="gridcontainer_r">
            <p>rechts</p>
         </div>
         <footer>
            <p>Bla bla</p>
         </footer>
      </div>
   </nav>

Bei deinen Klassenbezeichnungen kannst du bleiben, ich finde in diesem Fall gridcontainer einfach zutreffender.

Dann solltest du zunächst das Grid bestimmen und anschließend nur die Container einsortieren, bei denen es auch erforderlich ist:

   /*.gridcontainer für CSS Grid*/
   @media all {
      .gridcontainer {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-gap: 0.5rem;
      }
      .gridcontainer footer {
         grid-column: 1 / 4;
      }
   }

Das ist für dein Grid auch schon alles. Kein width, kein height, kein margin, keine unnötigen Zuweisungen, keine Berechnungen. Einfacher und übersichtlicher, genau das, was mit CSS Grid erreicht werden soll.

Anschließend werden die restlichen CSS-Angaben hinzugefügt. Hintergrundfarben sind natürlich bereits vorher sinnvoll um das Layout sichtbar kontrollieren zu können. Dabei werden die CSS-Angaben jeweils passend den Elementen zugewiesen, also:

   /*.gridcontainer sonstiges Layout*/
   @media all {
      nav {
         background-color: #F2F2F2;
      }
      .gridcontainer {
      }
      .gridcontainer .gridcontainer_l {
         background-color: #D2FFD2;
      }
      .gridcontainer .gridcontainer_m {
         background-color: #D2E9FF;
      }
      .gridcontainer .gridcontainer_m p {
         color: #737373;
         font-family: Verdana, Arial;
         font-size: 1.5em;
         font-weight: bold;
         text-align: justify;
         text-shadow: 4px 4px 4px #EEEEEE;
         letter-spacing: 0.5em;
      }
      .gridcontainer .gridcontainer_r {
         background-color: #FFFFAE;
      }
      .gridcontainer footer {
         background-color: #FFFF00;
      }
   }

Die CSS-Angaben können natürlich mit den vorherigen zusammengefügt werden, wenn dies möglich ist.

Das @media all-Umschließung kannst du auch weglassen. Ich verwende es um mein CSS übersichtlicher zu strukturieren.

Ich habe dazu mal eine Beispielseite erstellt:

Beispielseite

Gruss

MrMurphy

[einsiedler]

Dazu mal eine Frage:
Warum das äußere umschließende div: <div class="gridcontainer"> ?
Es wird doch immer schnell gesagt von wegen div-Suppe und so...
Warum kann man nicht die class="gridcontainer" nicht dem <nav> mitgeben.
Das wäre doch einfacher und weniger zu schreiben!!!
Oder denke ich da falsch?
(Warscheinlich habe ich nun wieder eine Grundsatzdiskussion heraufbeschwört!)

Der einsiedelnde

[MrMurphy1]

Hallo

Es ging mir darum die Anwendung von CSS Grid in Bezug auf Pits Problem zu erklären.

Du hast natürlich auf das Beispiel bezogen recht. Das div.gridcontainer kann komplett entfallen.

Andererseits sehe ich so ein CSS Grid auch nicht in einem nav-Element. Auch die inneren div-Elemente werden in der Praxis durch andere Elemente ersetzt werden - oder sollten es zumindest.

Auch der Inhalt (links, mitte, ...) wird so in der Praxis nicht vorkommen. Leider wird immer wieder zu Laborwerten wie "1, 2, 3." oder "Lorem ipsum..." gegriffen, bei denen viele Probleme überhaupt nicht auftauchen, die in der Praxis grade Anfänger in die Verzweiflung treiben können.

Das Problem ist halt, dass an Webseiten ohne zumindest einigermaßen sinnvollem Inhalt grade Anfängern grundsätzliche Probleme nicht nachvollziehbar aufgezeigt werden können. Deshalb versuche ich mich bei solchen Erklärungen möglichst an das Problem zu halten und nur einige wenige sinnvolle damit zusammenhängende Zusatzinfos zu geben.

Gruss

MrMurphy

[einsiedler]

O.K., habe ich verstanden.

Andererseits sehe ich so ein CSS Grid auch nicht in einem nav-Element.

Darum ging es mir, wie man es halt "professionell" macht!

   <nav>
      <ul class="gridcontainer">
         <li class="gridcontainer_l">
            <p>links</p>
         </li>
         <li class="gridcontainer_m">
            <p>mitte</p>
         </li>
         <li class="gridcontainer_r">
            <p>rechts</p>
         </li>
         <footer class="navi">
            <p>Bla bla</p>
         </footer>
      </ul>
   </nav>

Wäre das so "korrekter"???
(Bei der Navigation bin ich auch grad!
Hast Du ein Beispiel wie man diese Sandwich-Navigation macht wenn man das
Bildschirmfenster horizontal zusammenzieht?)

Der einsiedelnde

[MrMurphy1]

Hallo

Direkte Kindelemente von ul-Elementen dürfen nur li-Elemente sein.

Zudem sollten grade in Zeiten von responsive Design Bezeichnungen wie _r (rechts), _m (mitte), _l (links) vermieden werden.

Weiterhin kann ich mir nicht vorstellen, dass du eine Navigation mit Inhalten wie links, mitte, rechts und Bla Bla erstellen willst.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Direkte Kindelemente von ul-Elementen dürfen nur li-Elemente sein.

Das kann man so nicht sagen. Gegenbeispiel gefällig?

Falsche Kindelemente von ul-Elementen kann man auch sichtbar machen: Test-driven HTML development.

LLAP 🖖

[Gunnar Bittersmann]

@@einsiedler

Darum ging es mir, wie man es halt "professionell" macht!

War dir mein Beispiel nicht professionell genug?

   <nav>
      <ul class="gridcontainer">

Wenn man es ernst meint mit separation of concerns (und es gibt gute Gründe, das zu tun), dann hat sowas wie „grid“ im Markup nichts zu suchen. HTML ist zur (semantischen) Auszeichnung der Inhalte da, nicht zur Angabe von deren Darstellung.

Im Markup sollte überhaupt nicht ersichtlich sein, wie Inhalte dargestellt werden (bspw. ob als Grid oder nebeneinander oder untereinander).

gridcontainer wäre eine rein darstellungsbezogene Klasse, also bäh!

Ohne eine solche:

   <nav>
      <ul>

nav > ul { display: grid }

(Sollte es mehrere nav-Elemente geben, müsste man das freilich noch spezifischer angeben, bspw. über eine ID für dieses nav-Element oder einen Selektor wie body > header > nav > ul.)

Hast Du ein Beispiel wie man diese Sandwich-Navigation macht wenn man das
Bildschirmfenster horizontal zusammenzieht?

Sandwich? Meinst du sowas?

LLAP 🖖

[einsiedler]

Ô.K., lassen wir das ersteinmal, letztlich mach ich das mit diesen einzelnen
Menuepunkten noch anders.
Mal angemerkt, man könnte diese einzelnen Menüepunkte ja auch
in grid-Zellen packen, also das was innerhalb der
flexbox <nav> sich befindet? Oder?
Flexbox als das "äußerstes" Grundgerüst? Richtig?
Sorry ich bin manchmal so begriffstutzig!

Ich habe von dieser Website http://shiatsu-bewegung.ch/shiatsu.php#nav-menue
das mit den Menübotton bei engem Bildschirmfenster mal angeeignet, doch läßt sich das bei
mir leider nicht so einfach übertragen.

Siehe: meine Demoseite

Wenn man das Bildschirmfenster horizontal verengt erscheint zwar dieser Sandwich-Botton
aber irgendwie möchte diese nicht Funktionieren! Leider!
Ich habe alles 1 zu 1 übertragen!
Geb zu noch ein wenig chaotisch, werde noch aufräumen!
A) Ist soetwas auch ohne ein script möglich? Bei Dir Gunnar ist ein script aktiv!
Das möchte ich so eigentlich nicht! Also ist es dennoch ohne möglich?
B) Ist so ein Botton eigentlich auch für mobile Geräte geeignet? Wenn nicht würde ich es lieber lassen!

Gruss der einsiedelnde

[Gunnar Bittersmann]

@@einsiedler

Mal angemerkt, man könnte diese einzelnen Menüepunkte ja auch
in grid-Zellen packen, also das was innerhalb der
flexbox <nav> sich befindet? Oder?

Kommt drauf an, was du willst. Wenn die Breite aller Menüpunkte unabhängig von deren Textinhalt gleich sein soll, dann könntest du auch Grid nehmen. Da es sich aber um eine Aufreihung in eine Richtung handelt, wäre das wenig sinnvoll.

Wenn sich die Breite der Menüpunkte nach deren Textinhalt richten soll und der Abstand zwischen diesen gleich sein soll, dann willst du flexible Boxen.

Flexbox als das "äußerstes" Grundgerüst? Richtig?
Sorry ich bin manchmal so begriffstutzig!

Ja. Ja. 😉

Siehe: meine Demoseite

Wenn man das Bildschirmfenster horizontal verengt erscheint zwar dieser Sandwich-Botton
aber irgendwie möchte diese nicht Funktionieren! Leider!

Da gibt es keinen „Sandwich“-Button. Da ist ein Link, wo keiner sein sollte.

A) Ist soetwas auch ohne ein script möglich? Bei Dir Gunnar ist ein script aktiv!
Das möchte ich so eigentlich nicht! Also ist es dennoch ohne möglich?

Du willst Interaktion. Es ginge evtl. mit reinem HTML: details. Ansonsten willst du JavaScript.

B) Ist so ein Botton eigentlich auch für mobile Geräte geeignet?

Wenn nicht für diese, wofür dann?

Button. Du willst mir ein O für ein U vormachen?

LLAP 🖖

[einsiedler]

Ja, genauso wie auf deiner verlinkten Pen-Seite stelle ich es mir vor.
Wenn möglich ohne jeglichen script...

Uuuups, dann fängt dort schon der Fehler an... wenn andere das nicht sehen können.
Auf der Seite wo ich das gesehen habe (Quellseite, bitte mal öffnen!
funktioniert es, auch ohne ein Script und derjenige hat es wohl mit solchen a-tags gelöst.
(Und mit display:none; ersteinmal etwas versteckt.... später eingeblendet...
Ich finde es gut so...
Nur bei mir funktioniert es nicht!

P.S. Bitte noch nicht auf die Grid-Container gucken, wird danach bearbeitet!

Der einsiedelnde

[Gunnar Bittersmann]

@@einsiedler

funktioniert es, auch ohne ein Script und derjenige hat es wohl mit solchen a-tags gelöst.
(Und mit display:none; ersteinmal etwas versteckt.... später eingeblendet...
Ich finde es gut so...
Nur bei mir funktioniert es nicht!

Ob du es gut findest, ist irrelevant. Relevant ist, ob die Nutzer es gut finden; ob es bei ihnen funktioniert. Da bin ich mir bei Screenreader-Nutzern nicht sicher.

Etwas Interaktives mit irgendwelchen Hacks basteln zu wollen und dann „kuck mal, kein JavaScript!“ zu rufen, ist Bullshit.

Und das sage ich als einer, der bei anderen Dingen gerne mal „kuck mal, kein JavaScript!“ ruft.

LLAP 🖖

[einsiedler]

O.k. o.k. ...
Habe das von Deinem Pen mal herüberkopiert aber es funktioniert bei mir nicht. Villeicht liegt es daran wie ich das javascript eingebunden habe: Im <head> und:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
<script> </script>
Aber das ist es wohl nicht... seufZ

Und warum kommt das sowohl im Opera als auch im IE vor?

Das flexbox Element macht genau das gleiche wie im header darüber, links & rechts
der gleiche Abstand zum Rand.
Doch nur die Gridelemente gehen rechts über die flexbox hinaus?
Woran liegt das?

Der einsiedelnde

[Gunnar Bittersmann]

@@einsiedler

Habe das von Deinem Pen mal herüberkopiert aber es funktioniert bei mir nicht.

Zu früh gefreut?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

Wozu brauchst du jQuery?

Doch nur die Gridelemente gehen rechts über die flexbox hinaus?
Woran liegt das?

Am padding des main-Elements.

LLAP 🖖

[einsiedler]

Na toll, aber das ist doch der Fallback für den IE!
Heißt also verstecken und nur zugänglich für den IE machen!
Richtig?

Der einsiedelnde

[MrMurphy1]

Hallo

Es ist unsinnig Fallbacks für bestimmte Browser zu erstellen. Das ist nicht der Sinn von Fallbacks.

Zumal es viel verbreitetere Browser außer dem IE11 gibt, die CSS Grid nicht beherrschen.

Entsprechend sollte ein Fallback für alle Browser erstellt werden die CSS Grid nicht beherrschen.

Außerdem solltest du dich von der Vorstellung lösen mit Fallbacks das Originallayout möglichst genau nachbauen zu wollen. Auch das ist nicht der Sinn von Fallbacks.

Sonst machst du dir vollkommen unnötigen Streß ohne Ende.

Um zu einem Ergebnis zu kommen solltest du mit Mobile First beginnen und ein Einspalten-Layout erstellen, dass alle Browser beherrschen. Danach das zweite Fallback mit Flexbox und danach die Lösung mit CSS Grid.

Um dich nicht zu verlaufen kannst du auch für alle drei Layouts zunächst jeweils einzelne Lösungen erstellen und testen. Wenn die einzeln funktionieren kannst du sie anschließend zusammenfügen. Damit kommst du eher zum Ziel als gleich alles zusammenzuschmeißen und dann die Nadeln im Heuhaufen zu suchen.

Gruss

MrMurphy