1+1 ≠ 2, die neue politische Meinung hat befohlen!: Frage zu „wo ist das Hirn?“

SELF-Forum

Frage zu „wo ist das Hirn?“

1+1 ≠ 2, die neue politische Meinung hat befohlen!
– Informationen zu den Bewertungsregeln

problematische Seite

„Responsives Design“ ist Mist! Warum? Weil mindestens Firefox und Safari aus

body {
	min-inline-size: 100vi !important; inline-size: 100vi !important;
	min-block-size: 100vb !important; block-size: 100vb !important;
	display: grid;
	…
}

einen „Layoutbereich“ abliefern, der z. B. auf dem Desktop sowohl rechts als auch unten einen hübsch breiten Bereich abliefern, in dem NICHS erscheint. Oder, in anderen aber ähnlichen Fällen, ein Raster mit vielleicht 140vi Breite verlangen (Scrollen verbieten ist also verboten!)

Was für Pf… sitzen da, denen bestimmt nicht nur Naturgesetze (calc(5cm / 5cm) == 1cm! …) am A… vorbei gehen? Ach ja: welche mit 96 Pixeln maximaler Auflösung bei der Gehrinzellen-Dichte. Maximal!

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Frage zu „wo ist das Hirn?“

    Pfeifen-Heini
    +1 Informationen zu den Bewertungsregeln

    problematische Seite

    Das vom User Agent mitgelieferte Stylesheet definiert margin: 8px; (oder ähnliches) für das body-Element. Hast du das zurückgesetzt?

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

  2. Frage zu „wo ist das Hirn?“

    Rolf B
    +1 Informationen zu den Bewertungsregeln

    problematische Seite

    Hallo nix,

    wie du sicher weißt, ist ohne den Kontext, am besten online abrufbar, kaum zu ergründen, welchen Fehler du gemacht hast. Die !important-Ballerei nützt da eher wenig, es sei denn, du hast in den Entwicklertools bemerkt, dass andere Regeln Vorrang bekommen und du das nicht eleganter lösen kannst.

    Und einen Fehler gemacht hat du sicher, denn - abgesehen von dem erwähnten margin des body, den man entweder entfernen oder abziehen muss - funktioniert es prima, den body auf 100vi × 100vb zu setzen. Hab ich schon oft genug gemacht.

    calc(5cm / 5cm) KANN übrigens nicht funktionieren, CSS erwartet als Divisor eine Zahl, keine Länge. Steht auch im Wiki

    Rolf

    --
    sumpsi - posui - obstruxi
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Frage zu „wo ist das Hirn?“

      Hameln oder nicht Hameln?
      – Informationen zu den Bewertungsregeln

      problematische Seite 

      <head>
	<style>
		:any { margin: 0; padding: 0; }
		body {
			box-sizing: border-box;
			min-inline-size: 100vi; max-inline-size: 100vi;
			min-block-size: 100vb; max-block-size: 100vb;
			overflow: hidden;
			display: grid; grid-template: "a b" 3fr "c d" 7fr / 15fr 33fr;
			:where(header, main, article, footer) { border: 1ex solid black; }
			haeder { grid-area: "a"; background: lime; }
			main { grid-area: "b"; background: cyan; }
			article { grid-area: "c"; background: yellow; }
			footer { grid-area: "d"; background: red; }
		}
	</style>
</head>
<body>
	<header>Zyanisch? Oder sonst:</header>
	<article>Wo ist derRahmen</article>
	<main>unten und</main>
	<footer>rechts denn nur geblieben?</footer>
</body>
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Frage zu „wo ist das Hirn?“

        —🎶—
        – Informationen zu den Bewertungsregeln

        problematische Seite 

        <head>
	<style>
		* { margin: 0; padding: 0; }
		body {
			box-sizing: border-box;
			min-inline-size: 100vi; max-inline-size: 100vi;
			min-block-size: 100vb; max-block-size: 100vb;
			overflow: hidden;
			display: grid; grid-template: "a b" 3fr "c d" 7fr / 15fr 33fr;
			:where(header, main, article, footer) { border: 1ex solid black; }
			haeder { grid-area: "a"; background: lime; }
			main { grid-area: "b"; background: cyan; }
			article { grid-area: "c"; background: yellow; }
			footer { grid-area: "d"; background: red; }
		}
	</style>
</head>
<body>
	<header>Zyanisch? Oder sonst:</header>
	<article>Wo ist derRahmen</article>
	<main>unten und</main>
	<footer>rechts denn nur geblieben?</footer>
</body>
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Frage zu „wo ist das Hirn?“

          Matthias Scharwies
          – Informationen zu den Bewertungsregeln

          problematische Seite

          Guten Morgen Nix,

          herzlichen Glückwünsch,

          Du hast die Scrollbalken mit margin und overflow weggekriegt.

          Trotzdem erinnert mich das eher an Rumprobieren:

          body {
	box-sizing: border-box;
	min-inline-size: 100vi; max-inline-size: 100vi;
	min-block-size: 100vb; max-block-size: 100vb;
	overflow: hidden;
}

          body ist ein Block-Element, das automatisch 100% der Breite einimmt:

          body {
	box-sizing: border-box;
	min-block-size: 100vb; 
	overflow: hidden;
}

          max-block-size oder max-height, was ich verwenden würde, wäre nur interessant, wenn es auch wirklich Inhalt geben würde.

          :where(header, main, article, footer) { border: 1ex solid black; }
		}

          Warum einfach, wenn's auch kompliziert geht?

          header, main, article, footer { border: 1ex solid black; }
		}

          Das mit Grid solltest du noch mal nachlesen:

          body {
	display: grid; 
	grid-template: "a b" 3fr "c d" 7fr / 15fr 33fr;
			
	haeder { grid-area: "a"; background: lime; }
	main { grid-area: "b"; background: cyan; }
	article { grid-area: "c"; background: yellow; }
	footer { grid-area: "d"; background: red; }

          Klick' dich doch mal durch den Seiteninspektor, dann merkst du, dass es keinen haeder (sic) gibt und die anderen 3 Regelsätze zu grid-area durchgestrichen sind, weil sie einen ungültigen Wert enthalten!

          Ich würde die Grid-Items in der von mir gewünschten Reihenfolge ins Markup notieren und dann den auto-placement-Algorithmus ohne weitere CSS-Regelsätze machen lassen.

          @nix Bitte stelle gerne Fragen zum Artikel, wenn du welche hast.

          Falls du nur etwas kommentieren willst, solltest du Titel und Tag ändern.
          Falls nicht, werden wir deine Posts künftig löschen.

          Herzliche Grüße
          Matthias Scharwies
          Vorsitzender SELFHTML e.V.

          --
          Was ist eine Signatur?
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln