nicht angemeldet
SELF-Wiki: Boxmodell und logische Eigenschaften
Matthias Scharwies
SELF-Wiki: Boxmodell und logische Eigenschaften
Matthias Scharwies
Rolf B
JürgenB
Der MartinServus!
Zwischenstand: Ich habe jetzt die Kapitel 1-3 fertig:
- CSS/Tutorials/Boxmodell
- Der Text zum klassischen Boxmodell ist umgestellt;
- Beispiel und Text zu box-sizing gekürzt.
- CSS/Tutorials/Boxmodell/Größenangaben
- Beispiele vereinfacht und praxisorientierter
- Fazit, das vor dem Einsatz dieser Eigenschaften warnt 😀
- CSS/Tutorials/Boxmodell/übergroßer_Inhalt
- kontextualisierte, einfache Beispiele
- Fazit, das vom Einsatz abrät
Bitte durchlesen und Verbesserungen vorschlagen!
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
-
Hallo Matthias,
die Beispielkürzung habe ich etwas abgemildert, so dass man jetzt noch alle relevanten Teile für die section sieht. Im Beispielsource habe ich die Styles etwas umsortiert und das aside so geändert, dass es wie eine Bemaßung aussieht. Auf schmalen Viewports habe ich es noch nicht getestet.
Den "Dialog" zwischen Coyier und Suzanne habe ich etwas umgetextet und Suzannes Zitat von der bt2018 übersetzt sowie klarer attributiert.
Dank des Links zum BFC bei "übergroßer Inhalt" haben wir jetzt einen ausführlicheren Artikel zu Blockformatierungskontexten inklusive dreier Beispiele. Dazu hätte ich dann gern eine kritische Rückmeldung. Und ggf. müsste man diesen Artikel jetzt an einen besseren Ort verschieben. Es war mal ein Glossar-Artikel.
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Hallo Matthias,
die Beispielkürzung habe ich etwas abgemildert, so dass man jetzt noch alle relevanten Teile für die section sieht. Im Beispielsource habe ich die Styles etwas umsortiert und das aside so geändert, dass es wie eine Bemaßung aussieht. Auf schmalen Viewports habe ich es noch nicht getestet.
Den "Dialog" zwischen Coyier und Suzanne habe ich etwas umgetextet und Suzannes Zitat von der bt2018 übersetzt sowie klarer attributiert.
ok! gut!
Dank des Links zum BFC bei "übergroßer Inhalt" haben wir jetzt einen ausführlicheren Artikel zu Blockformatierungskontexten inklusive dreier Beispiele. Dazu hätte ich dann gern eine kritische Rückmeldung. Und ggf. müsste man diesen Artikel jetzt an einen besseren Ort verschieben. Es war mal ein Glossar-Artikel.
Das sieht sehr gut aus. Irgendwann werde ich das auch von anderen Stellen (floats) aus verlinken.
Ich finde im HNR passt es ganz gut; auch die Kategorisierung als Glossar-Artikel würde ich so lassen.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
-
-
Servus!
Servus!
Zwischenstand: Ich habe jetzt die Kapitel 1-3 fertig:
Das klassische Boxmodell wird ja um ein logisches Boxmodell erweitert:
Ich habe mir jetzt Gedanken um die Farbgestaltung gemacht und bei Elad Shechter abgeschaut: New CSS Logical Properties!
-
margin sollte keine Füllung haben, da man mit CSS dort keinen background gestalten kann.
-
padding und background sollten zumindest den gleichen Farbton haben, oder sogar die gleiche Farbe?
-
Benötigt man die Pfeile bei margin, border und padding?
-
Sollen die Doppelpfeile bei block-size und inline-size dicker gezeichnet werden?
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Servus!
ein neuer Versuch:
Gegenüberstellung: Boxmodelle
Bitte gebt eure Meinung ab!
Ich habe mir jetzt Gedanken um die Farbgestaltung gemacht und bei Elad Shechter abgeschaut: New CSS Logical Properties!
-
margin sollte keine Füllung haben, da man mit CSS dort keinen background gestalten kann.
-
padding und background sollten zumindest den gleichen Farbton haben, oder sogar die gleiche Farbe?
-
Benötigt man die Pfeile bei margin, border und padding?
-
Sollen die Doppelpfeile bei block-size und inline-size dicker gezeichnet werden?
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Hallo Matthias,
ein neuer Versuch:
Gegenüberstellung: Boxmodelle
gefällt mit gut. Hast du schon für den Inhalt die Farbe
--lightyellow: #fdfcf3;ausprobiert? Oder ist das zu dicht am weiß des margins?Bitte gebt eure Meinung ab!
Ich habe mir jetzt Gedanken um die Farbgestaltung gemacht und bei Elad Shechter abgeschaut: New CSS Logical Properties!
- margin sollte keine Füllung haben, da man mit CSS dort keinen background gestalten kann.
OK.
- padding und background sollten zumindest den gleichen Farbton haben, oder sogar die gleiche Farbe?
Was meinst du damit?
- Benötigt man die Pfeile bei margin, border und padding?
Nein.
- Sollen die Doppelpfeile bei block-size und inline-size dicker gezeichnet werden?
Nein.
Gruß
Jürgen-
Hallo,
zu den Farben sage ich nichts weiter, nur: Ich find' sie gut. Ich weiß aber, dass gerade Beige- und Ockerfarbtöne auf manchen Displays stark verfälscht wiedergegeben werden (pink ist auch so ein Problemkandidat, hier kein Thema).
Aber etwas anderes. Ein Pfeil, der senkrecht auf eine andere Linie zeigt, markiert in technischen Zeichnungen einen Punkt auf eben dieser Linie, die er senkrecht trifft. Daher sind die Bezeichnungen top, right, bottom, left alle um eine Position falsch. Wo top steht, ist eigentlich left, wo left steht, ist bottom, wo bottom steht, ist right, und wo right steht, ist in Wirklichkeit top.
Make the most of your time
Martin--
Es gibt Tage, da gelingt dir einfach alles. Aber keine Sorge, das geht schnell vorbei.-
Servus!
Aber etwas anderes. Ein Pfeil, der senkrecht auf eine andere Linie zeigt, markiert in technischen Zeichnungen einen Punkt auf eben dieser Linie, die er senkrecht trifft. Daher sind die Bezeichnungen top, right, bottom, left alle um eine Position falsch. Wo top steht, ist eigentlich left, wo left steht, ist bottom, wo bottom steht, ist right, und wo right steht, ist in Wirklichkeit top.
Schau dir mal diese exisiterende Grafik an: https://wiki.selfhtml.org/wiki/Datei:Box-Modell.svg
Hier hatte mich gestört, dass top ja eigentlich von oben kommen sollte. Also ist diese Version richtig?
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Hallo,
Aber etwas anderes. Ein Pfeil, der senkrecht auf eine andere Linie zeigt, markiert in technischen Zeichnungen einen Punkt auf eben dieser Linie, die er senkrecht trifft. Daher sind die Bezeichnungen top, right, bottom, left alle um eine Position falsch. Wo top steht, ist eigentlich left, wo left steht, ist bottom, wo bottom steht, ist right, und wo right steht, ist in Wirklichkeit top.
Schau dir mal diese exisiterende Grafik an: https://wiki.selfhtml.org/wiki/Datei:Box-Modell.svg
Hier hatte mich gestört, dass top ja eigentlich von oben kommen sollte. Also ist diese Version richtig?
ja, die ist richtig. Auf der vertikal verlaufenden Linie markiert der top-Pfeil genau den y-Wert top.
Bei einer senkrecht verlaufenden Linie kommt der Bemaßungspfeil waagrecht von der Seite, weil er den y-Wert markiert. Bei horizontalen Linien entsprechend umgekehrt.
Make the most of your time
Martin--
Es gibt Tage, da gelingt dir einfach alles. Aber keine Sorge, das geht schnell vorbei.
-
-
-
Servus!
Hallo Matthias,
ein neuer Versuch:
Gegenüberstellung: Boxmodelle
gefällt mit gut. Hast du schon für den Inhalt die Farbe
--lightyellow: #fdfcf3;ausprobiert? Oder ist das zu dicht am weiß des margins?Bitte gebt eure Meinung ab!
Ich habe mir jetzt Gedanken um die Farbgestaltung gemacht und bei Elad Shechter abgeschaut: New CSS Logical Properties!
- margin sollte keine Füllung haben, da man mit CSS dort keinen background gestalten kann.
OK.
- padding und background sollten zumindest den gleichen Farbton haben, oder sogar die gleiche Farbe?
Was meinst du damit?
Man kann das padding per CSS ja nicht formatieren - deshalb wäre es zu überlegen, dort die gleiche Füll-Farbe wie für die Inhaltsbox (deshalb das Wort background) zu verwenden. Am liebsten wären mir SELF-Gelb und SELF-Blau, wobei mir das Grau des Rahmens auch gefällt.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
-
-
-
Servus!
Das letzte Kapitel CSS/Tutorials/Boxmodell/Logische_Eigenschaften ist vorerst fertig.
Die Boxmodell-Grafiken sind neu, wenn bei Euch die alte Version dargestellt wird, [strg] + [F5] drücken!
Bei 2.2 (gegenüberliegende Randlinien) fällt mir kein lebensnahes Beispiel ein.
Bezüglich der Eigenschaftswerte muss ich noch durch die Referenz durch und Eigenschaften wie float, clear, etc noch ergänzen.
Bitte durchlesen und Verbesserungen vorschlagen!
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
