Flexboxen

[delbor]

Hi zusammen

Nachdem ich hier den Rat erhalten habe, für mein Layout doch Flexboxen zu verwenden, habe ich mich nochmal in die Thematik gestürzt und mich entschlossen, gleich das Beispiel von hier (ein flexibler Container )zu Übernehmen,da dieses bis auf Kleinigkeiten meiner gewünschten Seitenaufteilung entspricht.

Das Layout soll so auf allen Seiten eingesetzt werden, wobei sich die Hauptseite dadurch unterscheidet, dass der Header wesenntlich höher ist und zentriert ein CSS-Logo beinhaltet, während der Hauptbereich im wesentlichen mehrere Nav-Elemente enthalten soll, die den Inhalt nach Rubriken und 'Unter'-Rubriken anzeigen sollen.

Ich habe den Code mal hier (http://codepen.io/pen/) hinterlegt. Das CSS enthält Definitionen, die ich für mein herumexperimentieren benötigte und die vor allem noch dastehen, weil ich zu faul bin, sie erneut einzutippen, sollte ich sie nochmal brauchen.

Das Problem ist: Wenn ich die Navigationen im Article-Element mit nav-Elementen realisieren will, werden letztere immer jeweils über die gesamte Zeile des Article-Elements ausgedehnt. Wenn ich für die Links nur die ul-Elemente verwende - die speziell deswegen eigene Definitionen im CSS erhalten haben - werden diese knallhart untereinander angeordnet. Dabei habe ich das article-Element mit einer Klasse angewiesen, alle Zwischenräume anzuzeigen(justify-content:arround)..

Was mache ich Falsch?

Gruss Delbor

[MrMurphy1]

Hallo

Was mache ich Falsch?

Das können wir dir erst sagen wenn wir dein Problem erkennen können. Ich verstehe bislang nur dass du mit der Navigation nicht zufrieden bist. Was du im Endeffekt erreichen willst erschließt sich mir nicht.

Eine weitere Schwierigkeit dir zu helfen ist

Das CSS enthält Definitionen, die ich für mein herumexperimentieren benötigte und die vor allem noch dastehen, weil ich zu faul bin, sie erneut einzutippen, sollte ich sie nochmal brauchen.

Wie sollen wir bitte erkennen welche CSS-Angaben du wirklich willst und welche nur noch leben weil du zu faul bist sie zu killen?

Insgesamt solltest du zunächst auch die sachlichen Fehler im CSS korrigieren. Zumindest ich sehe meine Hilfe hier im Forum nicht als Fehlersuchmaschine.

Wieso erwartest du dass wir uns die Mühe machen dir zu helfen, wenn du dir offensichtlich nicht mal die Mühe machst dein CSS gegenzulesen?

Weiterhin sehe ich mehrere float-Anweisungen, aber kein clear.

Ob float und Flexbox sich darüber hinaus stören kann erst kontrolliert werden wenn die sachlichen Fehler beseitigt sind.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Ob float und Flexbox sich darüber hinaus stören

Sollten eigentlich nicht, weshalb man ja Floats als Fallback einsetzen kann.

LLAP 🖖

[delbor]

Hallo

Was mache ich Falsch?

Das können wir dir erst sagen wenn wir dein Problem erkennen können. Ich verstehe bislang nur dass du mit der Navigation nicht zufrieden bist. Was du im Endeffekt erreichen willst erschließt sich mir nicht.

Das Inhaltsverzeichnis auf dieser Indexseite soll sich im Hauptbereich der Seite befinden, so dass Besucher gleich einen Überblick erhalten. Nur soll dieses Inhaltsverzeichnis nicht in einer einzigen Liste alle Inhalte aufzeigen, sonder diese in verschiedenen Listen, aufgeschlüsselt nach Rubriken, aufteilen.. So dass, wie auf codepen sichtbar, in einzelnen Nav-Elementen je ein Menue zu den Rubriken platziert ist. Diese Rubriken sind:

• Normalspurbahnen
• Schmalspurbahnen
• Berg-Und Zahnradbahnen

Eine weitere Schwierigkeit dir zu helfen ist

Das CSS enthält Definitionen, die ich für mein herumexperimentieren benötigte und die vor allem noch dastehen, weil ich zu faul bin, sie erneut einzutippen, sollte ich sie nochmal brauchen.

Wie sollen wir bitte erkennen welche CSS-Angaben du wirklich willst und welche nur noch leben weil du zu faul bist sie zu killen?

Ich habe das CSS nun durch eine Version ersetzt, die nur noch die im HTML auch verwendeten Definitionen enthält. Aus unerfindlichen Gründen werden die einst seitlichen Spalten nun in je einer einzigen Zeile positioniert. Notepad++, bzw. der FireFox, zeigt mir die Seite nach wie vor mit drei Spalten an. Der Bereich, um den es hier geht, ist grün eingefärbt - das ist ein (das einzige) Section-Element, das sich im Article-Element (zur Verdeutlichung blau gefärbt) befindet. In diesem Section-Element sollen sich horizontal in Abhängigkeit der Viewportgrösse mindestens 2 Nav-Elemente befinden, während sich der Rest auf weitere Zeilen verteilt und eventuell sogar eingemittet wird.

Insgesamt solltest du zunächst auch die sachlichen Fehler im CSS korrigieren. Zumindest ich sehe meine Hilfe hier im Forum nicht als Fehlersuchmaschine.

Mach ich gerne - wenn ich denn die sachlichen Fehler auch erkennen kann. Grundsätzlich kann, so wie ich das verstanden habe, eine Flexbox genau eine Ebene Flexitems enthalten, diese Flexitems aber selbst keine weitere Ebene flexibler Items. Wenn ich nun meine Recherchen richtig deute, können Flexboxen aber weiter verschachtelt werden, indem jeweils in den Flexitems weitere Flex-Container definiert werden.

Wieso erwartest du dass wir uns die Mühe machen dir zu helfen, wenn du dir offensichtlich nicht mal die Mühe machst dein CSS gegenzulesen?

Wenn ein Autor eines Buches (oder was auch immer) sein Manuskript gegenlesen will, so lässt er dies in der Regel durch eine weiteere Person machen - der Grund ist doch einfach der, dass er als Autor kaum alle Fehler selbst erkennen kann - erst recht nicht, wenn er wie ich ein Newbie in der Materie ist.

Weiterhin sehe ich mehrere float-Anweisungen, aber kein clear.

Wenn ich das nicht komplett falsch verstanden habe, ist ein Float innerhalb des Containers gültig, in der es angewendet wird und darüber hinaus allen andern Container, die sich auf der selben oder aus dieser entspringenden Ebene befindet.Wenn sich also unterhalb des aktuellen Containers keine weitere Ebene befindet und auch keine weiteren Elemente vorhanden sind, die nicht gefloated werden sollen, brauchts das clear nicht unbedingt. Was aber nicht heissen soll, dass das schön ist.

Ob float und Flexbox sich darüber hinaus stören kann erst kontrolliert werden wenn die sachlichen Fehler beseitigt sind.

Float kam nur zum Einsatz, wenn die Navigationsgruppen ohne Flexbox angeordnet werden sollten. Da sah ich das Problem vor allem darin, den Navigationsboxen prozentuale Breitenwerte zu verpassen - auf einem Desktopbildschirm gut lesbar, wär da eine Navigation auf Smartphones+Co wohl nicht mehr möglich. Übrigens - Flexboxen (bzw. Browser) ignorieren Floatwerte (steht hier auf Selfhtml).

Gruss Delbor

[Gunnar Bittersmann]

@@delbor

Grundsätzlich kann, so wie ich das verstanden habe, eine Flexbox genau eine Ebene Flexitems enthalten

Ja, die Flextitems sind die Kindelemente der Flexbox (solange nicht noch display: content ins Spiel kommt).

diese Flexitems aber selbst keine weitere Ebene flexibler Items.

Doch, das können sie. Ein Flexitem kann selbt auch wieder Flexbox sein …

Wenn ich nun meine Recherchen richtig deute, können Flexboxen aber weiter verschachtelt werden, indem jeweils in den Flexitems weitere Flex-Container definiert werden.

… da bedarf es keiner weiteren Elemente dazwischen.

Siehe dieses Beispiel: footer ist Flexitem von body und Flexbox für seine section-Kinder.

Das Beispiel hatte ich übrigens mal für diesen Thread erstellt. Da der bekannte Forums-Troll – diesmal unter dem Namen Julia – es vorzug rumzupöbeln anstatt sich gesittet zu verhalten, hatte ich es aber für mich behalten.

LLAP 🖖

[delbor]

[Vollzitat entfernt]

Hi Gunnar Bittersmann

Vielen Dank für Deine Antwort! Im Moment habe ich im Hinterkopf, dass meine Umsetzung in Bezug auf justify-Content fehlerhaft ist, muss aus Zeitgründen aber die Beschäftigung damit auf den späten Nachmittag verschieben.

Gruss Delbor

[MrMurphy1]

Hallo

Ich habe mal ein Beispiel erstellt wie ich dich zu verstehen glaube.

Deine Rahmen- und Farbenvielfalt habe ich aber eingeschränkt oder weggelassen. Für das Layout spielen sie auch keine Rolle.

Der header wird so hoch wie sein Inhalt, wie es auch sein soll. Mit einem größeren Bild muss also im CSS nichts angepasst werden.

Das Layout ist Mobile First und so aufgebaut, dass selbst Browser ohne Flexboxunterstützung die Seite zwar schlichter, aber konstruktiv darstellen.

Das Layout ist in drei Schritten responsive gestaltet.

Bei breiten Fenstern werden drei Links nebeneinander dargestellt, weil ich dich so verstanden habe. Ich selbst würde aber maximal zwei nebeneinander stellen. Ohne den endgültigen Inhalt der Seite zu kennen ist das aber schwierig zu beurteilen. Bei drei Link-Spalten würde ich auch über CSS-Multicolumn nachdenken.

Die Testseite steht nicht ewig zur Verfügung, da ich meinem Testaccount immer mal wieder aufräume. Deshalb verlinke ich sie auch nicht direkt. In einigen Wochen ist die Seite entweder gar nicht mehr vorhanden oder hat einen anderen Inhalt:

http://boratb.bplaced.net/index02.html

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Deshalb verlinke ich sie auch nicht direkt.

Das ist ärgerlich. So kann ich deine Seite nicht aufrufen. Auf Copy-and-paste-Orgie hab ich keine Lust.

In einigen Wochen ist die Seite entweder gar nicht mehr vorhanden oder hat einen anderen Inhalt:

Das ist schade. So ist dein Posting fürs Archiv völlig wertlos.

LLAP 🖖

[delbor]

[Vollzitat entfernt]

Hi zusammen

@MrMurphi: Vielen dank für deine Mühe! Die drei unteren Boxen zeigen im Grunde fast das, was ich meine - fast desshalb, weil Boxe zwei nur gerade so breit sein muss, damit sie alle dazugehörenden Links untereinander darstellen kann. Boxe drei, die ebenso gestaltet sein soll, sollte sich dann rechts anschliessen, sofern da noch Platz bleibt. Ansonsten rutscht sie in die nächste Zeile.

Ich sehe gerade, das mir das Bild etwas gross geraten ist - ich werde es im Anschluss bearbeiten und zusehen, dass ich es durch eine kleinere Version ersetzen kann. Die Felder NAV4 und NAV5 stehen für Rubriken, die es zum jetzigen Zeitpunkt noch nicht gibt und deren Anzahl auch noch nicht feststeht. Überdies könnte meine Vorstellung von drei Rubriken nebeneinander eher Wunschdenken sein - andrerseits habe ich mit einem 23-Zöller auch nicht gerade den grössten Bildschirm.

Überdies habe ich deinen Mediaquerys bemerkt - das gibt genügend Lernstoff für die nächste Zeit ;-)) Herzlichen Dank!

Gruss Delbor

[MrMurphy1]

Hallo

Ich habe mein Beispiel mal überarbeitet.

So wie du dir das wünscht wird es nicht ganz funktionieren.

weil Boxe zwei nur gerade so breit sein muss, damit sie alle dazugehörenden Links untereinander darstellen kann.

Flexbox reagiert leider nicht sehr "harmonisch" auf den Inhalt von Containern, den Flex-Items. Wenn Flexbox selbst bestimmen kann richtet es sich im Endeffekt nach dem jeweils längsten Wort. So werden Container mit viel Inhalt, aber nur kurzen Worten, eng zusammengeschoben, Container mit wenig Inhalt aber einem langen Wort bleiben breiter. Das sieht häufig bescheuert aus.

Deshalb sollte zunächst der Inhalt einer Webseite erstellt werden und anschließend das Layout. Grade bei Flexbox werden Webseitenersteller immer wieder unangenehm überrascht wenn sie kurze Beispieltexte, häufig auch noch den gleichen in vielen Containern, durch realen Inhalt ersetzen.

Von daher lasse ich Flexbox in der Breite nicht so viele Freiheiten wie möglich sind.

Überdies könnte meine Vorstellung von drei Rubriken nebeneinander eher Wunschdenken sein

Nein, da hatte ich dich falsch verstanden. Ich dachte, dass die Links innerhalb der Container nebeneinander stehen sollen. Das wird schnell unübersichtlich.

Kacheln und Cards bleiben auch übersichtlich wenn mehr als zwei in einer Reihe stehen. Das finde ich dann auch ok.

Gruss

MrMurphy

[delbor]

Hi MrMurphy

Vielen Dank nochmal! Verschiedentlich sind mir immer wieder Konstrukte wie "flex:1,1,25%;" aufgefallen. Ich wusste, ich hatte das iregendwo gelesen, konnte aber die Bedeutungen der einzelnen Parameter an ihrer Position nicht mehr nachvollziehen - bis ich im Wiki gestern abend die Stelle wieder fand, an der das erklärt ist und ich damit begann, mir das in Word zu notieren. Heute morgen - meine Doku ist eigentlich noch gar nicht fertig - hab ich mich dazu entschlossen, das mal umzusetzen - das jpeg zeigt das Resultat. Die Änderung:

    nav {
      background: #fffbf0;
      border-color: #e7c157;
      margin:15px;
      flex: 1 35%;  */ 35 statt 100%)/*
    }

Wie heisst es doch so schön: Warum in die Ferne schweifen; das Gute liegt doch so nah! Und so siehts nun aus: Die dritte Box macht zwar nicht ganz das, was meiner Wunschvorstellung entspräche. Aber die Hintergründe, wie sie jetzt in den Navs und in der Elternbox sind, verschwinden/ändern sich sowieso. Optisch störend ist einzig das weisse Loch neben der letzten Linkliste.

Nochmal vielen Dank für deine Mühe!

Gruss Delbor

[Gunnar Bittersmann]

@@delbor

Optisch störend ist einzig das weisse Loch neben der letzten Linkliste.

1. Womit willst du es denn füllen?

2. Nicht einzig. Optisch störend ist auch das Doppel-&.

LLAP 🖖

[delbor]

Hi Gunnar Bittersmann

1. Womit willst du es denn füllen?

2. Nicht einzig. Optisch störend ist auch das Doppel-&.

1. Mit dem mauerähnlich strukturierten Hintergrund. Wobei die Frage bleibt, wie gut die Menuepunkte dann noch zu erkennen sind...
2. Das ist mein Fehler und wird gelegentlich korrigiert - wenns sein muss, erst kurz vor der endgültigen Veröffentlichung - zu übersehen ist der ja nicht.

Gruss Delbor

[Tabellenkalk]

Hallo,

@@delbor
...
Optisch störend ist auch das Doppel-&.

Manche verwenden ein Doppel-&, andere ein Doppel-@. Man muss im Leben schon ein wenig Toleranz mitbringen...

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

@@delbor
...
Optisch störend ist auch das Doppel-&.

Manche verwenden ein Doppel-&, andere ein Doppel-@. Man muss im Leben schon ein wenig Toleranz mitbringen...

Manche verwenden ein Doppel-l bei „Tolleranz“. Auch das muss man tolerieren‽

LLAP 🖖

[Tabellenkalk]

Hallo,

Doppel-l bei „Tolleranz“.

Oder bei „Tabelle“. Toll, gell?

Gruß
Kalk

[marctrix]

Hej delbor,

bis ich im Wiki gestern abend die Stelle wieder fand, an der das erklärt ist und ich damit begann, mir das in Word zu notieren.

Guck dir doch mal den Complete Guide to flexbox an.

Optisch störend ist einzig das weisse Loch neben der letzten Linkliste.

Das hast du erzeugt. Ein Block-Element wie eine Liste nimmt von sich aus den gesamten verfügbaren Platz ein.

Marc

[delbor]

Hi marctrix

Guck dir doch mal den Complete Guide to flexbox an.

Danke für den link! Die Seite ist mir 'durchgerutscht', als ich meine Lesezeichenliste erstellt habe, da mein englisch schlicht fürchterlich ist... Aber sie ist echt interessant!

Optisch störend ist einzig das weisse Loch neben der letzten Linkliste.

Das hast du erzeugt. Ein Block-Element wie eine Liste nimmt von sich aus den gesamten verfügbaren Platz ein.

Ja, danke. Ein Background:none wäre da wohl besser, bzw. der mauerahnliche Hintergrund.

Gruss Delbor

[marctrix]

Hej delbor,

Guck dir doch mal den Complete Guide to flexbox an.

Danke für den link! Die Seite ist mir 'durchgerutscht', als ich meine Lesezeichenliste erstellt habe, da mein englisch schlicht fürchterlich ist... Aber sie ist echt interessant!

Es sind ja nicht viele Erklärungen dabei, die man lesen müsste. Es werden immer die Auswirkungen der diversen flex-box-Eigenschaften gezeigt. Die freilich sind auf englisch, aber das lässt sich ja nicht ändern ;-)

Optisch störend ist einzig das weisse Loch neben der letzten Linkliste.

Das hast du erzeugt. Ein Block-Element wie eine Liste nimmt von sich aus den gesamten verfügbaren Platz ein.

Ja, danke. Ein Background:none wäre da wohl besser, bzw. der mauerahnliche Hintergrund.

Eigentlich "leidet" dein Layout eher an "zu viel" als an "zu wenig". Aber ist Geschmacksache, ich weiß.

Was allerdings keine Geschmacksache ist: achte auf ausreichend Kontraste. Sonst wird deine Seite für sehr viele Menschen unbenutzbar. Wär doch schade drum!

Marc

[Gunnar Bittersmann]

@@delbor

Hi zusammen

@MrMurphi: […]

Würdest du bitte auf das Posting antworten, auf das du dich beziehst? Das macht den Threadverlauf besser nacvollziehbar. Danke.

LLAP 🖖

[delbor]

Hi Gunnar Bittersmann

Sorry! Ich werde mir Mühe geben - ich bin sequentielle Foren gewohnt.

Gruss Delbor

[marctrix]

Hej MrMurphy1,

Die Testseite steht nicht ewig zur Verfügung,

Ein Codepen hat diesen Nachteil nicht...

Marc

[Matthias Apsel]

Hallo Marctrix,

Die Testseite steht nicht ewig zur Verfügung Ein Codepen hat diesen Nachteil nicht...

Vielleicht könnten/dürften Leute mit einem gewissen Punktestand oder einfach die Administratoren Beispiele nach forum.selfhtml.org/examples kopieren, das Einverständnis vorausgesetzt.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Siehe dieses Beispiel

Warum sagt mir das denn keiner, dass der Link falsch war? Jetzt korrigiert.

LLAP 🖖

[delbor]

Hi zusammen

Dasbisherige Problem ist zwar soweit 'gelöst', als das ich eine mMn. recht ansprechendes Oberfläche hingekriegt habe. Zwei Wermutstropfen gibts bislang aber noch: Im Header hatte ich es hingekriegt, dass in der ersten Zeile ein Willkommenstext und daraufhin in der zweiten Zeile ein CSS-Logo ohne Zwischenraum zur ersten Zeile angezeigt wurde. Dann hatte ich versucht, nach diesem Beispiel meinen Navs einen Farbverlauf zuzuweisen. Das ging aus mir nicht wirklich klaren Gründen schief, und so machte ich meinen Versuch rückgängig. Der Versuch wäre gewesen, das gewöhnliche "<NAV>-Element durch "<NAV class="one">"zu ersetzen". Gelöst habe ich das mit einer Zuweisung an 'background-image' in der NAV-Definition:

background-image: linear-gradient(blue, aqua, aqua, blue);

Doch seither ist im Header zwischen der ersten und der zweiten Zeile ein grössere Abstand, so, als hätte ich da Padding oder Margin >0 zugewiesen - eine Zuweisung gibt es, allerdings explizit auf 0.

Wie auch immer. Wenn da nun 2 verschiedene Bilder sind, zeigen die ein weiteres Problem auf. Eines zeigt meinen Firefox ohne Sidebar, das andere mit. Beabsichtigt ist: die beiden kleineren Boxen sollen in jedem Fall auf 16:9 und 3:4- Bildschirmen untereinander dargestellt werden. Um die Darstellung auf einem Tablet/iPad/Smartphon kümmere ich mich zu einem späteren Zeitpunkt. Der Grund ist: es soll möglichst schlankes CSS ausgegeben werden. Von daher macht es keinen Sinn, an einen Desktop Handy- oder Tablet-CSS auszuliefern. Dabei gehe ich davon aus, dass das, was ich zu sehen bekomme, wenn ich den Browser soweit zusammenschiebe, dass er ungefähr die Gössenverhältnisse eines iPads/Smartphones hat, dies nur eine Pseudovorschau ist. Zurück zzu den beiden kleineren Boxen: das sind zwei flexible Nav-Elemente, die sich in einem auch flexiblen Section-Elemnt befinden; Padding der Section und Margin der Navs sind explizit 0, damit die beiden kleinen Boxen zusammen gleich hoch sind wie die danebenstehende grosse Box. Wie kann ich das hinkriegen? Die eigentlichen Linklisten haben eine prozentuale Grösse und ebensolche margins zwecks Zentrierung - da lässt sich also wohl nichts machen.

Ich hoffe, das Problem verständlich dargestellt zu haben und danke schon mal für eure Antworten.

Gruss Delbor

[MrMurphy1]

Hallo

als das ich eine mMn. recht ansprechendes Oberfläche hingekriegt habe

Deine Webseite, du bestimmst das Layout und Aussehen. Ich bevorzuge Lösungen die von meinen Besuchern als angenehm und seriös empfunden werden. Von daher halte ich mich aus Geschmacksfragen raus.

Doch seither ist im Header zwischen der ersten und der zweiten Zeile ein grössere Abstand

Ohne Link zur Seite kann ich dir bei dem Problem nicht weiterhelfen.

Beabsichtigt ist: die beiden kleineren Boxen sollen in jedem Fall auf 16:9 und 3:4- Bildschirmen untereinander dargestellt werden.

Das sind eher Verhältnisse für TV. Bei Computern sind sie die Ausnahme. Wobei dann noch nicht die Pixelanzahl feststeht oder ob der Browser im Vollbild / Vollfenster ausgeführt wird. Bei einer Vollfensterdarstellung wird das Verhältnis durch die unterschiedlichen Rahmen der Browser zerstört. In der Praxis hat es sich deshalb als Irrweg erwiesen Webseitenlayouts von Bildschirmverhältnissen abhängig zu machen.

Um die Darstellung auf einem Tablet/iPad/Smartphon kümmere ich mich zu einem späteren Zeitpunkt.

Das funktioniert in der Praxis meist nicht oder nur unter erheblichen Mehraufwand. Häufig sind dabei zusätzliche Container erforderlich, die das bisherige Layout zerstören. Oder vorhandene Container stören. So kommt dann eins zum anderen. Deshalb sollten von Beginn an alle Fenstergrößen berücksichtigt werden. Zumal dies mit den Möglichkeiten von HTML5 und CSS3 und den Möglichkeiten wie Media Queries zu dem frühen Zeitpunkt nur einen unerheblichen Mehraufwand bedeutet. Später wird der Aufwand manchmal unüberschaubar.

Der Grund ist: es soll möglichst schlankes CSS ausgegeben werden. Von daher macht es keinen Sinn, an einen Desktop Handy- oder Tablet-CSS auszuliefern.

Das hast du wohl falsch verstanden. Schlankes CSS bedeutet nicht möglichst wenig Text / Zeichen zu verwenden. Sondern zum Beispiel nicht mehr benötigte Anweisungen zu löschen.

Smartphone (Handy), Tablet und Desktop sind zudem nur Schlagworte ohne technischen Hintergrund. Vom CSS können sie deshalb überhaupt nicht unterschieden werden.

Außerdem wird der CSS-Quelltext schnell unübersichtlich, wenn für getrennte Geräte getrenntes CSS erstellt werden soll. Doppelte Anweisungen lassen sich dann nicht vermeiden, wobei die Idee vom schlanken CSS unterlaufen wird.

Wenn du dein CSS nach den drei Schlagworten ausrichten möchtest musst du zunächst für dich die Unterscheidungsmerkmale so festlegen, dass sie mit CSS überhaupt angesprochen werden können.

Dabei gehe ich davon aus, dass das, was ich zu sehen bekomme, wenn ich den Browser soweit zusammenschiebe, dass er ungefähr die Gössenverhältnisse eines iPads/Smartphones hat, dies nur eine Pseudovorschau ist.

Die aber für dein Projekt vollkommen ausreicht, da die von dir bevorzugte Unterscheidung in Smartphone, Tablet und Desktop überhaupt nicht möglich ist.

Zurück zzu den beiden kleineren Boxen: das sind zwei flexible Nav-Elemente, die sich in einem auch flexiblen Section-Elemnt befinden; Padding der Section und Margin der Navs sind explizit 0, damit die beiden kleinen Boxen zusammen gleich hoch sind wie die danebenstehende grosse Box. Wie kann ich das hinkriegen?

Mit CSS - Flexbox. Wie das umgesetzt werden sollte kann aber erst entschieden werden wenn auch das gewünschte Layout für andere Fenstergrößen bekannt ist. Ansonsten kann es wie oben beschrieben zu einer Lösung kommen, die dann wieder komplett abgerissen werden muss. Das kannst du für dich natürlich gerne machen, wenn du zu viel lange Weile hast. Die meisten Anderen gehen dabei eher bewährte, zielführende Wege.

Die eigentlichen Linklisten haben eine prozentuale Grösse und ebensolche margins zwecks Zentrierung - da lässt sich also wohl nichts machen.

Das verstehe ich nicht.

Gruss

MrMurphy

[delbor]

Hi MrMurphy

Die eigentlichen Linklisten haben eine prozentuale Grösse und ebensolche margins zwecks Zentrierung - da lässt sich also wohl nichts machen.

Das verstehe ich nicht.

Die eigentlichen Linklisten sind die ul-Elemente - die müssen in ihren Navs zentriert sein. da sonst unschöne Leerräume entstehen.

    nav ul {
      border-sizing: borderbox;
      width: 80%; /*15em */
      margin-left: 10%;
      margin-right: 10%;/*<===*/
      padding: 0.2em;
      border: 1px solid red;
      background-color: silver;
    }

Deine Webseite, du bestimmst das Layout und Aussehen. Ich bevorzuge Lösungen die von meinen Besuchern als angenehm und seriös empfunden werden. Von daher halte ich mich aus Geschmacksfragen raus.

In der Tat: blau ist meine eine Lieblingsfarbe. Das ist der eine Grund für deren Verwendung . Der andere ist die Farbbedeutung - Blau steht meines Wissens für Kompetenz. Ein Umstand, auf den ich allerdings erst im Nachhinein gestossen bin. Ich gehe mal davon aus, dass so ein unbewusster Eindruck bei einem Besucher mit dafür der Grund sein kann, dass er eher wiederkommt. Trotzdem habe ich mir vorgenommen, dieses Layout mal zur Diskussion zu stellen, da ich bislang noch nicht wirklich zufrieden bin.

Ohne Link zur Seite kann ich dir bei dem Problem nicht weiterhelfen.

Ich kann das gegen abend mal online stellen. Vorher muss ich allerdings nochmal weg.

Um die Darstellung auf einem Tablet/iPad/Smartphon kümmere ich mich zu einem späteren Zeitpunkt.

Das funktioniert in der Praxis meist nicht oder nur unter erheblichen Mehraufwand. ...

Der Grund ist: es soll möglichst schlankes CSS ausgegeben werden. Von daher macht es keinen Sinn, an einen Desktop Handy- oder Tablet-CSS auszuliefern.

Hintergrund ist: Ich komme eigentlich aus der Delphi/Objectpascal-Ecke und entwickle zur Zeit eine Webserver-Anwendung für die IIS. Dabei wird das CSS in Form von Dateien an den Client/Browser ausgegeben. Was ich zum jetzigen Zeitpunkt allerdings nicht weiss, ist, ob ich mit dem Request nicht nur Angaben zum UserAgent(Browser) erhalte, sondern auch zu dessen Auflösung und auf welchem Gerät er läuft. Hätte ich solche Angaben, besonders letztere, könnte ich damit entscheiden, welches CSS an speziell dieses Gerät ausgegeben werden soll. Zum Thema schlankes CSS: Da hast du sicher recht: in einer Produktionsversion, die letztenendes ausgeliefert wird, haben nicht verwendete Definitionen oder Kommentare nichts zu suchen. Um mal einen Vergleich zu wagen, was ich unter schlank verstehe(ob nun html, css oder javascript): jQuery gibt es in zwei Versionen: eine mit Formatierungen für eine Entwicklungsumgebung und eine minimierte Version, in der auch überflüssige Leerzeichen entfernt sind. Vor diesem Hintergrund ist meine Überlegung, dem Client nur gerade die Dateien auszuliefern, die er wirklich braucht. Also soll an ein mobiles Gerät nicht der Code für einen 29-Zoll-Bildschirm ausgeliefert werden - bzw. eben für einen Viewport von 1900*12xx und mehr.

Außerdem wird der CSS-Quelltext schnell unübersichtlich, wenn für getrennte Geräte getrenntes CSS erstellt werden soll. Doppelte Anweisungen lassen sich dann nicht vermeiden, wobei die Idee vom schlanken CSS unterlaufen wird.

Wenn alles in einer Datei steht oder sogar unter <Style> eingebunden ist, bestimmt. Andrerseits muss ich mich mit den Mediaquerys erst noch auseinandersetzen. Die sind totales Neuland für mich. Irgendwie wächst der Gedanke, mit Mediaquerys und natürlich Flexboxen könnte mit nur wenigen Zeilen Code sagenhaftes erreicht werden...

damit die beiden kleinen Boxen zusammen gleich hoch sind wie die danebenstehende grosse Box. Wie kann ich das hinkriegen?

Uups, da hab ich mich offenbar erfolgreich missverständlich ausgedrückt. Im Normalfall ist bei meinem Firefox die Sidebar mit der Lesezeichenliste immer aktiv und ergo ist auch der Viewport kleiner, als wennn die Lesezeichen nicht sichtbar wären.

Die beiden Bilder zeigen nun den Viewprort, einmal, wenn die Lesezeichen sichtbar sind, und einmal, wenn sie nicht sichtbar sind. Ziel wäre es, dass beide kleinen Navigationsboxen immer untereinander sind, auch wenn sich der Viewport verbreitert.

Gruss Delbor

[Der Martin]

Hallo,

    nav ul {
      border-sizing: borderbox;
      width: 80%; /*15em */
      margin-left: 10%;
      margin-right: 10%;/*<===*/
      padding: 0.2em;
      border: 1px solid red;
      background-color: silver;
    }

anstatt Breite (width) und Abstände (margin-left, margin-right) festzulegen und dabei Widersprüche zu produzieren, würde ich die margins lieber auf den Wert auto setzen. Dann ist auch border-sizing (du meintest vermutlich box-sizing) überflüssig.

In der Tat: blau ist meine eine Lieblingsfarbe.

Meine auch, aber das ist eine persönliche Präferenz, die bei der Gestaltung einer öffetnlichen Webseite nur eine untergeordnete Rolle spielen sollte.

Blau steht meines Wissens für Kompetenz.

Ach? Das ist mir so noch nicht begegnet. Ich weiß, dass Blautöne farbpsychologisch eher Ruhe und ein insgesamt positives Gefühl vermitteln - nicht umsonst hat VW die bläuliche Instrumentenbeleuchtung vor einigen Jahren mit dem Slogan Blau macht glücklich beworben.
Aber Kompetenz? Das erscheint mir weit hergeholt.

Für mich vermittelt vor allem der sehr intensive Farbübergang von kräftigem Blau zu Türkis eher den Eindruck von Unruhe und Verspieltheit. Farbverläufe ja, gern - aber dezent und entweder zu einem ähnlichen Ton derselben Farbe oder zu einer neutralen Farbe hin (Grau, Weiß).

Was ich zum jetzigen Zeitpunkt allerdings nicht weiss, ist, ob ich mit dem Request nicht nur Angaben zum UserAgent(Browser) erhalte, sondern auch zu dessen Auflösung und auf welchem Gerät er läuft.

Egal ob du diese Informationen im Request vorfindest oder nicht: Keine davon ist verlässlich, und das Vorhandensein nicht garantiert.

Hätte ich solche Angaben, besonders letztere, könnte ich damit entscheiden, welches CSS an speziell dieses Gerät ausgegeben werden soll.

Nein, dafür sind eher CSS Media Queries gedacht.

Vor diesem Hintergrund ist meine Überlegung, dem Client nur gerade die Dateien auszuliefern, die er wirklich braucht. Also soll an ein mobiles Gerät nicht der Code für einen 29-Zoll-Bildschirm ausgeliefert werden - bzw. eben für einen Viewport von 1900*12xx und mehr.

Gut gedacht, aber nicht wirklich umsetzbar. Außerdem fallen ein paar hundert unnötige Zeichen kaum ins Gewicht im Verhältnis zur Gesamt-Datenmenge. Tatsächlich sind z.B. 10kB mehr (HTML, CSS oder JS) weniger "schlimm" als ein zusätzlicher Request.
Wenn du also wirklich wirksam optimieren willst, müsstest du auch die Zahl der Requests minimieren. Also z.B. kein externes Stylesheet, sondern im HTML-Dokument integriert. Oder kleine Bilder nicht als externe Ressourcen, sondern als data-URLs im Markup bzw. im Stylesheet.

Außerdem wird der CSS-Quelltext schnell unübersichtlich, wenn für getrennte Geräte getrenntes CSS erstellt werden soll. Doppelte Anweisungen lassen sich dann nicht vermeiden

Richtig, aber nur für die Eigenschaften, die unterschiedlich sein sollen.

Ciao,
 Martin

[Gunnar Bittersmann]

@@delbor

Beabsichtigt ist: die beiden kleineren Boxen sollen in jedem Fall auf 16:9 und 3:4- Bildschirmen untereinander dargestellt werden. Um die Darstellung auf einem Tablet/iPad/Smartphon kümmere ich mich zu einem späteren Zeitpunkt.

?? iPads haben Displays mit Seitenverhältnis 3:4. iPhones haben ab dem 5er 16:9-Displays.

Wa genau wolltest du damit sagen? Dass du erst für große Bildschirme entwickelst und dich zu einem späteren Zeitpunkt um kleinere kümmerst?

Das kann nur schiefgehen, wie Brad Frost anschaulich illustriert. (Quelle: Brad Frost, The Many Faces of ‘Mobile First’)

Entwickle mobile first – erst für kleine Geräte, um die großen kümmerst du dich später!

Der Grund ist: es soll möglichst schlankes CSS ausgegeben werden. Von daher macht es keinen Sinn, an einen Desktop Handy- oder Tablet-CSS auszuliefern.

Mikrooptimierung an der falschen Stelle. Wenn du Bytes sparen willst (und das solltest du), kümmere dich um die Optimierung der Bilder. Die paar Bytes im Stylesheet sind kaum der Rede wert.

Und wie soll der Server auch wissen, ob an der anderen Seite der Leitung ein Desktop-PC oder Smartphone ist?

User agent sniffing? Vergiss es!

Und falls du an sowas wie

<link rel="stylesheet" href="small.css" media="(max-width: 20em)"/>
<link rel="stylesheet" href="big.css" media="(min-width: 20em)"/>

dachtest: Nein, Browser laden dann beide Stylesheets.

Der Server kann gar nicht wissen, welche Styleregeln der Client braucht. Du kommst nicht drumrum, alle auszuliefern. (Es sei denn, du willst das mit JavaScript verkomplizieren.)

Nachtrag: Hüte dich davor, in Kategorien „Desktop-PC“, „Tablet“, „Smartphone“ zu denken – das führt zu nichts. Die Übergänge sind fließend, mit Schubladen kommt man da nicht weiter.

Breakpoint in media queries sollten sich nach dem Inhalt richten, nicht nach irgendwelchen Geräteklassen. (siehe auch)

LLAP 🖖

[delbor]

Hi zusammen Wie ich versprochen habe, habe ich den aktuellen Code auf Codepen hochgeladen - es ist zwar etwas später geworden als "gegen Abend", aber immer noch besser als gar nicht. Der in Mauerstruktur gehaltene Hintergrund ist allerdings nicht vorhanden, da er aus einer Datei meiner Platte stammt.

Gruss Delbor

[MrMurphy1]

Hallo

Du meinst wahrscheinlich

Delbor codepen-Beispiel

Gruss

MrMurphy

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Und wie soll der Server auch wissen, ob an der anderen Seite der Leitung ein Desktop-PC oder Smartphone ist?

Das will er gar nicht wissen. Und du auch nicht. Hüte dich davor, in Kategorien „Desktop-PC“, „Tablet“, „Smartphone“ zu denken – das führt zu nichts. Die Übergänge sind fließend, mit Schubladen kommt man da nicht weiter.

Breakpoint in media queries sollten sich nach dem Inhalt richten, nicht nach irgendwelchen Geräteklassen. (siehe auch)

LLAP 🖖

[Matthias Apsel]

Hallo delbor,

Doch seither ist im Header zwischen der ersten und der zweiten Zeile ein grössere Abstand, so, als hätte ich da Padding oder Margin >0 zugewiesen - eine Zuweisung gibt es, allerdings explizit auf 0.

Nein.

#Titelbox2 {
    margin-left: 25%;
    margin-right: 25%;
}

Mit Kenntnis des pens.

Bis demnächst
Matthias

[delbor]

Hi Matthias

#Titelbox2 {
    margin-left: 25%;
    margin-right: 25%;
}

Das ist die 2. Zeile mit dem Text "roase.ch". Für die erste Zeile ist dieses CSS zuständig:

 #Titelbox1{
    width: 25%;
...
    margin-left:0%;
    margin-right:75%;
    margin-top: 0px;
    margin-bottom:0px;
    padding: 0px;
}

Die margins sind alle einzeln zugewiesen, aber die für top und bottom sind explizit null. Dasselbe für die zweite Zeile:

#Titelbox2{
    font-size:3.5em;
    text-shadow:
...
...
    margin-top: 0px;
    margin-left:25%;
    margin-right:25%;
    margin-bottom: 0px;
}

Gruss Delbor

[MrMurphy1]

Hallo

Die Lösung deines Problems hast du bereits in der ersten Antwort erhalten:

Insgesamt solltest du zunächst auch die sachlichen Fehler im CSS korrigieren.

Also noch mal ganz deutlich: Dein CSS ist so zerschossen dass die Browser es nicht richtig auslesen können.

So steht dort nicht nur

    font-size:3.5em;
    text-shadow:
...
...
    margin-top: 0px;
    margin-left:25%;
    margin-right:25%;
    margin-bottom: 0px;

sondern

      ...
      border-radius: 50px;
      <!--background--> margin-top: 0px;
      margin-left: 25%;
      ...

Gruss

MrMurphy

[delbor]

Hi MrMurphy

Verstehe ich dich richtig, dass es eine Rolle spielt, in welcher Reihenfolge die Eigenschaften notiert sind?

Gruss Delbor

[MrMurphy1]

Hallo

Verstehe ich dich richtig, dass es eine Rolle spielt, in welcher Reihenfolge die Eigenschaften notiert sind?

Nein, ich habe nichts von der Reihenfolge geschrieben. Die kann eine Rolle spielen, hat aber mit deinen Problemen nichts zu tun.

Sondern von

sachlichen Fehlern

.

CSS Anweisungen werden durch Semikolons abgeschlossen und gleichzeitig getrennt.

Das

<!--background--> margin-top: 0px;

ist zum Beispiel keine gültige CSS-Anweisung. Das

margin-top: 0px;

wäre eine gültige CSS-Anweisung.

Gruss

MrMurphy

[delbor]

Hi MrMurphy

CSS Anweisungen werden durch Semikolons abgeschlossen und gleichzeitig getrennt.

Wie in Delphi und in vielen anderen Programmier- und Scriptsprachen auch.

<!--background--> margin-top: 0px;

Zuerst hat mich irritiert, dass das so - als Zeile - nirgends im Code steht. Das Problem entsteht speziell in dieser HTML-Datei dadurch, dass

• zum einen das CSS in <Style>-Tags eingeschlossen eingebettet ist. Der Grund ist, das meine (Delphi-)IDE und damit auch die Vorschau noch kein HTML5 Versteht. Will ich eine Vorschau, muss ich von Note++ aus den Browser starten.
• ich mir bislang der Unterschiede zwischen CSS- und HTML-Kommentaren nicht bewusst war; ich dachte vielmehr, in CSS könne beides verwendet werden. Und wenn nun der Browser HTML-Kommentare in CSS-Dateien/Tags antrifft, erkennt er dies nicht und hält alles bis nach dem nächsten Semikolon für ungültiges CSS - und ignoriert es. Klar, dass so Anweisungen, die für sich selbst eigentlich richtig geschrieben wären, einfach verloren gehen. Mit sehr unschönen und äusserst 'rätselhaften' Folgen.

Gruss Delbor

[Der Martin]

Hallo,

CSS Anweisungen werden durch Semikolons abgeschlossen und gleichzeitig getrennt.

Wie in Delphi und in vielen anderen Programmier- und Scriptsprachen auch.

ja, zum Beispiel C, Javascript oder PHP. Formal unterscheidet man aber noch, ob das Semikolon eine Anweisung (oder Deklaration) abschließt oder sie von ihresgleichen trennt.

In C beispielsweise schließt das Semikolon eine Anweisung ab; das Semikolon ist als Endezeichen Teil der Anweisung und darf z.B. auch bei der letzten Anweisung vor der schließenden Klammer nicht weggelassen werden.

In CSS dagegen trennt das Semikolon Deklarationen voneinander, vor der schließenden geschweiften Klammer darf(!) es weggelassen werden. Empfehlenswert ist das allerdings nicht, weil man dadurch eine Fehlerquelle schafft: Ergänzt man irgendwann noch eine Zeile, vergisst man allzu leicht, das Semikolon in der Zeile davor zu ergänzen.

<!--background--> margin-top: 0px;

Zuerst hat mich irritiert, dass das so - als Zeile - nirgends im Code steht.

Nun, es könnten auch zwei Zeilen sein, das Problem bliebe dasselbe, weil Zeilenumbrüche in CSS keine Rolle spielen.

Das Problem entsteht speziell in dieser HTML-Datei dadurch, dass

• zum einen das CSS in <Style>-Tags eingeschlossen eingebettet ist. Der Grund ist, das meine (Delphi-)IDE und damit auch die Vorschau noch kein HTML5 Versteht.

Was hat das eine mit dem anderen zu tun?

Will ich eine Vorschau, muss ich von Note++ aus den Browser starten.

Noch besser: Den (die) Browser nebenher offen halten und einfach hin und wieder das Dokument neu laden und beurteilen. Sich nicht auf die Vorschau irgendeiner IDE verlassen, weil sie meistens nicht in allen Punkten den "richtigen" Browsern entsprechen.

• ich mir bislang der Unterschiede zwischen CSS- und HTML-Kommentaren nicht bewusst war; ich dachte vielmehr, in CSS könne beides verwendet werden.

Oh. Das ist allerdings ein Irrtum.

Und wenn nun der Browser HTML-Kommentare in CSS-Dateien/Tags antrifft, erkennt er dies nicht und hält alles bis nach dem nächsten Semikolon für ungültiges CSS - und ignoriert es.

Genau.

So long,
 Martin

[Gunnar Bittersmann]

@@MrMurphy1

CSS Anweisungen werden durch Semikolons abgeschlossen und gleichzeitig getrennt.

Getrennt ja, abgeschlossen stimmt nicht – wie Der Martin schon anmerkte.

Und es gibt keine „CSS-Anweisungen“ – wie Orlando schon so treffend sagte. Das sind Deklarationen; die kann ein Browser umsetzen oder auch nicht.

LLAP 🖖

[Matthias Apsel]

Hallo delbor,

MrMurpys Hinweis schließe ich mich an.

Der Abstand nach oben entsteht (im Firefox) durch das Browser-CSS

p, dl, multicol {
    display: block;
    margin-block-end: 1em;
    margin-block-start: 1em;
}

Abhilfe liefert

#Titelbox2 {
    margin: 0 25%;
}

Insgesamt würde ich den header anders gestalten:

<header>
    <p id="Titelbox1"> Willkommen auf den Seiten von</p>
    <p id="Titelbox2"> roase.ch </p>
    <p id="Titelbox3"> Rogers Oase im Internet</p>
</header>

Überschriften sind sehr wichtige Elemente, wenn du im Internet gefunden werden möchtest.

<header>
    <h1>
         <span>Willkommen auf den Seiten von</span>
         <span>roase.ch</span>
         <span>Rogers Oase im Internet</span>
    </h1>
</header>

header h1 span {
    display: block;
}
header h1 span:nth-of-type(2) {
    text-align: center;
}
header h1 span:nth-of-type(3) {
    text-align: right;
}

liefert dir, was du brauchst - ohne margins oder Breitenangaben.

Den Rest bekommst du auch hin - Was soll die transition da?

header h1 span {
	display: block;
	color: #ffff00;
	font-style: italic;
	border: 2px solid #ffff00;
	font-size: .5em;
        text-shadow: 1px 1px #ff0000, 2px 2px #ff0000, 3px 3px #ff0000;
}
header h1 span:nth-of-type(2) {
	text-align: center;
	background-image: linear-gradient(#0000ff, #00ffff, #00ffff, #0000ff);
	border-width: 1px;
	border-radius: 50px;
	font-size: 1.5em;
}
header h1 span:nth-of-type(3) {
	text-align: right;
}

Jetzt erst kommen einige Breitenangaben sowie ein bisschen padding und margin ins Spiel.

Das ist eine Möglichkeit, es mag bessere geben.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Überschriften sind sehr wichtige Elemente

„Willkommen auf …“ ist kaum eine Überschrift. Wenn es über- ist, dann überflüssig.

wenn du im Internet gefunden werden möchtest.

Ich suche dann mal nach „Willkommen auf …“ —kein Nutzer, jemals

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ich suche dann mal nach „Willkommen auf …“ —kein Nutzer, jemals

Du nicht. Ich nicht. Kein Nutzer. Jemals. Für Suchmaschinen sind Überschriften wichtig. Eine Seite ohne Überschrift wird schlechter gerankt als eine mit.

Mindestens „roase.ch“ sollte als Überschrift erster Ordnung ausgezeichnet sein. „Rogers Oase im Internet“ könnte eine h2 sein. Und „Willkommen auf den Seiten von“ einfach nur ein div? Das ginge auch.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Mindestens „roase.ch“ sollte als Überschrift erster Ordnung ausgezeichnet sein.

Ja, das könnte die Seitenüberschrift sein.

„Rogers Oase im Internet“ könnte eine h2 sein.

Nein! Für welchen Abschnitt sollte das denn eine Überschrift sein?

Die Spec sagt dazu eindeutig: “h2–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the §4.13 Common idioms without dedicated elements section of the specification.”^[1]

Und „Willkommen auf den Seiten von“ einfach nur ein div? Das ginge auch.

Für Textphrasen gibt es in HTML ein spezielles Element: p.

Sieht dann so aus:

<header>
    <p>Willkommen auf den Seiten von</p>
    <h1>roase.ch</h1>
    <p>Rogers Oase im Internet</p>
</header>

LLAP 🖖

---

1. Hervorhebung von mir ↩︎

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Die Spec sagt dazu eindeutig: “h2–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the §4.13 Common idioms without dedicated elements section of the specification.”

Ah, danke.

Für Textphrasen gibt es in HTML ein spezielles Element: p.

Mir wäre das zu wenig Absatz für p ;-) Aber da das auch im Beispiel so gemacht wird, …

Bis demnächst
Matthias

[delbor]

Hi Matthias

Vielen Dank für deine Antwort!

Der Abstand nach oben entsteht (im Firefox) durch das Browser-CSS

p, dl, multicol {
    display: block;
    margin-block-end: 1em;
    margin-block-start: 1em;
}

Abhilfe liefert

#Titelbox2 {
    margin: 0 25%;
}

Ich war mir nicht klar, was das '0' bei der margin-Definition bedeutete, wesshalb ich es eigentlich immer ignorierte.

Allerdings hab ich das mal bei allen Textboxen für margin-bottom, bzw margin-top hinzugefügt. Mit dem Erfolg, dass nicht nur der Abstand zwischen Textbox1 und Textbox2 erhalten blieb, sondern ein solcher auch zwischen Textbox2 und Textbox3 entstand...

Überschriften sind sehr wichtige Elemente, wenn du im Internet gefunden werden möchtest.

Danke für den Hinweis!

Deine Beispiele werde ich mir mal vornehmen. Wichtig ist mir im wesentlichen Zeile 2, weil ich damit ein Logo in Form eines jpegs ersetze.

Grusss Delbor

[Gunnar Bittersmann]

@@delbor

Ich war mir nicht klar, was das '0' bei der margin-Definition bedeutete, wesshalb ich es eigentlich immer ignorierte.

margin ist die Kurzschreibweise für margin-top, margin-right, margin-bottom, margin-left (oben angefangen im Uhrzeigersinn), kann also bis zu vier Angaben (durch Leerzeichen getrennt) als Wert haben.

Wenn eine Angabe fehlt (von hinten angefangen), wird der Wert der gegenüberliegenden Seite genommen:

• Bei 3 Angaben margin: 1em 2em 3em wäre also margin-left = margin-right = 2em.
• Bei 2 Angaben margin: 1em 2em ist auch margin-bottom = margin-top = 1em.
• Bei einer Angabe sind die Abstände an allen Seiten gleich groß.

Für padding, wo das analog ist, hab ich das mal durchexerziert: Folien ab 88

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

margin ist die Kurzschreibweise für margin-top, margin-right, margin-bottom, margin-left (oben angefangen im Uhrzeigersinn)

Ja, „OBus“ als Eselsbrücke „oben beginnend im Uhrzeigersinn“

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

margin ist die Kurzschreibweise für margin-top, margin-right, margin-bottom, margin-left (oben angefangen im Uhrzeigersinn)

Ja, „OBus“ als Eselsbrücke „oben beginnend im Uhrzeigersinn“

Wissen die Kinder von heute denn noch, was ein O-Bus ist? Es fahren ja kaum noch welche.

Fun fact: Nachdem ich mich die vergangenen Jahre in Bologna gewundet hatte, wozu denn die Strippen über den Straßen sein, hab ich dieses Jahr tatsächlich dort einen O-Bus fahren sehen.

Aber wie dem auch sei, wissen die Kinder von heute denn noch, was eine Uhr mit Ziffernblatt ist?

LLAP 🖖

[Der Martin]

Hallo,

Ja, „OBus“ als Eselsbrücke „oben beginnend im Uhrzeigersinn“

Wissen die Kinder von heute denn noch, was ein O-Bus ist? Es fahren ja kaum noch welche.

nur in wenigen Städten, stimmt. Zum Beispiel in Esslingen am Neckar.

Aber wie dem auch sei, wissen die Kinder von heute denn noch, was eine Uhr mit Ziffernblatt ist?

Ob die Kids das heutzutage noch wirklich kennen, weiß ich nicht. Aber ich stand damit schon immer auf Kriegsfuß. Eine Uhr muss, das ist meine Forderung, mit einem schnellen Blick in Sekundenbruchteilen ablesbar und erfassbar sein. Das geht für mich nur mit Digitaluhren, bei den traditionellen Geometrie-Knobelspielen muss ich immer noch bewusst nachdenken.

Aber eine andere Frage: Welche Kinder kennen denn heute noch Wählscheiben-Telefone? ;-)

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Aber ich stand damit schon immer auf Kriegsfuß. Eine Uhr muss, das ist meine Forderung, mit einem schnellen Blick in Sekundenbruchteilen ablesbar und erfassbar sein. Das geht für mich nur mit Digitaluhren, bei den traditionellen Geometrie-Knobelspielen muss ich immer noch bewusst nachdenken.

Wir sprachen darüber.

Aber eine andere Frage: Welche Kinder kennen denn heute noch Wählscheiben-Telefone? ;-)

Kids react…

LLAP 🖖

[delbor]

Hi zusammen

Zuallererst - ich habe eine neue Version des Quelltextes auf Codepen hochgeladen.

Ich hänge diesen Thread bewusst hier an, da ich im vorherigen Beitrag 2 jpegs anhängte, die die 2 kleinen Nav-Elemente mit und ohne aktivierter Sidebar des Browsers und damit mit etwas unterschiedlichen Viewportgrössen zeigen - einmal lagen sie übereinander und dann (ohne Sidebar) ziemlich gestaucht untereinander. Die bisherige Lösung: Die 2 kleinen Nas sind Kinder eines Section-Elementes,und diesem habe ich eine align-items-Klasse verpasst(".verteilt2"). Etwas störend empfinde ich eigentlich nur noch die unterschiedlichen Breiten der 2 linken im Vergleich mit dem rechten NAV, denke aber, dies lösen zu können, indem ich um das linke Section- und das rechte Nav-Element eine weitere Flexbox lege, die ihren beiden Kindern gleich viel Platz einräumt.

Zu meinem andern Problem, den unerklärlichen Abständen zwischen den 3 Zeilen Begrüssungstext, gibt es zwei Besonderheiten: Das Markup im Header besteht im Grunde aus gerade mal 3 Zeilen. Dieses habe ich mal verdoppelt, wobei die eine Hälfte auskommentiert ist. Durch verschieben der Kommentarzeichen ergibt sich ein ganz anderes Erscheinungsbild. Die zweite Besonderheit ist: ich habe dem Header eine klare Höhe zugewiesen, und zwar bewusst eine zu kleine. Das macht deutlich: zumindest der Text der 2. Zeile (roase.ch) ist nicht wirklich Teil des Blockes, der ihn umgibt/umgeben sollte. Das aber heisst auch, das alle drei Zeilen einer Margins-Definition unterliegen, die anderswo im Strukturbaum definiert ist. Wobei die ja durch meine Zuweisungen überschrieben werden sollte...

Gruss Delbor

[Der Martin]

Hallo,

Das Markup im Header besteht im Grunde aus gerade mal 3 Zeilen. Dieses habe ich mal verdoppelt, wobei die eine Hälfte auskommentiert ist. Durch verschieben der Kommentarzeichen ergibt sich ein ganz anderes Erscheinungsbild.

zunächst mal: Interessante Strategie. Wie kommt man auf so eine Idee?

Das unterschiedliche Erscheinungbild könnte daher kommen, dass im Quelltext Leerzeichen zwischen den Elementen stehen, die je nach Lage der Kommentare mal Teil des wirksamen Codes sind, mal nicht. Aber um das mit Sicherheit sagen zu können, müsste man die verschiedenen Varianten des Quellcodes exakt sehen.

Die zweite Besonderheit ist: ich habe dem Header eine klare Höhe zugewiesen, und zwar bewusst eine zu kleine. Das macht deutlich: zumindest der Text der 2. Zeile (roase.ch) ist nicht wirklich Teil des Blockes, der ihn umgibt/umgeben sollte.

Doch, der Inhalt eines Blockelements kann auch über dessen Grenzen hinauslaufen, wenn das Element zu klein für den Inhalt definiert wird.

Das aber heisst auch, das alle drei Zeilen einer Margins-Definition unterliegen, die anderswo im Strukturbaum definiert ist. Wobei die ja durch meine Zuweisungen überschrieben werden sollte...

Konjunktive sind toll, helfen aber meist nicht weiter. Tipp: Welche CSS-Regeln für ein bestimmtes Element wirklich gelten, und woher sie stammen, sieht man gut mit den Entwicklerwerkzeugen der diversen Browser. Auch die Firefox-Extension Firebug ist dafür gut geeignet.

So long,
 Martin

[delbor]

Hi Martin

zunächst mal: Interessante Strategie. Wie kommt man auf so eine Idee?

Keine Ahnung - muss man eine etwas kuriose Socke sein, um auf sowas zu kommen?

Nee, Spass beiseite: Auch wenn ich unter Delphi arbeite, kommentiere ich oft Quelltext aus. Auch um verschiedene Varianten auszutesten. Und da ich wie viele Programmierer "faul" bin, habe ich absolut keine Lust, ein und dasselbe zweimal einzutippen.

Übrigens sind Programmierer nicht wirklich faul - bei Programmmen, die zehn- oder hunderttausende von Quelltextzeilen umfassen, ist ein solches Attribut nur mit einem dicken, fetten und breit grinsenden Smiley zu quittieren ;-)))

Das unterschiedliche Erscheinungbild könnte daher kommen, dass im Quelltext Leerzeichen zwischen den Elementen stehen

Auf Codepen mögen sich Leerzeichen wegen des zur Verfügung stehenden Platzes eingeschlichen haben. Ohne das jetzt nochmal nachgesehen zu haben, stehen im HTML-Code zwischen den Header-Tags keine nicht notwendigen Leerzeichen. Die im Style-Tag stehenden, hier falschen HTML-Kommentare habe ich alle entfernt

Die zweite Besonderheit ist: ich habe dem Header eine klare Höhe zugewiesen, und zwar bewusst eine zu kleine. Das macht deutlich: zumindest der Text der 2. Zeile (roase.ch) ist nicht wirklich Teil des Blockes, der ihn umgibt/umgeben sollte.

Doch, der Inhalt eines Blockelements kann auch über dessen Grenzen hinauslaufen, wenn das Element zu klein für den Inhalt definiert wird.

Wie ich schon andeswo geschrieben habe: ich hab offenbar ein Talent, mich missverständleich auszudrücken. Die 2. Besonderheit ist: Textbox 2 hat eine Höhenangabe erhalten. Und da zeigt sich auch das, was du schreibst: die Box wird sehr schmal und rutscht scheinbar nach oben; in der Tat nach oben rutscht jedoch nur der untere Rand. Das mit dem Header habe ich allerdings auch gemacht, allerdings nur bei mir. Und da wurde der Header an der Topposition gerade mal so gross, dass er seine runden Ecken noch zeichnen konnte. Dabei verschwanden die Inhalte des Headers im "Nirwana" und zeigten sich erst wieder, als ich die Höhenangabe entfernte. Auf Codepen ist diese nicht vorhanden.

Tipp: Welche CSS-Regeln für ein bestimmtes Element wirklich gelten, und woher sie stammen, sieht man gut mit den Entwicklerwerkzeugen der diversen Browser. Auch die Firefox-Extension Firebug ist dafür gut geeignet.

Vielen Dank! An die hätt' ich wahrscheinlich viel zu spät gedacht!

Gruss Delbor

[delbor]

Hi zusammen

Das Problem scheint gelöst - was allerdings dahintersteckt, kann ich nicht nachvollziehen. Die Lösung scheint in der Definition von Textbox2 zu bestehen: Das Original:

#Titelbox2{
    width: 40%;
    margin-top: 0 0px;    /*<== */
    margin-right: auto;
    margin-bottom: 0 0px; /*<== */
    margin-left: auto;
...
}

Die Änderung:

#Titelbox2{
    width: 40%;
    margin-top: 0px;    /*<== */
    margin-right: auto;
    margin-bottom: 0px; /*<== */
    margin-left: auto;
...
}

Oder hab ich bei der ersten Zahl die Einheit vergessen?

Gruss Delbor

[Der Martin]

Hallo,

!Das Problem scheint gelöst - was allerdings dahintersteckt, kann ich nicht nachvollziehen.

ganz einfach: Ungültige CSS-Angaben.

#Titelbox2{
    width: 40%;
    margin-top: 0 0px;    /*<== */
    margin-right: auto;
    margin-bottom: 0 0px; /*<== */
    margin-left: auto;
...
}

Es kam dir nicht seltsam vor, dass für margin-top (ein Parameter) zwei Werte angegeben waren? Dass ein Browser diese Deklaration ignoriert, ist sein gutes Recht.

Oder hab ich bei der ersten Zahl die Einheit vergessen?

Nein. Beim Wert 0 wäre die Einheit völlig egal, denn 0px ist dasselbe wie 0em oder 0mm - nämlich einfach 0.

So long,
 Martin

[Matthias Apsel]

Hallo Der Martin,

Es kam dir nicht seltsam vor, dass für margin-top (ein Parameter) zwei Werte angegeben waren? Dass ein Browser diese Deklaration ignoriert, ist sein gutes Recht.

Und auch seine Pflicht. „Werden in einer Regel Eigenschaften aufgeführt, die das verarbeitendene Programm nicht kennt, so wird diese Eigenschaft ignoriert. Das gilt auch, wenn einer bekannten Eigenschaft ein unbekannter Wert zugewiesen wird. Als unbekannt kann auch eine Eigenschaft oder ein Wert bezeichnet werden, der Fehler enthält.“ (Wiki)

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

was allerdings dahintersteckt, kann ich nicht nachvollziehen.

margin-top: 0 0px;    /*<== */

Was meinst du denn, wofür die beiden Werte stehen sollen? hast du mal im Wiki nachgeschlagen?

Gruß
Kalk