Renato: Gestaltung mit Flexbox

0 93

Gestaltung mit Flexbox

Renato
  • css
  • flexbox
  1. 0
    MrMurphy1
  2. 0
    Gunnar Bittersmann
    • css
    • flexbox
    • grid
    1. -3
      Henry
      1. 1
        Gunnar Bittersmann
        1. -1
          Henry
          1. 0
            Gunnar Bittersmann
            1. 0
              Henry
              1. 0
                Gunnar Bittersmann
                1. 0
                  Henry
                  1. 1
                    Gunnar Bittersmann
                    • css
                    • grid
                    1. 0
                      Tabellenkalk
              2. 0
                Gunnar Bittersmann
                1. -3
                  Henry
                  1. 1

                    "klassisches Tabellenlayout"

                    Regina Schaukrug
                    1. 0
                      Henry
        2. 0
          marctrix
          1. 0
            marctrix
            1. 0
              marctrix
            2. 0
              Matthias Apsel
              • css
              1. 0
                marctrix
                1. 0
                  ottogal
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      marctrix
                      • css
                      • grid
                      1. 0
                        ottogal
                        1. 0
                          marctrix
                          1. 0
                            Gunnar Bittersmann
                        2. 1
                          Gunnar Bittersmann
            3. 0
              Gunnar Bittersmann
              • css
              • grid
              1. 0
                marctrix
      2. 0
        marctrix
        1. 0
          Henry
          1. 0
            marctrix
            1. 0
              MrMurphy1
            2. 0
              Henry
              1. 0
                marctrix
                1. 0
                  Henry
                  1. 0
                    marctrix
                    1. 0
                      Henry
                      1. 2
                        Christian Kruse
                        1. 0
                          Henry
                          1. 0
                            Christian Kruse
                            1. 0
                              Henry
                              1. 1
                                Christian Kruse
                                1. 0
                                  Henry
                                  1. 0
                                    Christian Kruse
                                    1. 1
                                      marctrix
                                      1. 0
                                        Henry
                                        1. 0
                                          marctrix
                                          1. 1
                                            Henry
                                            1. 0
                                              marctrix
                                              1. 1
                                                MudGuard
                                                1. 0
                                                  marctrix
                                                  1. 0
                                                    MudGuard
                                                    1. 0
                                                      Gunnar Bittersmann
                                                      • menschelei
                                                      1. 0
                                                        MudGuard
                                                        1. 0
                                                          Gunnar Bittersmann
                                                          1. 0
                                                            MudGuard
                                                            1. 0
                                                              Gunnar Bittersmann
                                                    2. 0
                                                      marctrix
                                2. 0
                                  marctrix
                                  • menschelei
                                  • sonstiges
                                  1. 0
                                    Christian Kruse
                                    1. 0
                                      marctrix
                                      1. 1
                                        Christian Kruse
                                        1. 0
                                          marctrix
                                    2. 0

                                      Hardware ...

                                      MudGuard
                                      1. 0
                                        Christian Kruse
                                        1. 0
                                          MudGuard
                                          1. 0
                                            Christian Kruse
                                            1. 0
                                              MudGuard
                                              1. 0
                                                Christian Kruse
                                              2. 0
                                                Gunnar Bittersmann
                                                1. 1
                                                  MudGuard
                                                  1. 0
                                                    Gunnar Bittersmann
                                                    • menschelei
                                    3. 1
                                      Matthias Apsel
                                      1. 1
                                        Christian Kruse
                                        1. 0
                                          Matthias Apsel
                                          1. 0
                                            Christian Kruse
                                            1. 0
                                              Matthias Apsel
                                              1. 0
                                                Christian Kruse
                                                1. 1
                                                  Matthias Apsel
                          2. 0
                            marctrix
                      2. 0
                        marctrix
                        1. 0
                          Henry
                          1. 0
                            marctrix
                            1. 0
                              Henry
                              1. 0
                                marctrix
              2. 0
                marctrix
          2. 0
            Gunnar Bittersmann
            1. 0
              Henry
              1. 0
                Gunnar Bittersmann
                1. 0
                  marctrix
                  1. 1
                    Gunnar Bittersmann

Hallo zusammen

Ich möchte meine neue Homepage wie folgt mit Flexboxen gestallten:

neue Homepage

Das einzige was ich hinkriege ist ein grosser grauer Rahmen. Mir sind die einzelnen Boxen zu nahe beieinander und die inneren Rahmen fehlen ganz.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" type="text/css" href="index.css">
	<link rel="shortcut icon" type="image/x-icon" href="/robbisoft_logo.ico">
	<link rel="icon" type="image/gif" href="/robbisoft_logo.gif" sizes="32x32">
    <title>robbisoft</title>
	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
	</script>
   <SCRIPT Language="JavaScript" src="program.js">
   </SCRIPT>
  </head>
  <body>
  <inhalt class="box">
		<p class="A">
			<script>
				document.writeln( menu( "Impressum" ) )
			</script>
		</p>
		<p class="B">
		  <div class"textbox">
			<p class="header">
			  <titel>Impressum</titel>
			</p>
			<p class"text">
			  <text>
				In der Informatik bin ich vielfältig interessiert. Ich beherrsche die Programmiersprachen C++, Java und weitere. Im weitern habe ich Kenntnisse in HTML, XML und Java-Script. Die Hilfedateien wurden mit dem HTML Help WorkShop von Microsoft erstellt. Die in dieser Homepage vorgestellten Programme wurden alle mit dem RAD Studio Tokyo 10.2 entwickelt.
				</br></br>
				Meine Freizeit widme ich meiner Familie. Für den Ausgleich zur Arbeit mache ich viel Sport. Ich schwimme regelmässig bei der SLRG in Bern mit. Weiter singe ich in einem klassischen Chor.
				</br></br>
				Gibt es Fragen zur Programmierung oder meinen Programmen oder suchen Sie einen vielseitigen und tüchtigen Mitarbeiter, dann melden Sie sich unter der folgenden E-Mail Adresse.
				</br>
				<a href="mailto:support@robbisoft.ch" title="Mail an den Support senden">support(at)robbisoft.ch</a>
				</br></br>
			</text>
			</p>
			<p class="footer">
			  <fus>letzte Änderung : 
				<SCRIPT>
					document.writeln(modifyString() + "<BR>");
				</SCRIPT>
				</fus>
			</p>
		  </div>
		</p>
  </inhalt>	
  </body>
</html>

und

.main {
	display: block;
	min-height: 25em;
	/* für IE */
	
	background: #c4ced3;
	border-color: #8a9da8;
}

.box{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: flex-start;
	margin: 0.25em;
	padding: 0.25em;
	border: 0.1em solid #ccc;
	border-radius: 0.5em;
}

.box div.A{
	order: 1;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: stretch;
	min-width: 0;
	min-height: auto;
}

.box div.B{
	order: 2;
	flex-grow: 3;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: auto;
	min-width: 0;
	min-height: auto;
}

.textbox{
	display: inline-flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: flex-start;
	margin: 0.25em;
	padding: 0.25em;
	border: 0.1em solid #ccc;
	border-radius: 0.5em;
}

.textbox div.header{
	order: 1;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: stretch;
	min-width: 0;
	min-height: auto;
}

.textbox div.text{
	order: 1;
	flex-grow: 3;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: stretch;
	min-width: 0;
	min-height: auto;
}

.textbox div.footer{
	order: 1;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: stretch;
	min-width: 0;
	min-height: auto;
}

titel
  {font-stretch:expanded;
  font-weight:bold;
  font-size:x-large;
  font-family:"Comic Sans MS";
  color:maroon}
  
ueberschrift
  {font-stretch:expanded;
   font-weight:bold;
   font-size:xx-large;
   color:maroon}
  
.rahmen 
  { border:0.1em solid #aaaaaa;}
  
fus
  {font-stretch:condensed;
  font-weight:normal;
  font-size:small;
  font-style:italic;}
  
text
{font-weight:normal;
  font-size:medium;
  color:black;
  font-family:Verdana, Helvetica, "Times New Roman", Arial, Geneva;
}
  

td
{border:0.1em solid;
border-color:#05aa02}

table
{border:0.1em solid;
border-collapse:collapse;
border-color:#05aa02}

.ohne
{border:0.2em solid;
border-color:#ffffff}

menuhel
{font-weight:normal;
 font-style:italic;
  font-size:medium;
  color:gray}

menudunkel
{font-weight:normal;
 font-style:normal;
  font-size:medium;
  color:black}
 
sektor 
{position: fixed;
 width: 80px; 
 height: 180px;
 top: 10px;
 left: 10px;}
 
div.scrollmenu {
    background-color: Azure;
    overflow: auto;
    white-space: nowrap;
	width: 70em;
	height:22em;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 0.5em;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: yellow;
}

Was muss ich ändern damit meine Homepage meinen Wünschen entspricht?

Gruss Renato

  1. Hallo

    Was muss ich ändern damit meine Homepage meinen Wünschen entspricht?

    Zunächst die Grundlagen von HTML und CSS lernen.

    Zur Darstellung: Um die Darstellung mit Flexbox zu erreichen benötigst du um Titel, Inhalt und Fußzeile herum einen nicht sichtbaren Hilfscontainer.

    Menü und Hilfscontainer werden dann mit Flexbox nebeneinander angeordnet.

    Gruss

    MrMurphy

  2. @@Renato

    Ich möchte meine neue Homepage wie folgt mit Flexboxen gestallten

    Das ist wenig sinnvoll. Du willst ein 2D-Raster-Layout. Flexbox ist dafür nicht das geeignete Werkzeug, sondern Grid. ☞ Complete Guide

    Das ist total einfach und – bei entsprechendem Code – selbsterklärend. ☞ Beispiel

    LLAP 🖖

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

      Das ist wenig sinnvoll. Du willst ein 2D-Raster-Layout. Flexbox ist dafür nicht das geeignete Werkzeug, sondern Grid. ☞ Complete Guide

      stimmt, aber grid auch nicht.

      Das ist total einfach und – bei entsprechendem Code – selbsterklärend. ☞ Beispiel

      Nicht wenn man es im IE11 betrachtet.

      @@Renato Bei so einem einfachen Layout, braucht es überhaupt keine Grid, Flex oder sonstwas... lediglich ein wenig CSS-Basis, siehe zb. display: inline-block, usw..... Wichtiger in der heutigen Zeit ist allerdings mobiltauglich. Stichwort Responsive

      Gruss
      Henry

      ps. wäre schön, wenn einer der Negativbewerter das auch mal begründen würde...

      1. @@Henry

        Nicht wenn man es im IE11 betrachtet.

        Doch. Alle Inhalte sind zu sehen, und das auch auch in der sinnvollen Reihenfolge. Alles bestens. Müssen Webseiten in jedem Browser exakt gleich aussehen?

        Laut Can I use hat IE 11 in Deutschland noch eine Verbreitung von 3.4%. Lohnt es für so wenige Nutzer zusätzlichen Aufwand zu betreiben? Wenn die Antwort „ja“ sein sollte, kann man einen Fallback auf Floats implementieren:

        nav { float: left }
        header, main, footer { float: right }
        

        Bei so einem einfachen Layout, braucht es überhaupt keine Grid, Flex oder sonstwas...

        Es ist unsinnig, wegen ein paar Hanseln mit alten Browsern für die vielen mit modernen Browsern nicht moderne Techniken einsetzen zu wollen.

        ps. wäre schön, wenn einer der Negativbewerter das auch mal begründen würde...

        ✔︎

        LLAP 🖖

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

          Doch. Alle Inhalte sind zu sehen, und das auch auch in der sinnvollen Reihenfolge. Alles bestens. Müssen Webseiten in jedem Browser exakt gleich aussehen?

          LOL... dein Ernst? Dann könnten wir ja sofort alle Styleoptionen und Kompatibilitäten vergessen, weil... irgendwie erscheint ja doch immer der gleiche Inhalt.…

          Du denkst doch jetzt nicht wirklich es wäre egal ob so:

          oder so:

          Laut Can I use hat IE 11 in Deutschland noch eine Verbreitung von 3.4%. Lohnt es für so wenige Nutzer zusätzlichen Aufwand zu betreiben? Wenn die Antwort „ja“ sein sollte, kann man einen Fallback auf Floats implementieren:

          Ob diese Statistik stimmt bzw. repräsentativ ist, sei mal dahin gestellt. Aber was Float betrifft, sind wohl die Schwächen allzu bekannt, falls nicht hier im Forum gibt's genug davon zu berichten und wurde auch verbessert/ersetzt eben durch Einbringung der besagten Displayeigenschaften.

          Bei so einem einfachen Layout, braucht es überhaupt keine Grid, Flex oder sonstwas...

          Es ist unsinnig, wegen ein paar Hanseln mit alten Browsern für die vielen mit modernen Browsern nicht moderne Techniken einsetzen zu wollen.

          Dann sagt der "Hansel" dir mal, dass er sich weigert schlimmere Datenkraken einzusetzen als den IE, solange es geht. Und davon abgesehen, ist der IE alles andere als antik, nur weil son paar "ich will aber immer die neusten Spielereien nutzen Hanseln ;-) " meinen es wäre nicht mehr up2date.

          Gruss
          Henry

          1. @@Henry

            Der falsche Rahmen ist wirklich unschön. Der hat aber nichts damit zu tun, dass IE kein Grid kann, sondern dass er das main-Element nicht kennt. main { display: block } ergänzt; jetzt sieht’s auch im IE 11 vernünftig aus.

            Und davon abgesehen, ist der IE alles andere als antik

            IE 11 ist von 2013, also antik.

            Microsoft hat einen modernen Browser im Angebot: Edge. Und der kann Grid.

            LLAP 🖖

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

              Der falsche Rahmen ist wirklich unschön. Der hat aber nichts damit zu tun, dass IE kein Grid kann, sondern dass er das main-Element nicht kennt. main { display: block } ergänzt; jetzt sieht’s auch im IE 11 vernünftig aus.

              dennoch immer noch alles untereinander...

              Microsoft hat einen modernen Browser im Angebot: Edge. Und der kann Grid.

              Wie gesagt, mir fällt kein Szenario ein, bei dem ich standard-gridlayout nicht klassisch hinbekomme. Und Edge? Ja, wäre schön, eigentlich ein toller Browser, wären da nicht die Bevormundungen wie zb. Neuer Tab -> Ziel nicht mehr selbst festlegbar....,etc...

              Gruss
              Henry

              1. @@Henry

                jetzt sieht’s auch im IE 11 vernünftig aus. dennoch immer noch alles untereinander...

                Ja. Und?

                Wie gesagt, mir fällt kein Szenario ein, bei dem ich standard-gridlayout nicht klassisch hinbekomme.

                1. Mit was für Aufwand?
                2. Mit was für krudem Mark-up?

                LLAP 🖖

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

                  jetzt sieht’s auch im IE 11 vernünftig aus. dennoch immer noch alles untereinander...

                  Ja. Und?

                  Also jemand möchte ein Auto mit 4 Türen und du zeigst auf einen 2 Türer und sagst, "ist doch das Gleiche"?

                  Wie gesagt, mir fällt kein Szenario ein, bei dem ich standard-gridlayout nicht klassisch hinbekomme.

                  1. Mit was für Aufwand?

                  Praktisch NULL

                  1. Mit was für krudem Mark-up?

                  simple, conform und in jedem Browser nutzbar.

                  Beispiel hier

                  btw. dein Beispiel bei codepen lässt sich nicht in Fullview anschauen, "...The owner of this Pen needs to verify their email address to enable Full Page View...".

                  Im Übrigenen bin ich der Meinung, Karthago...(ähm neee das war das andere ;-)..., " dieses scriptüberladene codepen gehört weg..." ;-)

                  Gruss
                  Henry

                  1. @@Henry

                    jetzt sieht’s auch im IE 11 vernünftig aus. dennoch immer noch alles untereinander...

                    Ja. Und?

                    Also jemand möchte ein Auto mit 4 Türen und du zeigst auf einen 2 Türer und sagst, "ist doch das Gleiche"?

                    Nein. Ich sage: „Der Zweitürer fährt genauso gut. Wenn du den Viertürer haben willst, musst du nochmal 9876,50 Öken[1] drauflegen. Deine Entscheidung.“

                    Wie gesagt, mir fällt kein Szenario ein, bei dem ich standard-gridlayout nicht klassisch hinbekomme.

                    1. Mit was für Aufwand?

                    Praktisch NULL

                    Dann hat Grid wohl negativen Aufwand?

                    1. Mit was für krudem Mark-up?

                    simple, conform und in jedem Browser nutzbar.

                    Beispiel hier

                    Dein Mark-up ist nicht richtig: Erst soll im Quelltext der Header kommen, dann die Navigation. Das macht sich sowohl bei schmalem Viewport als auch bei Screenreadern bemerkbar.

                    Außerdem benötigst du ein präsentationsbezogenens Element <div id="rbase">.

                    BTW, <div id="container"> benötigst du nicht, das ist „bedauerlich bis ärgerlich“.

                    So, und nun lass mal den Designer um die Ecke kommen und sagen: „Hömmal, wir machen den Header doch über die volle Breite.“ Dann fängst du an, das Mark-up umzubauen. Mark-up umbauen wegen einer Änderung der Darstellung‽‽ Und das nennst du „praktisch NULL Aufwand“‽

                    Bei meiner Umsetzung ändere ich mal schnell im Stylesheet die Zeile "navigation page-header" in "page-header page-header" – ohne das HTML nochmal anfassen zu müssen. Das nenne ich „praktisch NULL Aufwand“.

                    (Die Deklaration sieht dann vollständig so aus:

                    		grid-template-areas:
                    			"page-header page-header"
                    			"navigation  main-content"
                    			"navigation  page-footer"
                    

                    LLAP 🖖

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

                    1. „Da waren sie wieder, meine drei Probleme.“ ↩︎

                    1. Hallo,

                      „Da waren sie wieder, meine drei Probleme.“

                      Brauchsu flasche wein?

                      Gruß
                      Kalk

              2. @@Henry

                Wie gesagt, mir fällt kein Szenario ein, bei dem ich standard-gridlayout nicht klassisch hinbekomme.

                Mir ja. Hatte ich letztens erst: Die zur Verfügung stehende Breite soll vollständig genutzt werden und gleichmäßig in möglichst viele Spalten aufgeteilt werden, die mindestens x breit sein sollen. Die Items füllen die Spalten in Leserichtung (von links nach rechts; von oben nach unten).

                (Das wäre mit etlichem Aufwand umsetzbar für eine gewisse maximale Anzahl n von Spalten. Man müsste sich n − 1 Breakpoints berechenen und für diese jeweils Regeln angeben. Den Aufwand will man nicht betreiben, zumal er nicht zu einer allgemeinen Lösung führt.)

                Auch bei diesem Mosaik möchte ich nicht darüber nachdenken wollen, wie das ohne Grid gehen sollte.

                LLAP 🖖

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

                  Auch bei diesem Mosaik möchte ich nicht darüber nachdenken wollen, wie das ohne Grid gehen sollte.

                  ich schon. Allerdings ist mir noch nicht ganz klar, was der Fragesteller da genau vorhat. So zeigt sein jetziges Beispiel natürlich noch keine gewünschten Quadrate, weil die Höhe ja dementsprechend dynamisch angepasst werden muss. Auch weiß ich nicht, was er eigentlich in der kompletten Zeile anzeigen möchte. Und ob diese Darstellung von Response wirklich so gewollt ist?... Aber falls ja, bietet sich hier ja ein klassisches Tabellenlayout als Grundlage an. Welcome back to the roots 😉

                  Gruss
                  Henry

                  1. bietet sich hier ja ein klassisches Tabellenlayout als Grundlage an.

                    Tolle Satire! Ich hätte es fast für „ernst gemeint“ genommen!

                    Zudem passt sogar Dein Avatar …

                    Alter Mann mit Bart

                    … bestens zu dieser Aussage, die im letztem Jahrtausend (soweit zu „klassisch“) noch eine gewisse Berechtigung hatte. Nämlich als die „WebDesigner“

                    • jung waren,
                    • es noch nicht besser wussten oder konnten und
                    • das Geld dringend brauchten.

                    Aus ähnlichen Gründen (man weiß es inzwischen besser) sind ja heute viele der im antiken Griechenland verbreiteten Praktiken verpönt.

                    1. Hallo Regina,

                      bietet sich hier ja ein klassisches Tabellenlayout als Grundlage an.

                      Tolle Satire! Ich hätte es fast für „ernst gemeint“ genommen!

                      Na wenigstens einer versteht mich 😉

                      Gruss
                      Henry

        2. Hej Gunnar, @@Henry

          Laut Can I use hat IE 11 in Deutschland noch eine Verbreitung von 3.4%. Lohnt es für so wenige Nutzer zusätzlichen Aufwand zu betreiben? Wenn die Antwort „ja“ sein sollte, kann man einen Fallback auf Floats implementieren:

          Oder mit der alten Schreibweise, was im vorliegenden Fall helfen dürfte. Oder mit den von Dir, Henry, vorgeschlagenen Techniken Hacks.

          Es muss nur klar sein, dass „Deine“ CSS-Basics mehr Aufwand machen, als „meine“ CSS Basics.

          CSS Grid ist CSS-Basis-Wissen. Einfacher lassen sich zweidimensionale Layouts nicht umsetzen.

          Viel Lernen kann man, wenn man in die Details einsteigen und elegante Lösungen bauen will (das CSS-Grid-Modul ist umfangreich und das zugrunde liegende Konzept zur Aufteilung von verfügbarem Raum mittels der verschiedenen Maßeinheiten sollte man sich vielleicht auf Dauer auch aneignen), z.B. um Layouts zu entwickeln die sich ohne media-queries responsiv verhalten.

          Das heißt aber nicht, dass es schwierig wäre erst mal zwei Spalten anzulegen; im Verhältnis 1:1 oder 1:2 oder was immer gewünscht.

          Marc

          1. Hej zusammen,

            übrigens versuche ich genau so eine Aufteilung für eine Box umzusetzen.

            Die erste Spalte (immer das erste Element im Grid-Container) enthält nur ein Icon zur optischen Markierung des Box-Typs (Error, Info, Success, Warning usw) und einen entsprechenden Screenreadern zugänglichen Hinweis-Text, der auch bei fehlendem/kaputtem CSS ausgegeben würde.

            Ich suche gerade nach einer eleganten Lösung. Hat jemand eine Idee, wie man das als grid schreibt? Also eine Spalte mit einem Grid-Item über die gesamte (unbekannte) Höhe des grid-containers und eine zweite Spalte mit n grid-items daneben. @Gunnar Bittersmann vielleicht?

            wenn ich um alle Inhalte ein div lege ist es einfach - das möchte ich möglichst vermeiden 😉

            Marc

            1. Hej marctrix,

              wenn ich um alle Inhalte ein div lege ist es einfach - das möchte ich möglichst vermeiden 😉

              Wenn ich ein dutzend Fälle abfange, indem ich mit CSS die items zähle, geht es auch (es sei denn, jemand schreibt in so eine Box mal 13 Absätze).

              Oder wenn ich mit dem span Keyword einen relativ hohen Wert eingebe (Link zum Pen) - dann ist die linke Spalte in den meisten Fällen aber länger als die rechte.

              Marc

            2. Hallo marctrix,

              Die erste Spalte (immer das erste Element im Grid-Container) enthält nur ein Icon zur optischen Markierung des Box-Typs (Error, Info, Success, Warning usw) und einen entsprechenden Screenreadern zugänglichen Hinweis-Text, der auch bei fehlendem/kaputtem CSS ausgegeben würde.

              Als gefloatetes Icon sähe das bestimmt besser aus.

              Bis demnächst
              Matthias

              --
              Rosen sind rot.
              1. Hej Matthias,

                Als gefloatetes Icon sähe das bestimmt besser aus.

                Sorry, Icon ist falsch. Habe das nur geschrieben, weil die Grafik so winzig ist (4x4 px oder so).

                Damit wird dann die erste Spalte komplett gefüllt (background repeat).

                Die mit css erzeugbaren Muster waren dem Designer nicht genehm. 😀

                Darüberhinaus interessiert es mich schlicht, ob und wie man es mit css grid hinbekommt, dass die erste Spalte so hoch ist wie alle Items danach in einer zweiten Spalte, ohne dass man die Zahl der Items kennt.

                Leider habe ich bis jetzt nur Lösungen für eine bekannte Anzahl von Geschwistern…

                Marc

                1. Warum nicht die zweite Spalte mit flex aufteilen, statt mit grid? Also z.B.

                  .spalte2 {display: flex; flex-flow: column nowrap;}

                  1. @@ottogal

                    Warum nicht die zweite Spalte mit flex aufteilen, statt mit grid? Also z.B.

                    .spalte2 {display: flex; flex-flow: column nowrap;}

                    Weil es kein Element .spalte2 gibt.

                    LLAP 🖖

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

                      @@ottogal

                      Warum nicht die zweite Spalte mit flex aufteilen, statt mit grid? Also z.B.

                      .spalte2 {display: flex; flex-flow: column nowrap;}

                      Weil es kein Element .spalte2 gibt.

                      So ist es. Ich habe n Elemente, die auf einem Raster angeordnet werden sollen.

                      Das erste in einer ersten Spalte und so hoch wie alle anderen zusammen.

                      Wäre cool wenn es zum Beispiel für das span-Keyword auch ein Keyword als Wert gäbe. Also last oder ao (analog zu last-child). Dann könnte man so was schreiben:

                      grid-row: 1 / span last;

                      Habe dazu aber nichts gefunden.

                      Wenn ich möchte, dass sich ein Item über alle Spalten erstreckt, hilft

                      grid-column: 1/-1;

                      Bei grid-rowzeigt das aber nicht das gewünschte Verhalten…

                      Marc

                      1. Das erste Element soll sich ja offenbar semantisch von den übrigen unterscheiden, wieso bekommt es dann keine eigene Behandlung?

                        1. Hej ottogal,

                          Das erste Element soll sich ja offenbar semantisch von den übrigen unterscheiden,

                          Ja, es enthält den Hinweis, dass bestimmte Meldungen folgen.

                          wieso bekommt es dann keine eigene Behandlung?

                          Bekommt es selbstverständlich. Ich überlege derzeit, ob es eine Überschrift sein müsste. Sonst bliebe nur ein p — so oder so macht das keinen Unterschied bei der Frage, wie bekomme ich das dazu, wie gewünscht zu Verhalten. Das Aussehen ist ja unabhängig von der Semantik.

                          Übrigens stellt HTML hier gar keine weitergehende Semantik bereit, Die könnte — wenn überhaupt — nur mit RFD(a) oder so hinzugefügt werden.

                          Was allerdings semantisch keinen Sinn macht ist ein weiteres div. Das benötige ich nicht — jedenfalls nicht aus semantischen Gründen. Zumal ein div ja auch keine Semantik hinzufügt. 😉

                          Das gewünschte Aussehen wäre dann natürlich nur noch ein Klacks.

                          Es geht mir hier aber auch darum ein Problem zu lösen, dass sicher in Zukunft noch öfters auftauchen wird.

                          Kannst du Frage nicht mal in die Runde zwitschern, @Gunnar Bittersmann?

                          Marc

                          1. @@marctrix

                            Kannst du Frage nicht mal in die Runde zwitschern, @Gunnar Bittersmann?

                            Wie jetzt? Noch mal?

                            LLAP 🖖

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

                          Das erste Element soll sich ja offenbar semantisch von den übrigen unterscheiden, wieso bekommt es dann keine eigene Behandlung?

                          Bekommt es doch. (In meinem Pen ist es das h2-Element.)

                          Die anderen Elemente sollen keine eigene Behandlung bekommen – auch nicht in ein div gewrappt werden.

                          LLAP 🖖

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

              eine Spalte mit einem Grid-Item über die gesamte (unbekannte) Höhe des grid-containers und eine zweite Spalte mit n grid-items daneben.

              Hm, ich hätte gedacht, grid-row: 1/-1 würde in der Vertikalen ebenso wirken wie grid-column: 1/-1 in der Horizontalen. Dem scheint nicht so zu sein – auch grid-auto-flow: column ändert daran nichts.

              Bin jetzt aber überfragt, ob das so gespecct ist oder ob die Implementierungen in sämtlichen Browsern buggy sind.

              LLAP 🖖

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

                @@marctrix

                eine Spalte mit einem Grid-Item über die gesamte (unbekannte) Höhe des grid-containers und eine zweite Spalte mit n grid-items daneben.

                Hm, ich hätte gedacht, grid-row: 1/-1 würde in der Vertikalen ebenso wirken wie grid-column: 1/-1 in der Horizontalen. Dem scheint nicht so zu sein – auch grid-auto-flow: column ändert daran nichts.

                Ja, das habe ich unter anderem probiert. Danke trotzdem!

                Marc

      2. Hej Henry,

        Bei so einem einfachen Layout, braucht es überhaupt keine Grid, Flex oder sonstwas...

        ps. wäre schön, wenn einer der Negativbewerter das auch mal begründen würde...

        Weil ich es schade fände, ein „einfaches Layout“ unnötig kompliziert zu machen.

        Marc

        1. Hallo marctrix,

          ps. wäre schön, wenn einer der Negativbewerter das auch mal begründen würde...

          Weil ich es schade fände, ein „einfaches Layout“ unnötig kompliziert zu machen.

          Genau so sehe ich das auch, allerdings andersrum. Erst recht, wenn ich ich hier die die Verzwickungen in diesem Thread sehe. Mal ehrlich... Ist da nicht mein Beispiel oder eine Variante davon nicht einfacher, schneller, robuster?

          Gruss
          Henry

          1. Hej Henry,

            Hallo marctrix,

            ps. wäre schön, wenn einer der Negativbewerter das auch mal begründen würde...

            Weil ich es schade fände, ein „einfaches Layout“ unnötig kompliziert zu machen.

            Genau so sehe ich das auch, allerdings andersrum. Erst recht, wenn ich ich hier die die Verzwickungen in diesem Thread sehe.

            Bei den Verwicklungen geht es um ein Problem, dass ohne Flexbox oder grid auf gar keinen Fall zu lösen wäre. Oder wie bekommst du mit floats o.ä. ein Element so hoch wie beliebig viele andere, deren Inhalt du nicht kennst? 😉

            Mal ehrlich... Ist da nicht mein Beispiel oder eine Variante davon nicht einfacher, schneller, robuster?

            Nein. Das wirst du selber sehen, wenn du mal echte Texte reinkopierst.

            Den hier zum Beispiel (da der noch recht kurz ist, gerne auch zwei oder drei mal) - schau mal, was dein robustes Layout dann tut 😉:

            Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet.
            

            Marc

            1. Hallo

              Sehen wir mal. So viel Text braucht es aber überhaupt nicht.

              Beispielseite (nur Text hinzugefügt, sonst keine Änderungen)

              Autsch.

              Gruss

              MrMurphy

            2. Hallo marctrix,

              Bei den Verwicklungen geht es um ein Problem, dass ohne Flexbox oder grid auf gar keinen Fall zu lösen wäre. Oder wie bekommst du mit floats o.ä. ein Element so hoch wie beliebig viele andere, deren Inhalt du nicht kennst? 😉

              Dass etwas ohne Grid nicht gehen soll, glaube ich niemals, schließlich ging auch "before Grid" so ziemlich alles. Die Frage ist nur, viel oder wenig Aufwand. Und genau das wäre hier zu ergründen.

              Mal ehrlich... Ist da nicht mein Beispiel oder eine Variante davon nicht einfacher, schneller, robuster?

              Nein. Das wirst du selber sehen, wenn du mal echte Texte reinkopierst.

              Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines.....
              

              Ja, das habe ich jetzt mal gemacht. Und sehe da auch kein Problem. Denn die Sache ist ja die... Wie würde das denn 1. mit Grid aussehen und 2. Es ist ja nur ein Grundgerüst für ein Layout, wobei man eben den Content und das echte gewünschte spätere Aussehen nur vermuten kann. Architektonisch auf jeden Fall, glaube ich, wird es locker mit kleinen Anpassungen funktionieren.

              Aber nun würde mich mal dein Textbeispiel beim gewünschten Gridbeispiel interessieren.

              Gruss
              Henry

              1. Hej Henry,

                Bei den Verwicklungen geht es um ein Problem, dass ohne Flexbox oder grid auf gar keinen Fall zu lösen wäre. Oder wie bekommst du mit floats o.ä. ein Element so hoch wie beliebig viele andere, deren Inhalt du nicht kennst? 😉

                Dass etwas ohne Grid nicht gehen soll, glaube ich niemals,

                Sag mir einfach wie! Dann glaube ich es auch. Mehr noch: ich weiß dann!

                Ja, das habe ich jetzt mal gemacht. Und sehe da auch kein Problem.

                Dann benutzt du vermutlich, Lynx, einen Screenreader oder hast den Lesemodus deines Browsers aktiviert 😂

                Wie würde das denn 1. mit Grid aussehen

                Probier es halt aus: Responsive header, two columns and a footer

                Marc

                1. Hallo marctrix,

                  Dass etwas ohne Grid nicht gehen soll, glaube ich niemals,

                  Sag mir einfach wie! Dann glaube ich es auch. Mehr noch: ich weiß dann!

                  Komme ich gleich zu, aber zuerst...

                  Ja, das habe ich jetzt mal gemacht. Und sehe da auch kein Problem.

                  Dann benutzt du vermutlich, Lynx, einen Screenreader oder hast den Lesemodus deines Browsers aktiviert 😂

                  wie meinst du das? Ist doch alles zu sehen.

                  Wie würde das denn 1. mit Grid aussehen

                  Probier es halt aus: Responsive header, two columns and a footer

                  Na ja, ist jetzt nicht unbedingt, das Layout was der Eingangsfrage zugrunde liegt, aber zumindest ähnlich. Dass dein Codepen-Beispiel (warum ihr alle das nehmen müsst...) natürlich im IE11 wieder mal anders aussieht als zb. im FF, dürfte klar sein?

                  Wie auch immer, du meinst das geht nur mit neueren Techniken? Nein. Es gibt sogar etliche simple Möglichkeiten dafür. zb. so...(natürlich anpassungsfähig) aber in jedem Fall in jedem Browser problemlos.

                  Gruss
                  Henry

                  1. Hej Henry,

                    Dass etwas ohne Grid nicht gehen soll, glaube ich niemals,

                    Sag mir einfach wie! Dann glaube ich es auch. Mehr noch: ich weiß dann!

                    Komme ich gleich zu, aber zuerst...

                    Dir Aufgabe war: das erste Element soll so hoch sein, wie alle Geschwister zusammen.

                    Das erste Element soll optisch eine eigene Spalte bilden, also wie in diesem Pen hier. Aber (im Gegensatz zum Pen): die Anzahl der Geschwisterelemente soll beliebig sein. Mein Beispiel funktioniert nur mit einer bekannten Anzahl von Elementen.

                    Marc

                    1. Hallo marctrix,

                      ähm, etwas verwirrend deine Antwort...

                      Du zeigst ein Beispiel, was nicht ohne Grid gehen soll.

                      Ich gehe darauf ein und zeige dieses Beispiel.

                      Sag mir einfach wie! Dann glaube ich es auch. Mehr noch: ich weiß dann!

                      Was bedeutet das jetzt? "Weißt du jetzt" oder habe ich dich falsch verstanden?

                      Gruss
                      Henry

                      1. Hallo Henry,

                        ähm, etwas verwirrend deine Antwort...

                        Du zeigst ein Beispiel, was nicht ohne Grid gehen soll.

                        Ich gehe darauf ein und zeige dieses Beispiel.

                        BTW, dein Beispiel sieht ganz anders aus als das von Marc 😀

                        Im übrigen bin ich der Meinung, dass es albern ist sich Grid-Layout zu verschliessen. Das ist ein so mächtiges und einfach zu bedienendes Tool mit einer breiten und guten Unterstützung, es erschliesst sich mir nicht, warum man da freiwillig drauf verzichtet.

                        LG,
                        CK

                        1. Hallo Christian,

                          BTW, dein Beispiel sieht ganz anders aus als das von Marc 😀

                          ganz anders? wo denn?

                          Im übrigen bin ich der Meinung, dass es albern ist sich Grid-Layout zu verschliessen. Das ist ein so mächtiges und einfach zu bedienendes Tool mit einer breiten und guten Unterstützung, es erschliesst sich mir nicht, warum man da freiwillig drauf verzichtet.

                          oh, das tue ich nicht. Nur benutze ich lieber den kleinsten gemeinsamen Nenner für alle browser, sofern das Resultat das Gleiche ist und der Aufwand sogar noch weniger. Wie ich schon zu Anfang sagte... Bei anderen Layouts mag Grid berechtigt sein, aber nicht bei so simplen.

                          Gruss
                          Henry

                          1. Hallo Henry,

                            BTW, dein Beispiel sieht ganz anders aus als das von Marc 😀

                            ganz anders? wo denn?

                            Marcs Beispiel

                            Header, Sidebar + Main, Footer im Grid

                            Deins

                            Header, Nav, Main, Footer untereinander

                            Beachte, dass ich das Fenster schon extrem breit gezogen habe, um ein vielfaches grösser als das Beispiel von Marc (deshalb habe ich das „result size“ mit in den Screenshot genommen).

                            oh, das tue ich nicht.

                            Doch, den Eindruck machst du schon ziemlich deutlich.

                            LG,
                            CK

                            1. Hallo Christian,

                              sehr seltsam. Mal davon abgesehen, dass sowieso alles anpassbar ist, besonders was @media Screen angeht, wundert mich dein Screenshot.

                              Hier mal meine, sowohl von Marctrix als meine, sowohl IE als auch FF.

                              Marc IE Landscape

                              Ich IE Landscape

                              Marc IE Mobil

                              Ich IE Mobil

                              Marc FF Landscape

                              Ich FF Landscape

                              Marc FF Mobil

                              Ich FF Mobil

                              Du siehst, kann ich jetzt nicht nachvollziehen. Was ich aber sehe +++STOP+++ Die Breitenangabe aus deinem Screen ist schwer zu erkennen, entw. 1075 oder 1875. Falls 1875, erklärt die @Media-Anweisung das wohl von selbst, es erklärt dann aber nicht warum du ein unrealistisches Portrait-Screen so hier optisch hinterlegst wie ein Landscapeview. Falls aber doch 1075, ja dann verstehe ich es nicht, siehe screenshots.

                              Gruss
                              Henry

                              1. Hallo Henry,

                                Du siehst, kann ich jetzt nicht nachvollziehen. Was ich aber sehe +++STOP+++ Die Breitenangabe aus deinem Screen ist schwer zu erkennen, entw. 1075 oder 1875. Falls 1875, erklärt die @Media-Anweisung das wohl von selbst, es erklärt dann aber nicht warum du ein unrealistisches Portrait-Screen so hier optisch hinterlegst wie ein Landscapeview. Falls aber doch 1075, ja dann verstehe ich es nicht, siehe screenshots.

                                Unrealistisch? 😂 So breit ist halt mein Browser-Fenster. Ich gebe doch einem Fenster nicht den gesamten Screen, soweit kommts noch. Ich habe eine Auflösung von 3840x2160 Pixeln, davon bekommt der Browser 1920x1080 abzüglich ein paar Pixel gaps und der Menü-Leiste oben, also etwa 50%. Das ist nicht unrealistisch, das ist höchst realistisch.

                                LG,
                                CK

                                1. Hallo Christian,

                                  Unrealistisch? 😂 So breit ist halt mein Browser-Fenster. Ich gebe doch einem Fenster nicht den gesamten Screen, soweit kommts noch. Ich habe eine Auflösung von 3840x2160 Pixeln, davon bekommt der Browser 1920x1080 abzüglich ein paar Pixel gaps und der Menü-Leiste oben, also etwa 50%. Das ist nicht unrealistisch, das ist höchst realistisch.

                                  na toll, glaube aber die meisten würden bei deinem (ausgeschnittenen) Screenshot denken, es sei Querformat. Wie auch immer, ich habe @media nur zwischen landscape und Portrait unterschieden lassen, dürftest du aber auch erkannt haben, also stattdessen oder zusätzlich eine Pixelangabe und das wars. Aber das weißt du ja und daher zu behaupten BTW, "dein Beispiel sieht ganz anders aus als das von Marc", finde ich schon seltsam und ärgerlich, weil ich es geglaubt habe und mir jetzt die ganze Arbeit mit den Screenshots umsonst gemacht habe.

                                  Gruss
                                  Henry

                                  1. Hallo Henry,

                                    na toll, glaube aber die meisten würden bei deinem (ausgeschnittenen) Screenshot denken, es sei Querformat. Wie auch immer, ich habe @media nur zwischen landscape und Portrait unterschieden lassen, dürftest du aber auch erkannt haben, also stattdessen oder zusätzlich eine Pixelangabe und das wars. Aber das weißt du ja und daher zu behaupten BTW, "dein Beispiel sieht ganz anders aus als das von Marc", finde ich schon seltsam und ärgerlich, weil ich es geglaubt habe und mir jetzt die ganze Arbeit mit den Screenshots umsonst gemacht habe.

                                    Ich habe mir deinen Sourcecode nicht angeschaut. Ich habe mir die Ausgabe angeschaut, ein wenig mit der Breite herumgespielt und versucht einen Breakpoint zu finden, bei dem es aussieht wie Marcs. Nachdem ich keinen Erfolg hatte hab ichs dann abgehakt als „läuft offensichtlich nicht.“

                                    Ich finde es seltsam und ärgerlich, dass du mir deine Fehleranalyse aufbürden willst. Das ist doch deine Aufgabe.

                                    LG,
                                    CK

                                    1. Hej Christian,

                                      Ich finde es seltsam und ärgerlich, dass du mir deine Fehleranalyse aufbürden willst. Das ist doch deine Aufgabe.

                                      Er war ja auch zwischendurch am Quellcode — das Problem, das beim Einfügen der Texte auftrat, kann ich jetzt so nicht mehr nachvollziehen.

                                      Wie dem auch sei. Jetzt noch allerhand media-queries hinzuzufügen, verringert den Aufwand ja nicht.

                                      Ich verstehe nur nicht, warum du, @Henry , immer noch behauptest, Deine Lösung sei simple.

                                      Mit Grid braucht man in vielen Fällen keine einzige media query und wenn, sind die Anpassngen i.d.R. schneller gemacht. Gerade wenn ich media-Queries benötige, arbeite ich gerne mit grid-area: damit kann man Namen vergeben und sich sein Layout dann als quasi-ASCII-Art in die CSS-Datei „malen“.

                                      Extrem leicht verständlich, mal wieder: insbesondere für Anfänger!

                                      Einziger „Vorteil“ der veralteten, umständlichen Layout-Techniken -Hacks: sie funktionieren in uralten Browsern. Ich würde zwar nicht auf die 3,5% IE11-Nutzer verzichten, aber ich finde es akzeptabel, wenn die dieselbe Darstellung bekommen, wie die Mehrheit der Nutzer, die inzwischen mit Smartphone unterwegs ist.

                                      IE11-Nutzer sehen also die Standard-Darstellung und nicht irgendwas minderwertiges oder kaputtes. Sie bekommen halt nicht das progressive enhancement für die Besitzer halbwegs aktueller Desktop-Software.

                                      Damit muss (und kann) man leben, wenn man alten Kram verwendet (was ich übrigens gar nicht ab kann — oft sind Leute, die so etwas einsetzen, generell update-faul und ihre Rechner sind längst Mitglied in diversen Bot-Netzen).

                                      Aber auch ich habe manchmal Kunden, die auf der Unterstützung alter Browser bestehen. Das wird dann aus zwei Gründen teuer: erstens sind die alten Techniken aufwändiger, wie hier bereits mehrfach belegt und zweitens muss ich bei manchen Dingen schon weit hinten im Hinterstübchen kramen und den Staub von fast vergessenen Techniken pusten, bevor alles so klappt, wie gewünscht.

                                      Egal: wer bezahlt bestimmt! Es ist das gute Recht eines Kunden, sich gegen Geld alle Wünsche erfüllen zu lassen und meinen Rat in den Wind zu schlagen.

                                      Aber ich stelle jetzt mal eine ganz dumme Frage an @Henry : warum glaubst du, wird so etwas wie Grid eingeführt und wieso implementieren das alle Browser-Hersteller in Windeseile, wenn es eine Technik voller Nachteile im Vergleich zum status quo ist? − Glaubst du, alle außer Dir sind verblendet?

                                      Ich habe ja auch in früheren Diskussionen mit @Gunnar Bittersmann gesagt, dass ich grid nicht überall verwenden kann, weil ich Layouts vorgegeben bekomme, die genauso wie in der PSD in alten Browsern laufen müssen.

                                      Bei konkreten Beispielen war oft (aber nicht immer!) der Aufwand für eine zusätzliche Verwendung einer alten Technik gering.

                                      Aber niemals habe ich bezweifelt, dass Grid besser ist. Immer habe ich mich gefreut auf den Tag, wo ich es verwenden kann. Und in meinem Arbeitsumfeld habe ich dauernd dafür geworben und endlich (!!!) kann ich es jetzt auch produktiv einsetzen!

                                      Grid macht alles einfacher und vieles überhaupt erst möglich!

                                      HTML und CSS werden schlanker, besser lesbar und besser wartbar.

                                      Marc

                                      1. Hallo marctrix,

                                        Er war ja auch zwischendurch am Quellcode — das Problem, das beim Einfügen der Texte auftrat, kann ich jetzt so nicht mehr nachvollziehen.

                                        Wie soll ich das denn verstehen? Willst du hier etwa behaupten, nach einer Kritik hätte ich den Quellcode verändert um die Kritik zu widerlegen? Falls ja, dann muss ich dir sagen, dass eine nachträgliche Änderung mit dem bereits vorhandenen Zielverweis bei meinem bevorzugten Anbieter gar nicht möglich ist.

                                        Gruss
                                        Henry

                                        1. Hej Henry,

                                          Er war ja auch zwischendurch am Quellcode — das Problem, das beim Einfügen der Texte auftrat, kann ich jetzt so nicht mehr nachvollziehen.

                                          Wie soll ich das denn verstehen? Willst du hier etwa behaupten, nach einer Kritik hätte ich den Quellcode verändert

                                          Nicht behaupten, aber vermuten.

                                          um die Kritik zu widerlegen?

                                          Absichten habe ich keine unterstellt.

                                          Beruhige dich bitte und lass uns sachlich bleiben!

                                          Marc

                                          1. Hallo marctrix,

                                            Wie soll ich das denn verstehen? Willst du hier etwa behaupten, nach einer Kritik hätte ich den Quellcode verändert

                                            Nicht behaupten, aber vermuten.

                                            Vermutung war falsch.

                                            um die Kritik zu widerlegen?

                                            Absichten habe ich keine unterstellt.

                                            Könnte man aber denken

                                            Beruhige dich bitte und lass uns sachlich bleiben!

                                            Bleib ich doch. <sachlich>Du hast dich geirrt</sachlich> 😉

                                            Gruss
                                            Henry

                                            1. Hej Henry,

                                              Könnte man aber denken

                                              Das war wohl nur eine Vermutung 😉

                                              Bleib ich doch. <sachlich>Du hast dich geirrt</sachlich> 😉

                                              Das kann nicht sein. Aus dem Lex Marctrices (bildet man das so? - Wer kann noch Latein?): „Ich irre mich nie“

                                              Marc

                                              1. Hi,

                                                Das kann nicht sein. Aus dem Lex Marctrices (bildet man das so? - Wer kann noch Latein?): „Ich irre mich nie“

                                                Du irrst Dich.

                                                Es wäre Lex Marctricis gewesen (Genitiv, nicht Nominativ oder Akkusativ Plural) Wenn Ihr mehrere wärt, wäre es Lex Marctricium gewesen.

                                                Aber da das Gesetz offensichtlich nicht gilt …

                                                cu,
                                                Andreas a/k/a MudGuard

                                                1. Hej MudGuard,

                                                  Das kann nicht sein. Aus dem Lex Marctrices (bildet man das so? - Wer kann noch Latein?): „Ich irre mich nie“

                                                  Du irrst Dich.

                                                  Aber da das Gesetz offensichtlich nicht gilt …

                                                  Doch das gilt. Das Latein ist ganz offensichtlich während der letzten 2000 Jahre kaputt gegangen — ich bin nur der einzige, dem es aufgefallen ist. 😂

                                                  (Das hätte ich mal unter meine "korrigierten" Klausuren schrieben sollen…)

                                                  Marc

                                                  PS: Im Ernst: Vielen Dank für die Korrektur!

                                                  1. Hi,

                                                    Marc

                                                    Ach ja, victor -> der Sieger, victrix -> die Siegerin, -trix ist die weibliche Form zu -tor (weitere Beispiele: acceptor vs. acceptrix, organisator vs. organisatrix …).

                                                    Bist Du ein weiblicher marctor?
                                                    Was auch immer das sein mag - könnte von marcere (schlaff sein) kommen, also sozusagen ein Schlaffi. Bzw. als marctrix eine Schlaffine 😉

                                                    PS: Im Ernst: Vielen Dank für die Korrektur!

                                                    Das mußte nach Deinem "ich irre mich nie" + Deinem Irrtum einfach sein 😉

                                                    cu,
                                                    Andreas a/k/a MudGuard

                                                    1. @@MudGuard

                                                      -trix ist die weibliche Form zu -tor

                                                      Majestrix ist ’ne Transe?

                                                      Ihr immer mit eurem großen Latrinum!

                                                      LLAP 🖖

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

                                                        -trix ist die weibliche Form zu -tor

                                                        Majestrix ist ’ne Transe?

                                                        meinst Du den Chef von Asterix und Obelix? Der hat aber kein r im Namen.

                                                        Oder wen meinst Du?

                                                        cu,
                                                        Andreas a/k/a MudGuard

                                                        1. @@MudGuard

                                                          -trix ist die weibliche Form zu -tor

                                                          Majestrix ist ’ne Transe?

                                                          meinst Du den Chef von Asterix und Obelix? Der hat aber kein r im Namen.

                                                          Ich hatte gehofft, es merkt keiner … 😉

                                                          Jetzt erzähl bloß noch, das Latrinum hätte auch kein r im Namen‽

                                                          LLAP 🖖

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

                                                            Jetzt erzähl bloß noch, das Latrinum hätte auch kein r im Namen‽

                                                            Wenn mit "r", dann mit "a" statt "um" - latrina = die Kloake

                                                            cu,
                                                            Andreas a/k/a MudGuard

                                                            1. @@MudGuard

                                                              Jetzt erzähl bloß noch, das Latrinum hätte auch kein r im Namen‽

                                                              Wenn mit "r", dann mit "a" statt "um" - latrina = die Kloake

                                                              Herrentoilette 🚹 vs. 🚺 Damentoilette

                                                              LLAP 🖖

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

                                                      Ach ja, victor -> der Sieger, victrix -> die Siegerin, -trix ist die weibliche Form zu -tor (weitere Beispiele: acceptor vs. acceptrix, organisator vs. organisatrix …).

                                                      Bist Du ein weiblicher marctor?

                                                      Einige von mir mit Sicherheit!

                                                      Was auch immer das sein mag - könnte von marcere (schlaff sein) kommen, also sozusagen ein Schlaffi. Bzw. als marctrix eine Schlaffine 😉

                                                      Tja, mit dem Alter kommt die Schwerkraft zu ihrem Recht.

                                                      PS: Im Ernst: Vielen Dank für die Korrektur!

                                                      Das mußte nach Deinem "ich irre mich nie" + Deinem Irrtum einfach sein 😉

                                                      Gut so! Lachen ist gesund!

                                                      Marc

                                2. Hej Christian,

                                  Ich habe eine Auflösung von 3840x2160 Pixeln,

                                  Schöner Monitor!

                                  Marc

                                  1. Hallo marctrix,

                                    Ich habe eine Auflösung von 3840x2160 Pixeln,

                                    Schöner Monitor!

                                    Ja, ich bin extrem happy damit 😀

                                    LG,
                                    CK

                                    1. Hej Christian,

                                      Ich habe eine Auflösung von 3840x2160 Pixeln,

                                      Schöner Monitor!

                                      Ja, ich bin extrem happy damit 😀

                                      Glaube ich - ich habe mir vor längerer Zeit einen 21:9 mit 3440x1700 oder so gekauft - da passen Editor, Entwicklerwerkzeuge und Browser so schön nebeneinander 😉

                                      Dauert sicher noch eine Weile, bis ich den mal ablöse!

                                      Marc

                                      1. Hallo marctrix,

                                        Glaube ich - ich habe mir vor längerer Zeit einen 21:9 mit 3440x1700 oder so gekauft - da passen Editor, Entwicklerwerkzeuge und Browser so schön nebeneinander 😉

                                        Ja, so arbeite ich da auch (fast): linke Seite Browser mit Dev-Tools, je nach Betriebssystem rechte Seite oben Dash oder Zeal (eine absolute Empfehlung), rechte Seite unten Terminal mit einer Tmux-Session.

                                        Dauert sicher noch eine Weile, bis ich den mal ablöse!

                                        Ablösen? Der Trend geht zum Zweit- und Drittmonitor! 😉

                                        LG,
                                        CK

                                        1. Hej Christian,

                                          Glaube ich - ich habe mir vor längerer Zeit einen 21:9 mit 3440x1700 oder so gekauft - da passen Editor, Entwicklerwerkzeuge und Browser so schön nebeneinander 😉

                                          Ja, so arbeite ich da auch (fast): linke Seite Browser mit Dev-Tools, je nach Betriebssystem rechte Seite oben Dash oder Zeal (eine absolute Empfehlung), rechte Seite unten Terminal mit einer Tmux-Session.

                                          Dauert sicher noch eine Weile, bis ich den mal ablöse!

                                          Ablösen? Der Trend geht zum Zweit- und Drittmonitor! 😉

                                          Wenn es eng werden sollte, kann ich den Laptop, der am Monitor hängt ja auch mal aufklappen. 😉

                                          Und: Es gibt ja noch duet — weil ich das große iPad habe, kommen dann noch mal angenehme 12,9 Zoll dazu. Das dann sogar mit Touch und Stifteingabe und Touchbar. Das nutze ich sogar eher, als dass ich den Laptop öffne. Auch unterwegs toll als Erweiterung für den Laptop-Bildschirm oder im kundengespräch, wenn man sich gegenübersi7und alle sehen dasselbe. Duet ist meine Empfehlung.

                                          Danke für deine, aber ich mache ja keine Software. Sieht aber toll aus. Würde ich programmieren, hätte ich es gleich geladen.

                                          Marc

                                    2. Hi,

                                      Ja, ich bin extrem happy damit 😀

                                      was ist das denn für eine Tastatur?

                                      cu,
                                      Andreas a/k/a MudGuard

                                      1. Hallo MudGuard,

                                        Ja, ich bin extrem happy damit 😀

                                        was ist das denn für eine Tastatur?

                                        Eine ErgoDox 😀

                                        LG,
                                        CK

                                        1. Hi,

                                          Ja, ich bin extrem happy damit 😀

                                          was ist das denn für eine Tastatur?

                                          Eine ErgoDox 😀

                                          gibt's das nur für Bastler oder auch fertig?

                                          Bei Massdrop müßte ich mich erst anmelden, um überhaupt was darüber rauszufinden. Und bei Ergodox find ich auch nichts zu der Tastatur.

                                          cu,
                                          Andreas a/k/a MudGuard

                                          1. Hallo MudGuard,

                                            gibt's das nur für Bastler oder auch fertig?

                                            Das gibts inzwischen auch in fertig: ErgoDox EZ.

                                            Ich hab mir davon eine fürs Büro in Ettlingen gekauft bzw kaufen lassen, damit ich die hier nicht immer hin- und herschleppen muss.

                                            LG,
                                            CK

                                            1. Hi,

                                              Das gibts inzwischen auch in fertig: ErgoDox EZ.

                                              naja, auch nicht so richtig.

                                              Beschriftete Tasten gibt's wohl nur für US-Layout (QWERTY). Die Tasten sind zwar austauschbar, so daß Y vs. Z kein Problem sind, aber die ganzen Satzzeichen usw. sind ja bei deutschem Layout anders kombiniert als bei US-Layout.

                                              Alternativ gibt's noch komplett unbeschriftet - das erfordert dann doch wieder Bastelei.

                                              Und der Preis ist ja auch nicht ganz ohne …

                                              cu,
                                              Andreas a/k/a MudGuard

                                              1. Hallo MudGuard,

                                                Beschriftete Tasten gibt's wohl nur für US-Layout (QWERTY). Die Tasten sind zwar austauschbar, so daß Y vs. Z kein Problem sind, aber die ganzen Satzzeichen usw. sind ja bei deutschem Layout anders kombiniert als bei US-Layout.

                                                Alternativ gibt's noch komplett unbeschriftet - das erfordert dann doch wieder Bastelei.

                                                Ich brauche keine Beschriftung, von daher war mir das egal…

                                                Und der Preis ist ja auch nicht ganz ohne …

                                                Das ist schon richtig, aber ich habe, nachdem Microsoft die Natural Ergonomic kaputt geändert hat, keine sinnvolle Tastatur mehr in einem vernünftigen Preisrahmen gefunden. Meine erste MS Ergo hat deutlich über 10 Jahre gehalten (ich erinnere mich nicht mehr genau, es könnten auch 12 oder 13 gewesen sein). Alle danach (immerhin 4 Stück) haben nur noch ein halbes Jahr gehalten… außerdem haben sie auch die Switches ausgewechselt und die Winkel verändert, so dass das Tippgefühl ein ganz anderes war und ich wieder Probleme mit Schmerzen in den Fingern bekommen hab. Ich habe hier noch zwei von den Dingern rumliegen, eine mit zwei kaputten Tasten und eine mit einer kaputten Taste.

                                                Da musste dann eine haltbare Lösung her. Die ErgoDox kann ich selber reparieren (hab sie ja auch selber zusammen gelötet), hab ich auch schon getan. Notfalls kann ich einzelne Switches selber auswechseln. Ich bin also für die nächsten Jahre bedient 😀

                                                LG,
                                                CK

                                              2. @@MudGuard

                                                Beschriftete Tasten gibt's wohl nur für US-Layout (QWERTY). Die Tasten sind zwar austauschbar, so daß Y vs. Z kein Problem sind, aber die ganzen Satzzeichen usw. sind ja bei deutschem Layout anders kombiniert als bei US-Layout.

                                                Benutzt man™ denn als Entwickler deutsches Tastatur-Layout, um sich bei jeder eckigen oder geschweiften Klammer die Finger zu brechen?

                                                Ich bin von Anfang an an QWERTY gewöhnt (als ich mit der Programmiererei angefangen habe, gab’s an der Uni nichts anderes) und verwende das grundsätzlich – egal wie die Tastatur beschriftet ist.

                                                LLAP 🖖

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

                                                  Benutzt man™ denn als Entwickler deutsches Tastatur-Layout,

                                                  Da wir hier ja alle keine echten Entwickler sind (mit Ausnahme eines gewissen heißen Rosts), ist das für uns doch unwichtig, was Entwickler machen.

                                                  cu,
                                                  Andreas a/k/a MudGuard

                                                  1. @@MudGuard

                                                    mit Ausnahme eines gewissen heißen Rosts

                                                    🤣

                                                    Welchen man nur mit Samthandschuhen anfassen sollte.

                                                    LLAP 🖖

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

                                      Schöner Monitor!

                                      Ja, ich bin extrem happy damit 😀

                                      Mich würde ja stören, dass es zwei verschiedene Monitore sind. 😉

                                      Bis demnächst
                                      Matthias

                                      --
                                      Rosen sind rot.
                                      1. Hallo Matthias,

                                        Schöner Monitor!

                                        Ja, ich bin extrem happy damit 😀

                                        Mich würde ja stören, dass es zwei verschiedene Monitore sind. 😉

                                        Nein, das finde ich sogar ganz angenehm. Auf dem linken Monitor ist der Editor im Vollbild, das passt gut.

                                        LG,
                                        CK

                                        1. Hallo Christian Kruse,

                                          Nein, das finde ich sogar ganz angenehm. Auf dem linken Monitor ist der Editor im Vollbild, das passt gut.

                                          Wenn der auch so hoch wäre, wie der rechte, wäre der Editor immern noch im Vollbild. 😉

                                          Bis demnächst
                                          Matthias

                                          --
                                          Rosen sind rot.
                                          1. Hallo Matthias,

                                            Nein, das finde ich sogar ganz angenehm. Auf dem linken Monitor ist der Editor im Vollbild, das passt gut.

                                            Wenn der auch so hoch wäre, wie der rechte, wäre der Editor immern noch im Vollbild. 😉

                                            Ja, aber dafür ist mein Schreibtisch zu klein 😂

                                            LG,
                                            CK

                                            1. Hallo Christian Kruse,

                                              Ja, aber dafür ist mein Schreibtisch zu klein 😂

                                              Verstellst du den regelmäßig in der Höhe? Ich möchte meinen höhenverstellbaren Schreibtisch nicht mehr missen.

                                              Bis demnächst
                                              Matthias

                                              --
                                              Rosen sind rot.
                                              1. Hallo Matthias,

                                                Ja, aber dafür ist mein Schreibtisch zu klein 😂

                                                Verstellst du den regelmäßig in der Höhe? Ich möchte meinen höhenverstellbaren Schreibtisch nicht mehr missen.

                                                Ja. Ich stehe etwa die Hälfte des Tages. Tut meinem Rücken gut.

                                                LG,
                                                CK

                                                1. Hallo Christian Kruse,

                                                  Ja. Ich stehe etwa die Hälfte des Tages. Tut meinem Rücken gut.

                                                  Genau, ich auch.

                                                  Bis demnächst
                                                  Matthias

                                                  --
                                                  Rosen sind rot.
                          2. Hej Henry,

                            oh, das tue ich nicht. Nur benutze ich lieber den kleinsten gemeinsamen Nenner für alle browser, sofern das Resultat das Gleiche ist und der Aufwand sogar noch weniger. Wie ich schon zu Anfang sagte... Bei anderen Layouts mag Grid berechtigt sein, aber nicht bei so simplen.

                            Und das versuchst du mit einem nicht funktionierenden Beispiel zu belegen, "dass man ja noch anpassen kann"? Bring es zum funktionieren und dann schauen wir uns an, ob Grid oder Deine Vorgehensweise aufwändiger ist. 😉

                            Marc

                      2. Hej Henry,

                        Du zeigst ein Beispiel, was nicht ohne Grid gehen soll.

                        Da gab es wohl ein Missverständnis.

                        Es gab erst eine Anfrage vom OP zu einem Layout, auf das du auch eingegangen bist. Allerdings hatte ich das für mich schon als gelöst abgehakt, egal ob mittels grid oder veralteter Technik (ja man kann das ohne Grid machen, wenn man muss, weil mehrere Spalten auch im IE10 sein sollen - es gibt schon mal so Kundenanfragen).

                        Dein Beispiel taugt dafür aber leider nicht.

                        Dennoch dachte ich, dieser Drops sei gelutscht, als du folgendes geschrieben hast:

                        Genau so sehe ich das auch, allerdings andersrum. Erst recht, wenn ich ich hier die die Verzwickungen in diesem Thread sehe.

                        Ich meinte daher, dass du mit Verzwickungen mein noch ungelöstes Problem in einem Nebenast dieses Threads gemeint hast und habe darum geantwortet:

                        Bei den Verwicklungen geht es um ein Problem, dass ohne Flexbox oder grid auf gar keinen Fall zu lösen wäre. Oder wie bekommst du mit floats o.ä. ein Element so hoch wie beliebig viele andere, deren Inhalt du nicht kennst? 😉

                        Ab da haben wir wohl aneinander vorbei geredet. Wie auch immer. Deine Behauptung, man kann ohne Grid alles machen, was mit Grid geht, stimmt so nicht.

                        Auch wenn man dieselbe Optik mit Klimmzügen hinbekommen mag, sind dann doch mehr oder weniger viele und umfangreiche Hacks und überflüssige Elemente im HTML nötig.

                        Ungelöst ist nach wie vor das nun schon mehrfach von mir beschriebene Problem. Offenbar ist das derzeit weder mit noch ohne Grid zu lösen.

                        Allerdings mag es sich dabei um Fehler in den Browsern handeln, nicht am CSS Grid, wie Gunnar vermutet hat.

                        So oder so: CSS Grid ist die erste und einzige Technik, die speziell für zweidimensionale Layouts von Webseiten zur Verfügung steht. Alles vorher waren Hacks, mit denen wir uns abgemüht haben, weil es keine vernünftige Technik gab.

                        Mit nur zwei Zeilen CSS erzeugt man ein zweispaltiges Layout:

                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        

                        Lassen wir mal außen vor, dass du meinst, grid sei überflüssig, weil man mit den veralteten umständlichen Hacks alles machen kann, was mit Grid geht. Mit welcher Technik außer Grid sind zwei Spalten leichter zu erzeugen?

                        Grid ist einfach. Nicht nur für mich als Entwickler.

                        Auch als Dozent kann ich nur sagen: es war nie leichter, layouten zu unterrichten.

                        Marc

                        1. Hallo marctrix,

                          Ab da haben wir wohl aneinander vorbei geredet. Wie auch immer. Deine Behauptung, man kann ohne Grid alles machen, was mit Grid geht, stimmt so nicht.

                          Habe ich so nicht gesagt, sondern

                          ...mir fällt kein Szenario ein, bei dem ich standard-gridlayout nicht klassisch hinbekomme…

                          Betonung auf Mir und Standard

                          Umso mehr interessiert mich ja ein Vergleich.

                          Auch wenn man dieselbe Optik mit Klimmzügen hinbekommen mag, sind dann doch mehr oder weniger viele und umfangreiche Hacks und überflüssige Elemente im HTML nötig.

                          Bei mir weder Hacks, noch überflüssige Elemente aber dafür robust und global einsetzbar.

                          Mit nur zwei Zeilen CSS erzeugt man ein zweispaltiges Layout:

                          display: grid;
                          grid-template-columns: 1fr 1fr;
                          

                          Lassen wir mal außen vor, dass du meinst, grid sei überflüssig, weil man mit den veralteten umständlichen Hacks alles machen kann, was mit Grid geht. Mit welcher Technik außer Grid sind zwei Spalten leichter zu erzeugen?

                          Kommt ja auf den Rest an, aber je nach Zweck und Elementenzuordnung würde ich zunächst mal entweder:

                          display:inline-block;
                          width:50%;
                          

                          oder

                          display:table-cell;
                          width:50%;
                          

                          oder so ähnlich versuchen.

                          Grid ist einfach. Nicht nur für mich als Entwickler.

                          Bestreitet ja keiner, aber meine Vorgehensweise auch und dazu noch Browserkompatibel(die angeblichen ca. 3% vom IE11 dürften eher ca. 6% betragen, und das ist dann doch nicht so wenig)

                          Aber nochmal, ich will hier bestimmt nicht Grid schlecht reden, denn ich war schon immer ein Fan vom allseits gehassten Tabellenlayout und im Grunde ist Grid ja nichts anderes, wenn auch in einer von Html getrennten und moderneren Form.

                          Gruss
                          Henry

                          1. Hej Henry,

                            Ab da haben wir wohl aneinander vorbei geredet. Wie auch immer. Deine Behauptung, man kann ohne Grid alles machen, was mit Grid geht, stimmt so nicht.

                            Habe ich so nicht gesagt, sondern

                            ...mir fällt kein Szenario ein, bei dem ich standard-gridlayout nicht klassisch hinbekomme…

                            Betonung auf Mir und Standard

                            Ich bezog mich auf diese Aussage:

                            Dass etwas ohne Grid nicht gehen soll, glaube ich niemals, […]

                            Aber zurück zum Thema:

                            Umso mehr interessiert mich ja ein Vergleich.

                            Dann schlag ein konkretes Szenario vor (eines haben wir ja nun hinreichend durchexerziert).

                            Auch wenn man dieselbe Optik mit Klimmzügen hinbekommen mag, sind dann doch mehr oder weniger viele und umfangreiche Hacks und überflüssige Elemente im HTML nötig.

                            Bei mir weder Hacks, noch überflüssige Elemente aber dafür robust und global einsetzbar.

                            float beispielsweise dient dazu, den Inhalt eines Elementes um ein anderes fließen zu lassen. Wenn man es benutzt, um Spalten zu erzeugen, ist das ein Hack.

                            Mit nur zwei Zeilen CSS erzeugt man ein zweispaltiges Layout:

                            display: grid;
                            grid-template-columns: 1fr 1fr;
                            

                            Lassen wir mal außen vor, dass du meinst, grid sei überflüssig, weil man mit den veralteten umständlichen Hacks alles machen kann, was mit Grid geht. Mit welcher Technik außer Grid sind zwei Spalten leichter zu erzeugen?

                            Kommt ja auf den Rest an, aber je nach Zweck und Elementenzuordnung würde ich zunächst mal entweder:

                            display:inline-block;
                            width:50%;
                            

                            oder

                            display:table-cell;
                            width:50%;
                            

                            oder so ähnlich versuchen.

                            Das sollte beides gehen. In der Realität kommen dann aber noch ein paar Anforderungen hinzu: z.B. Abstände zwischen den Elementen (grid-gap) und die Forderung dass das bündig sein soll mit Elementen in einem vierspaltigen Fußbereich.

                            Außerdem brauchst du Innenabstände. Dann kommst du mit 50% schon nicht hin. Oder du brauchst box-sizing: border-box und zack: schon hast du ein mehrfaches von dem Code, den du gezeigt hast.

                            Jetzt muss man schon ziemlich viel testen, messen usw, bis das passt.

                            Ich habe so was lange genug machen müssen. 😉

                            Und selbst das ist ja nur ein Bruchteil der Anforderungen.

                            Schau dir doch mal an, wie viel Code Frameworks wie Bootstrap für ein zwölfspaltiges Grid-System benötigen!

                            Mit css Grid definiert man 12 Spalten so:

                            display: grid;
                            grid-template-columns: repeat(12, 1fr);
                            grid-gap: 1em;
                            

                            Und schon kannst du loslegen, Elemente über mehrere Zeilen und Spalten auf diesem Grid zu platzieren.

                            Grid ist einfach. Nicht nur für mich als Entwickler.

                            Bestreitet ja keiner, aber meine Vorgehensweise auch und dazu noch Browserkompatibel(die angeblichen ca. 3% vom IE11 dürften eher ca. 6% betragen, und das ist dann doch nicht so wenig)

                            Aber nochmal, ich will hier bestimmt nicht Grid schlecht reden, denn ich war schon immer ein Fan vom allseits gehassten Tabellenlayout und im Grunde ist Grid ja nichts anderes, wenn auch in einer von Html getrennten und moderneren Form.

                            Jein, wenn du in Tabellen noch colspan und rowspan verwendest. Es ist aber deutlich komplizierter und automatisches auffüllen von Lücken (dense), beliebiges anordnen (order) mehrere Elemente auf einem Raster-Feld stapeln sind nur drei von ganz, ganz vielen Dingen, die mit den von dir genanten Vorschlägen nicht umsetzbar sind.

                            Im HTML benötigst du noch ansonsten überflüssige Elemente für die Zeilen. Mit CSS grid nicht. Und mach mal ein Tabellen-Layout responsiv. Alles machbar (mit nem halben Dutzend media queries) — aber der Aufwand! Und nicht nur für die Umsetzung, auch für Tests!

                            Dazu kommt, dass Änderungen am Layout im Projektverlauf in meinem Arbeitsalltag mitunter dazu geführt haben, dass es mit float oder display: block nicht mehr ging und ich das Layout damit begonnen hatte. Dann musste ich praktisch von vorn anfangen z.B. mit display: table um nun rowspan verwenden können. Das heißt: selbst wenn das Ergebnis im Endeffekt mal ähnlich schnell umsetzbar ist, wie mit Grid: der Weg dahin kann deutlich länger gewesen sein. Das sieht man dem fertigen Produkt freilich nicht an. Egal welche Änderungswünsche an einem Grid-Layout im Nachhinein oder während der Entwicklungsphase vorgenommen werden sollen: das kann man mit überschaubaren Aufwand machen. Sogar wenn sich so grundlegende Dinge ändern wie die Idee nun plötzlich 13 statt 12 Rasterspalten zu verwenden. Mach das mal mit Bootstrap! 😂

                            Und woher weißt du, dass der IE 11 nicht 3% Marktanteil hat, sondern 6%? Warum nicht 1,5% Wo machst du das dran fest?

                            Aber egal wo der im Moment steht. Die Tendenz ist ganz eindeutig fallend!

                            Ein Argument, was ich oft höre als jemand der barrierefrei arbeiten muss: ein Blindenarbeitsplatz ist so teuer, dass der viele Jahre halten muss. Daher setezn Blinde oft alte Browser ein. Nicht weil sie wollen, sondern weil sie keine Wahl haben.

                            Aber Blinden ist die optische Anordnung auf einem Bildschirm nun mal gerade so was von piepe 😉

                            Marc

                            1. Hallo marctrix,

                              Ich bezog mich auf diese Aussage:

                              Dass etwas ohne Grid nicht gehen soll, glaube ich niemals, […]

                              ahh ok 😉 Damit meinte ich natürlich grundsätzlich, ohne den Aspekt, ob man das dann auch wirklich so umsetzen sollte.

                              Den Rest zitiere ich jetzt nicht, weil ich das, auch wenn es anscheinend manchmal anders rüberkommt, ähnlich sehe.

                              Und woher weißt du, dass der IE 11 nicht 3% Marktanteil hat, sondern 6%? Warum nicht 1,5% Wo machst du das dran fest?

                              Am Durchschnitt vieler Statistiken, nicht nur caniuse.

                              Aber egal wo der im Moment steht. Die Tendenz ist ganz eindeutig fallend!

                              Das stimmt. Wenn auch laaangsaaaam.

                              Gruss
                              Henry

                              1. Hej Henry,

                                Dass etwas ohne Grid nicht gehen soll, glaube ich niemals, […]

                                ahh ok 😉 Damit meinte ich natürlich grundsätzlich, ohne den Aspekt, ob man das dann auch wirklich so umsetzen sollte.

                                Warum ich widersprochen habe: „es geht“ bedeutet nicht nur etwas optisch umzusetzen.

                                Wenn ich meine, etwas geht nicht, dann meine ich alle Anforderungen umsetzen wie: ein Layout ohne presentational markup umsetzen. Und ein div das ausschließlich zur Formatierung benötigt wird, ist nun mal preesentational markup.

                                Nicht dass ich das in der täglichen Arbeit immer hinbekomme.

                                Aber hier im Forum suche ich nach der bestmöglichen Umsetzung, nicht nach geht auch ohne xyz, auch wenn man das eigentlich nicht machen sollte. Sorry wenn das ein wenig streng rüberkommt.

                                Den Rest zitiere ich jetzt nicht, weil ich das, auch wenn es anscheinend manchmal anders rüberkommt, ähnlich sehe.

                                Habe ich hier und da schon manchmal vermutet. Aber die Vehemenz und Beharrlichkeit verstehe ich dann noch weniger, mit der du alte Techniken verteidigt hast.

                                Wie gesagt: wenn alte Browser unterstützt werden müssen, kann man grid nicht verwenden.

                                Isso.

                                Für alle anderen Fälle ist grid das Werkzeug zum erzeugen von Layouts, die auf einem Raster basieren. Und welche Layouts tun das heute nicht?

                                Am Durchschnitt vieler Statistiken, nicht nur caniuse.

                                Danke für die Links. Ich bin übrigens der Meinung, dass man als Entwickler auch Verpflichtungen hat. Dazu gehört auch, dafür zu sorgen, dass veraltete Software nicht mehr unterstützt wird, damit die verschwindet.

                                Nicht Browser von einem bestimmten Hersteller sind schlecht. Alte Browser sind schlecht!

                                Aber egal wo der im Moment steht. Die Tendenz ist ganz eindeutig fallend!

                                Das stimmt. Wenn auch laaangsaaaam.

                                Ja, wie beim guten alten IE6, Friede seiner Asche! 😉

                                Tragen wir dazu bei, dass diese halbverdauten Zombies endlich in einer virtuellen Gruft begraben werden!

                                Marc

              2. Hej Henry,

                Mal ehrlich... Ist da nicht mein Beispiel oder eine Variante davon nicht einfacher, schneller, robuster?

                Nein. Das wirst du selber sehen, wenn du mal echte Texte reinkopierst.

                Ja, das habe ich jetzt mal gemacht. Und sehe da auch kein Problem.

                Ich aber: die linke Spalte ist kürzer als die rechte.

                Marc

          2. @@Henry

            Mal ehrlich... Ist da nicht mein Beispiel oder eine Variante davon nicht einfacher, schneller, robuster?

            Nein. Das hatten wir doch schon.

            LLAP 🖖

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

              @@Henry

              Mal ehrlich... Ist da nicht mein Beispiel oder eine Variante davon nicht einfacher, schneller, robuster?

              Nein. Das hatten wir doch schon.

              Das ist aber nur deine subjektive Meinung, faktisch siehts allerdings so aus: W3c-conform und funktioniert in jedem Browser. Ob ich nun den Body benutze oder einen Container drum herum lege, ist wohl eher nebensächlich im Hinblick, was die wichtigen Aspekte betrifft.

              Gruss
              Henry

              1. @@Henry

                Nein. Das hatten wir doch schon.

                Das ist aber nur deine subjektive Meinung

                Ich hatte objektive Gründe angeführt.

                Und es hat niemand widersprochen.

                faktisch siehts allerdings so aus: W3c-conform und funktioniert in jedem Browser.

                Nein. Falsche Reihenfolge im Mark-up funktioniert halt nicht in jedem Browser. Und was noch wichtiger ist: funktioniert nicht für jeden Nutzer.

                Ob ich nun den Body benutze oder einen Container drum herum lege, ist wohl eher nebensächlich im Hinblick, was die wichtigen Aspekte betrifft.

                Ja, das hat in der Tat keinen Einfluss auf die UX. Wenn es nicht dreiundzwölzig unnütze Elemente sind, was zulasten der Performanz geht.

                LLAP 🖖

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

                  @@Henry

                  Ob ich nun den Body benutze oder einen Container drum herum lege, ist wohl eher nebensächlich im Hinblick, was die wichtigen Aspekte betrifft.

                  Ja, das hat in der Tat keinen Einfluss auf die UX. Wenn es nicht dreiundzwölzig unnütze Elemente sind, was zulasten der Performanz geht.

                  Wieso sollte jemand, der solchen Unsinn in den Code schreibt, an anderer Stelle sauber arbeiten.

                  Ich bin ja nun das eine oder andere Jährchen im Geschäft und habe zwei Gruppen von Entwicklern kennen gelernt:

                  Solche, die schlicht zu faul sind, sich weiter zu bilden und solche, die ihr wissen aktuell halten.

                  Die lassen sich wieder in zwei Gruppen unterteilen: Entwickler, welche die neuesten Techniken nutzen, um sich selber die Arbeit zu erleichtern und solche, die sich bemühen Millionen von Webanwendern die Arbeit zu erleichtern.

                  Marc

                  PS: Was mir auch aufgefallen ist: alle möglichen Frameworks und Hilfen für Entwickler zielen darauf ab wiederverwertbaren Code zu identifizieren und bereit zu stellen. Allerdings gibt es erstaunlich wenig wiederverwertbare Konstrukte, wenn man individuelle Webseiten erstellen möchte. Bootstrap und co sind bei diesem Anliegen vollkommen gescheitert. Was man damit erstellt ist alles von der Stange und gewöhnlich.

                  Flexbox ist wirklich eine kleine Revolution gewesen, grid ist eine große, die uns viel mehr Freiheit bei der Umsetzung neuer Projekte gibt. Layouts werden möglich, die vorher schlichtweg nicht machbar waren.

                  1. @@marctrix

                    Die lassen sich wieder in zwei Gruppen unterteilen: Entwickler, welche die neuesten Techniken nutzen, um sich selber die Arbeit zu erleichtern und solche, die sich bemühen Millionen von Webanwendern die Arbeit zu erleichtern.

                    Venn-Diagramm dazu:

                    Es gibt Entwickler, die ihre Arbeit machen und soche, die das nicht tun.

                    LLAP 🖖

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