css Neueinstieg ?

[carstencs]

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display#display:_inline-block

dort in dem css Tutorial, dass übrigens eher schwer zu lesen ist ... anstatt dem HTML Tutorial, wo viel von der Basis her erklärt wird ..

scheint es eher so, dass die Leute die das geschrieben haben, eigentlich ganz anders denken wie die Leute die das entwickelt haben und ganz andere Visionen mit CSS haben.

Also bei dem Beispiel oben, was ja vollkommen korrekt ist(leider kann man den ganzen Code nicht nachvollziehen ) überlappen sich die Boxen nunmal, weil das CSS eben nicht blockbasiert ist. Es gibt zwar Blöcke und man kann um jedes <P> Element oder Listenelement einen Strich zeichnen, aber eigentlich ist es ein Absatz .. also ein Paragraph .. sinnbildlich einfach nur ein neuer Absatz und kein neuer Block ? Ich fange ja damit gerade erst wieder an .. von daher aber so rein didaktisch z.B. mit der Erklärung der Vererbungen usw. das ist alles so kompliziert in den Raum gestellt .. weil <p> oder <span>eben eigentlich kein Block ist .. warum sollte man überhaupt auf den Gedanken kommen, dass da irgendetwas was zu Blöcken gehört vererbt werden sollte ... und ich habe die Basisinformation welches Stylsheet nun zuerst kommt und viele andere Basisinformationen immer noch nicht richtig gefunden.

Mich würde mal interessieren, welche weiteren Visionen CSS betreffend hier so vorherrschen . Manchmal habe ich den Eindruck, dass man CSS am Liebsten auf das Niveau einer Programmiersprache heben möchte.

Meine 2. Frage da anschließend wäre, was ist eigentlich Flexbox? Ist das was CSS-Internes oder eine Art PlugIn - auch softwareübergreifend ?..ich habe das Kapitel noch nicht gelesen, aber bei Google findet man dazu nicht viel .. ist das eher so ein Projekt, dass wieder nicht von allen Browsern unterstützt werden wird? .. früher gab es ja immer diese Browserweichen, und ich glaube einfach weil die Leute das CSS viel zu individuell interpretieren wollten. Vielleicht wird hier in der Sprache auch etwas gesucht, was gar nicht zu finden ist .. was dann natürlich Probleme bereitet .. ist das bei Flexbox auch so? .. oder gehört das definitiv zu CSS und wird von allen Browsern unterstützt ..

[Matthias Scharwies]

Servus!

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display#display:_inline-block

dort in dem css Tutorial, dass übrigens eher schwer zu lesen ist ... anstatt dem HTML Tutorial, wo viel von der Basis her erklärt wird ..

Oops - ich schau mal, was man verbessern kann. Danke, dass Du nicht einfach woanders hingehst - ich werde das Tutorial noch mal anpacken - versprochen!

Also bei dem Beispiel oben, was ja vollkommen korrekt ist(leider kann man den ganzen Code nicht nachvollziehen ) überlappen sich die Boxen nunmal, weil das CSS eben nicht blockbasiert ist. Es gibt zwar Blöcke und man kann um jedes <P> Element oder Listenelement einen Strich zeichnen, aber eigentlich ist es ein Absatz .. also ein Paragraph .. sinnbildlich einfach nur ein neuer Absatz und kein neuer Block ?

Du hast den Schritt vom Block-Element p hin zum inline-Element a nicht nachvollzogen. Der wird dort aber auch nicht genau erklärt! Die überlappenden a sind eben inline, dh. dass sie eben nicht automatisch Blöcke bilden. Um jetzt ein padding oder margin in Zeilenhöhe zu erreichen, musst du diese Elemente auf display: inline-block setzen.

[EDIT] Ich habe die Reihenfolge der Kapitel block und inline umgedreht und bei display:inline-block einen Info-Kasten zu Inline-Elementen (die oben kurz erklärt wurden) eingefügt. [/EDIT]

Mich würde mal interessieren, welche weiteren Visionen CSS betreffend hier so vorherrschen . Manchmal habe ich den Eindruck, dass man CSS am Liebsten auf das Niveau einer Programmiersprache heben möchte.

Nein, CSS war eine Erleichterung, mit der man die Layoutangaben aus den tausendfach wiederholten Attributen und Tabellen in ein zentrales Stylesheet packen konnte.

So weit so gut. Die Monitore wurden größer und man wollte Elemente nebeneinander positionieren. Da wurde dann mit Taschenrechner ein pixelgenaues Layout entworfen, was Breiten, Innen- und Außenabstände in floats gepackt hat. Das wurde perfektioniert, bis plötzlich mit dem iPhone ein Gerät kleiner wurde und die Layouts jetzt responsiv werden mussten.

• HTML/Tutorials/responsive Webdesign/bestehende Webseiten umbauen (Scroll dich mal durch und schau auch die untere Grafik an!)

Meine 2. Frage da anschließend wäre, was ist eigentlich Flexbox? Ist das was CSS-Internes oder eine Art PlugIn - auch softwareübergreifend ?..ich habe das Kapitel noch nicht gelesen, aber bei Google findet man dazu nicht viel ..

Wirklich? Flexbox (und Grid Layout) ist die Antwort auf das Problem des pixelgenauen Layouts. Jetzt musst du nicht mehr rechnen, sondern lässt den Browser mal machen. Er weiß genau, wie viel verfügbarer Platz im Viewport seines Geräts ist. Und dort verteilt er nach deinen ungefähren Vorgaben den Platz auf die einzelnen Rasterelemente.

• Empfehlung: CSS/Tutorials/Grid/mehrspaltige_Layouts

ist das eher so ein Projekt, dass wieder nicht von allen Browsern unterstützt werden wird? ..

Nein, Flexbos und Grid werden mittlerweile von allen modernen Browsern unterstützt, sogar von IE11.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Flexbox (und Grid Layout) ist die Antwort auf das Problem des pixelgenauen Layouts.

??

Wenn du hier das Richtige meinst, hast alles getan, dass das falsch rüberkommt.

Responsive Webdesign – oder kurz: Webdesign^[1] – ist das Gegenteil von von pixelgenauem Design.

Flexbox und Grid sind Werkzeuge. Mit denem kann man sowohl responsive als auch pixelgenaues Design umsetzen.

😷 LLAP

---

1. John Allsopp ↩︎

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Flexbox (und Grid Layout) ist die Antwort auf das Problem des pixelgenauen Layouts.

??

Wenn du hier das Richtige meinst, hast alles getan, dass das falsch rüberkommt.

Responsive Webdesign – oder kurz: Webdesign[^1] – ist das Gegenteil von von pixelgenauem Design.

Flexbox und Grid sind Werkzeuge. Mit denem kann man sowohl responsive als auch pixelgenaues Design umsetzen.

Bei jemandem, der vorher fragte, ob Flexbox ein Plugin für die Programmiersprache CSS wäre, würde ich den Begriff Werkzeug vermeiden.

Lies das verlinkte Tutorial. Und verkürze nicht:

Wirklich? Flexbox (und Grid Layout) ist die Antwort auf das Problem des pixelgenauen Layouts. Jetzt musst du nicht mehr rechnen, sondern lässt den Browser mal machen. Er weiß genau, wie viel verfügbarer Platz im Viewport seines Geräts ist. Und dort verteilt er nach deinen ungefähren Vorgaben den Platz auf die einzelnen Rasterelemente.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display#display:_inline-block

dort in dem css Tutorial, dass übrigens eher schwer zu lesen ist ... anstatt dem HTML Tutorial, wo viel von der Basis her erklärt wird ..

Kennst du CSS/Tutorials/Einstieg?

Dort wird im 5. Kapitel das Box-Modell erklärt und dann gleich auf Flexbox und Grid Layout verwiesen.

Herzliche Grüße

Matthias Scharwies

[carstencs]

also Danke für die Anworten .. selbst bei Wikipedia könnte man den Eindruck bekommen, dass das nochmal was anderes wie CSS ist ...bevor ich das lese, wollte ich halt meine früheren CSS Kenntnisse auffrischen und alles vorher kurz anlesen .. was aber leider nicht so gut geht , also das oberflächliche Brainstorming-Reaktivierunglesen ... bei dem HTML Artikel war das anders, der ist so reingeflutscht ..

die Menschen sind halt unterschiedlich. Insgesamt natürlich danke für diese Seite hier mit der sich sicherlich jemand viel Mühe gegeben und sich sicherlich auch was bei dem Tutorial gedacht hat .. das basiert halt eher auf .. Du muß das einfach selber ausprobieren .. die Bsp .. sind ja meistens nicht richtig nachvollziehbar oder ? wegen dem fehlen HTML code und wenn man dann in dem Unterkapitel ließt würde man natürlich gerne auf die Fachwörter klicken können und auf eine höhere Ordnungsebene Enzyklopiegleich weitergelangen können.

Didaktik heißt ja eigentlich, dass man sich das nicht alles selber zusammensuchen muß ...aber trotzdem Danke für die Webpräsenz ..ich wollte halt nur ein Feedback geben .

Wenn man Glück hat, kriegt man halt so eine ganze Sache schön geordnet serviert ... vom Einfachen zum Komplizierten .. ersteinmal einbißchen Grundsynthax , dass man im weiteren etwas wiedererkennbares hat und dann eben das Gesamtkonzept .. z.B. wie funktioniert ein Text Programm , inline, block .. nicht gleich so diese ganzen Haarspaltereien und dann wo man die Sachen nachschlagen und geordnet kurz nocheinmal nachlesen kann

[Matthias Scharwies]

Servus!

die Bsp .. sind ja meistens nicht richtig nachvollziehbar oder ? wegen dem fehlen HTML code

Hast du mal auf "ausprobieren" geklickt? - Dort sind unsere Live-Beispiele „versteckt“.

und wenn man dann in dem Unterkapitel ließt würde man natürlich gerne auf die Fachwörter klicken können und auf eine höhere Ordnungsebene Enzyklopiegleich weitergelangen können.

Sollte so sein. Wenn ich so einen internen Link vermisse, suche ich den Begriff im SELF-Wiki und ergänze ihn. → Du kannst selbst aktiv werden und unser Werk verbessern! Nur Mut!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

die Bsp .. sind ja meistens nicht richtig nachvollziehbar oder ? wegen dem fehlen HTML code

Hast du mal auf "ausprobieren" geklickt? - Dort sind unsere Live-Beispiele „versteckt“.

Die Anführungszeichen um „versteckt“ sind wohl hier falsch. Nicht typografisch (das sind die um „ausprobieren“), sondern fehl am Platz.

Wenn man das UI erkären muss, ist das ein sicheres Zeichen dafür, dass es schlecht ist. Die Beschriftung „ausprobieren“ ist wohl nicht gut gewählt.

Wenn man

😷 LLAP

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Wenn man das UI erkären muss, ist das ein sicheres Zeichen dafür, dass es schlecht ist. Die Beschriftung „ausprobieren“ ist wohl nicht gut gewählt.

Wie lautet dein Vorschlag?

Bis demnächst
Matthias

[JürgenB]

Hallo Gunnar,

Wenn man das UI erkären muss, ist das ein sicheres Zeichen dafür, dass es schlecht ist. Die Beschriftung „ausprobieren“ ist wohl nicht gut gewählt.

da stimme ich dir zu, es ist nicht so direkt ersichtlich, wie man an den vollständigen Quelltext kommt. Noch schwieriger wird es bei eingebundenen Ressourcen.

Und dieser Thread zeigt auch wieder, das die Browserwerkzeuge nicht hinreichend bekannt sind. Jeder Browser kann alle verwendeten Quelltexte anzeigen. OK, beim Safari muss man das Entwicklermenü erst zuschalten.

Wie wäre es , wenn im ersten Kapitel der Kurse gezeigt wird, wie man im Browser an die Quelltexte, die Konsole und den Seiteninspektor kommt?

@carstencs Kanntest du die Browserfunktionen nicht, oder hast du nur nicht daran gedacht? Als ich vor Jahren mit dem HTML-Zeugs angefangen habe, kannte ich die Funktionen nicht.

Gruß
Jürgen

[Matthias Apsel]

Hallo JürgenB,

Wie wäre es , wenn im ersten Kapitel der Kurse gezeigt wird, wie man im Browser an die Quelltexte, die Konsole und den Seiteninspektor kommt?

ein kleiner Info-Kasten, der allen Tutorials vorangestellt ist? Vielleicht auch nur mit einem Link zu einem kleinen Kapitel dazu?

Bis demnächst
Matthias

[JürgenB]

Hallo Matthias,

ja, das würde reichen.

Gruß
Jürgen

[Der Martin]

Hallo,

Wie wäre es , wenn im ersten Kapitel der Kurse gezeigt wird, wie man im Browser an die Quelltexte, die Konsole und den Seiteninspektor kommt?

ein kleiner Info-Kasten, der allen Tutorials vorangestellt ist? Vielleicht auch nur mit einem Link zu einem kleinen Kapitel dazu?

vielleicht auch ein genereller Einleitungsblock, der die erwarteten Vorkenntnisse umreißt, sowas wie "Diese Themen sollten Ihnen bereits vertraut sein". Dann eine Liste mit höchstens drei, vier Punkten, die zum passenden Grundlagenkapitel verlinken.

Live long and pros healthy,
 Martin

[carstencs]

das war jetzt nicht so ernst gemeint ..oder ?... ich kenn das .. aber ich fände das zu aufwendig .. ich finde in dem CSS Artikel fehlen die Links und ich glaube das liegt daran, dass wenn man hier z.B. so ein Kapitel nimmt ... https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display#Zusammenwirkung_von_display.2C_float_und_position

erkennt man, dass so Links vielleicht nicht weiterführen würde, weil das für jedes HTML Element anders ist.

oder gibt es so etwas irgendwo und ich habs nur nicht gefunden, wo man für jedes HTML Element die möglichen Stylessheets aufrufen kann ?

Den so wichtigen Textflußcharakter von HTML und CSS habe ich ja jetzt kapiert auch wenn das zumindest meines Empfinden hier nicht zur Basisdidaktik gehört .. vielleicht vertue ich mich da ja auch ... aber ich meine so eine Art von Artikel könnte ja auch ganz am Anfang der CSS Überlegungen stehen . Das war halt mein Verdacht, den ich da in der ersten Frage vormulieren wollte, ob das vielleicht daran liegt, dass man sich eben von dem CCS Grundgedanken selbst eher distanziert , aber auch von divs und Tabelllayout und dann quasi eine Vision von CSS als Programmiersprache hat,.. ich meine jetzt nicht verschlimmbessernd .. aber einfach dass man daran glaubt, dass die Probleme eben dadurch entstehen, dass die Sprache nicht komplex genug ist, oder ob man da gleich eine Programmiersprache draus machen möchte ?

die Basis ob man wohl will oder nicht von CSS liegt wahrscheinlich in so Logiken wie bei Textverarbeitungsprogrammen. Ich finde da die Möglichkeiten bei Word z.B. auch schon sehr komplex und verwirrend. vielleicht muß man bei CSS eher von unten nach oben denken ... wenn man jetzt das mit den Blöcken und den anderen Layoutmöglichkeiten die jetzt noch nicht kenne , gleich dort in einen Absatz oder in eine Liste zwingen will ..wird man sicherlich auf eine Baustelle in der Sprache CSS selber treffen und anhand dieser Baustelle CSS erklären zu wollen .. ist bestimmt schwierig ..

[JürgenB]

Hallo Carsten,

das war jetzt nicht so ernst gemeint ..oder ?... ich kenn das .. aber ich fände das zu aufwendig .. ich finde in dem CSS Artikel fehlen die Links und ich glaube das liegt daran, dass wenn man hier z.B. so ein Kapitel nimmt ... https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display#Zusammenwirkung_von_display.2C_float_und_position

doch, meine Frage war schon ernst gemeint. Letztendlich hast du den Eindruck hinterlassen, nicht zu wissen, wie du an die Quelltexte der Beispiele kommst. Und sag jetzt nicht, so etwas wie STRG U wäre zu aufwändig.

Beim Rest habe ich nicht verstanden, worauf du hinauswillst.

Gruß
Jürgen

[carstencs]

wo ein Wille ist .. ist ja auch ein Ziel ... vielleicht ist das Endergebnis gleich, wenn man alles für sich selber klären muß oder wenn man da einfach in die Fußstapfen anderer treten kann.

mir sind da halt auch Zweifel beim CSS Studium hier gekommen, ob man nicht auf so einem Don Quijote Windmühlen Tripp mitläuft. Ist das eigentlich ein Anfänger Tutorial ? Wenn man sowieso ausprobieren soll ... schreibt man selber einfach mal ein paar Styles ... muß man da bei CSS wirklich schon am Anfang an Großprojekte denken oder ist der Weg nicht eher so, dass man wenns zu unordentlich wird dann erst anfängt den Code dort und dort hin zu kopieren und dann erst nach anderen Lösungen sucht... ? Die meisten arbeiten ja mit einem HTML Editor benutzt Ihr wirklich so extra Stylesheets um den Syntax der Stylesheets zu überprüfen ? Das ist quasi wenn die Leute das im Texteditor machen ...?

Wenn das jetzt ein Anfängerturorial ist, sollte dann nicht im Tutorial erstmal ganz oberflächlich drinn stehen wohin und in welcher Reihenfolge die styles abgearbeitet werden .

erst Browsereigene, dann wohl import , dann wohl was oben in der HTML datei unter style steht und dann die Reihenfolge Tags, KLassen, IDs und dann direkt style ="" im Tag.

der Syntax für Klassen, IDs und wie man einzelne Tags ansteuert .

also dieses Zeichen hier > dafür habe ich immer noch keine Syntaxerklärung gefunden und die anderen wenigen Informationen habe ich mir eigentlich irgendwie selber zusammensuchen müssen .. so was kann auch didaktik sein .. das 2. Thema war jetzt ein anderes wie das erste .. aber vielleicht empfinden das andere Leute anders wie ich

[Matthias Scharwies]

Servus!

wo ein Wille ist .. ist ja auch ein Ziel ... vielleicht ist das Endergebnis gleich, wenn man alles für sich selber klären muß oder wenn man da einfach in die Fußstapfen anderer treten kann.

mir sind da halt auch Zweifel beim CSS Studium hier gekommen, ob man nicht auf so einem Don Quijote Windmühlen Tripp mitläuft. Ist das eigentlich ein Anfänger Tutorial ?

Ich hatte Dir um 9:55 folgendes geschrieben:

Kennst du CSS/Tutorials/Einstieg?

Dort wird im 5. Kapitel das Box-Modell erklärt und dann gleich auf Flexbox und Grid Layout verwiesen.

Du fragst wegen eines Kapitels im Kurs:

• CSS/Tutorials/Ausrichtung

Bitte lies den Einleitungsblock. Unterhalb des Inhaltsverzeichnisses gibt es einen grünen Kasten mit einem Verweis auf Flexbox.

"Eine Gestaltung von Webseiten mit diesen Methoden ist heute eher unüblich. Stand der Technik ist eine Umsetzung mit Flexbox oder dem Grid Layout:"

Und jetzt überleg mal, was wir in diesem Fall hätten besser machen können.

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo carstencs,

Wenn das jetzt ein Anfängerturorial ist, sollte dann nicht im Tutorial erstmal ganz oberflächlich drinn stehen wohin und in welcher Reihenfolge die styles abgearbeitet werden .

Das haben wir lange und oft diskutiert und haben uns dagegen entschieden.

der Syntax für Klassen, IDs und wie man einzelne Tags ansteuert .

Tags lassen sich nicht formatieren. http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html

also dieses Zeichen hier > dafür habe ich immer noch keine Syntaxerklärung gefunden

https://wiki.selfhtml.org/wiki/Schnell-Index/CSS

und die anderen wenigen Informationen habe ich mir eigentlich irgendwie selber zusammensuchen müssen

welche denn?

.. so was kann auch didaktik sein ..

Genau. Wie schon geschrieben: Frag konkret nach, wenn du was nicht verstehst.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Tags lassen sich nicht formatieren.

Nicht?

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 400 300'>

vs.

<svg
  xmlns='http://www.w3.org/2000/svg'
  xmlns:xlink='http://www.w3.org/1999/xlink'
  viewBox='0 0 400 300'

>

😜

Und wieso knallt dieses Markdowndingens hier Leerzeilen rein?

😷 LLAP

[Felix Riesterer]

Lieber carstencs,

hier ein Beispiel, wie Dein Verhalten hier im Forum auf mich wirkt:

also dieses Zeichen hier > dafür habe ich immer noch keine Syntaxerklärung gefunden

Das gebe ich in meinen Firefox als "Adresse" ein: css >
Ergebnis-Seite: https://duckduckgo.com/?t=canonical&q=css+%3E&ia=web
Erster Suchtreffer: CSS '>' selector; what is it? - Stack Overflow

Man mag ja mit dem Englischen auf Kriegsfuß stehen, aber da steht das interessante Wort selector drin. Das haben wir hier auch: Selektor. Von dort gelangt man zu CSS/Selektoren.

Dein Nichtfinden wirkt auf mich (ich formuliere nicht allgemein "wirkt auf andere"), als ob Du Dich beim Suchen durchaus mehr anstrengen könntest.

Liebe Grüße

Felix Riesterer

[carstencs]

Danke das war echt nett .. irgendwann hätte ich das aber auch selber gegoogelt

ich hab halt nur so allgemein gemeint .. das ist ganz schön aufwendig sich dort in die Materie wieder einzuarbeiten

bei Eurer HTML Seite ist das einfacher gewesen ..

da stehen halt wahnsinnig viele Nebeninformationen drinn, wo man eben so denkt, um das Rätsel zu lösen benötigt Du nochmal 10 Informationen.

Vielleicht liegt es auch daran dass bei CSS die Brücke ins Englische fehlt .. bei HTML wird das ja auch im Zusammenhang mit der englischen Sprache erklärt ..

[Felix Riesterer]

Lieber carstencs,

irgendwann hätte ich das aber auch selber gegoogelt

ich hab halt nur so allgemein gemeint ..

das vergiftet ein wenig die Stimmung hier. Hier sind freiwillige Helfer, die in ihrer Freizeit dieses Projekt auf die Beine stellen und betreiben. Wenn Du Dich hier so benimmst, was glaubst Du werden die Hilfen sein, die man Dir leistet?

Liebe Grüße

Felix Riesterer

[carstencs]

ich werde hier zu diesen Themen auch nichts mehr schreiben , mich hätte halt nur so in der ersten Frage interessiert wohin die CSS Reise hier so allgemein geht .. in den gesendeten Links da oben? .. da sah der Stylesheet Stil im ersten Augenblick anders aus .. also die haben um das p paragraph-element noch ein <div> mit einer undefinierten classe getan .. und dann die Box mit dem div erzeugt. Bei Euch sind die Boxen immer direkt im p Element ohne div und ihr verändert den Displaystatus des p-elements zu block ?

ist das so empfohlen oder eigentlich ein Hack ?

[Der Martin]

Hallo,

bitte befasse dich doch mal ein bisschen mit CSS-Grundlagen. Einstiegsmöglichkeiten würden dir ja schon genannt.

[...] wohin die CSS Reise hier so allgemein geht .. in den gesendeten Links da oben?

Was für gesendete Links da oben?

also die haben um das p paragraph-element noch ein <div> mit einer undefinierten classe getan .. und dann die Box mit dem div erzeugt.

Ja. Leider hält sich bei manchen Autoren immer noch hartnäckig der Irrglaube, man bräuchte div-Elemente, um sie mit CSS zu stylen.

Bei Euch sind die Boxen immer direkt im p Element ohne div

Ja. Warum auch nicht? Ein p-Element bildet eine Box, einen Block.
Außer man definiert das absichtlich anders.

und ihr verändert den Displaystatus des p-elements zu block ?

Nein. Ein p-Element ist "von Natur aus" ein Blockelement. Ihm per CSS explizit display: block; zuzuweisen ist so, als würdest du einen roten Feuermelder rot anpinseln.

Aber wie gesagt: Grundlagen. Und ich schließe mich den Kameraden an: Verständliche, ordentliche Sätze wären auch nicht schlecht.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Leider hält sich bei manchen Autoren immer noch hartnäckig der Irrglaube, man bräuchte div-Elemente, um sie mit CSS zu stylen.

Noch hartnäckiger hält sich der Irrglaube, man bräuchte Klassen an Elementen, um sie mit CSS zu stylen.

😷 LLAP

[Der Martin]

Hallo,

Leider hält sich bei manchen Autoren immer noch hartnäckig der Irrglaube, man bräuchte div-Elemente, um sie mit CSS zu stylen.

Noch hartnäckiger hält sich der Irrglaube, man bräuchte Klassen an Elementen, um sie mit CSS zu stylen.

in der Tat. Klassen können hilfreich sein, um ein Element (oder mehrere Elemente) für die Anwendung von CSS-Regeln zu selektieren. Klassen nur wegen CSS zu vergeben, ist aber meist der falsche Ansatz.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Leider hält sich bei manchen Autoren immer noch hartnäckig der Irrglaube, man bräuchte div-Elemente, um sie mit CSS zu stylen.

Noch hartnäckiger hält sich der Irrglaube, man bräuchte Klassen an Elementen, um sie mit CSS zu stylen.

in der Tat. Klassen können hilfreich sein, um ein Element (oder mehrere Elemente) für die Anwendung von CSS-Regeln zu selektieren. Klassen nur wegen CSS zu vergeben, ist aber meist der falsche Ansatz.

Der Ansatz von BEM. Der Ansatz von Bootstrap … 🤷‍♂️ *seufz*

😷 LLAP

[Rolf B]

Hallo carstencs,

ich hab halt nur so allgemein gemeint .. das ist ganz schön aufwendig sich dort in die Materie wieder einzuarbeiten

es ist leider so, dass HTML + CSS eine relativ komplexe Angelegenheit geworden ist. Der Werkzeugkasten ist in den letzten 20 Jahren massiv angewachsen, und setzt die Kenntnis etlicher Konzepte voraus. Es ist ziemlich schwierig, dafür eine systematische Darstellung "vom einfachen zum schwierigen" zu finden.

Rolf

[Matthias Apsel]

Hallo carstencs,

Wenn das jetzt ein Anfängerturorial ist, sollte dann nicht im Tutorial erstmal ganz oberflächlich drinn stehen wohin und in welcher Reihenfolge die styles abgearbeitet werden .

Damit widersprichst du dir selbst, denn 10:50 Uhr hast du geschrieben: „vom Einfachen zum Komplizierten .. ersteinmal einbißchen Grundsynthax ,“

Es ist für den Anfang nicht notwendig zu wissen, dass es User- und Autorenstylesheets gibt.

Ich möchte dich zudem bitten, deine Beiträge mit etwas mehr Sorgfalt zu verfassen. Bei dem Durcheinander fällt es mir recht schwer, deine Kernaussagen herauszufiltern. Vollständige Sätze wären da extrem hilfreich.

Bis demnächst
Matthias

[Tabellenkalk]

Hallo Matthias,

fällt es mir recht schwer, deine Kernaussagen herauszufiltern.

Das geht nicht nur dir so…

Gruß
Kalk

[Gunnar Bittersmann]

@@carstencs

oder gibt es so etwas irgendwo und ich habs nur nicht gefunden, wo man für jedes HTML Element die möglichen Stylessheets aufrufen kann ?

Zum Begriff: Ein Stylesheet ist eine Menge von Regeln – das, was zwischen <style> und </style> steht oder in einer externen Datei, die per <link rel="stylesheet" href="…"/> eingebunden wird.

Was du meinst, ist vermutlich: wo man für jedes HTML Element die möglichen CSS-Eigenschaften aufrufen kann.

Das ist einfach geklärt: Du kannst jedem HTML-Element jede CSS-Eigenschaft zuweisen. Sie wirken nur nicht immer. Das hat aber nichts (direkt) mit dem HTML-Element zu tun, sondern mit anderen CSS-Eigenschaften, die dieses Element hat.

So wirken z.B. für ein Element mit display: inline (bei horizontaler Schreibrichtung) margin-left und margin-right; nicht aber margin-top und margin-bottom.

a, em, span, … haben als Grundeinstellung (ein browserinternes Stylesheet) display: inline, d.h. vertiake Abstände wirken nicht. body, p, div, … haben als Grundeinstellung display: block, da wirken vertiake Abstände.

TL;DR: So eine Übersicht, wie du sie dir vorstellst, kann es nicht geben.

😷 LLAP

PS: Du plenkst. Im Deutschen steht vor dem Fragezeichen kein Leerzeichen.

[Felix Riesterer]

Lieber carstencs,

dort in dem css Tutorial, dass übrigens eher schwer zu lesen ist ... anstatt dem HTML Tutorial, wo viel von der Basis her erklärt wird ..

gilt das "schwer zu lesen" grundsätzlich für alle Welt? Deine Formulierung legt das nahe. Meintest Du das?

scheint es eher so, dass die Leute die das geschrieben haben, eigentlich ganz anders denken wie die Leute die das entwickelt haben und ganz andere Visionen mit CSS haben.

Was vermittelt Dir diesen Eindruck? Inwiefern kannst Du das belegen?

Also bei dem Beispiel oben, was ja vollkommen korrekt ist(leider kann man den ganzen Code nicht nachvollziehen )

"Man" kann "den ganzen Code" nicht nachvollziehen? Auch wieder allgemein gültig (für alle Welt)?

weil das CSS eben nicht blockbasiert ist.

"Das CSS"? Sag' mal, wovon schreibst Du hier eigentlich?

Ich fange ja damit gerade erst wieder an .. von daher aber so rein didaktisch z.B. mit der Erklärung der Vererbungen usw. das ist alles so kompliziert in den Raum gestellt ..

So langsam kommt mir Dein Geschreibsel reichlich anmaßend vor. Offensichtlich hast Du persönlich Verständnisschwierigkeiten mit unseren Wiki-Texten zu CSS und den dort angeführten Code-Beispielen. Das aber so zu formulieren, als sei das grundsätzlich nicht gut und für alle Welt schwer zu lesen und deshalb auch für alle Welt schwer verständlich, finde ich wirklich daneben und nicht in Ordnung von Dir!

aber bei Google findet man dazu nicht viel ..

Schon wieder "man". Du persönlich findest dazu nicht viel. Wonach genau hast Du gesucht? Was waren exakt Deine Suchbegriffe und was hattest Du Dir davon erhofft aber nicht erhalten?

und ich glaube einfach weil die Leute das CSS viel zu individuell interpretieren wollten.

Glauben hat bei Beschäftigung mit Technik sicherlich seine Daseinsberechtigung. Aber zum Entwickeln von Software ist das ungeeignet.

Vielleicht wird hier in der Sprache auch etwas gesucht, was gar nicht zu finden ist .. was dann natürlich Probleme bereitet .. ist das bei Flexbox auch so? .. oder gehört das definitiv zu CSS und wird von allen Browsern unterstützt ..

Deine Fragen gehen in eine Richtung, die nicht zielführend ist. Versuche lieber zu verstehen, wie CSS wirklich funktioniert und welche Konzepte (Du erwähntest Flexbox) welche Anwendungsfälle abdecken sollen, um dann zu entscheiden, ob Du Dich damit befassen willst, weil es das Werkzeug Deiner Wahl wird - oder eben nicht.

Wenn Du konkrete Fragen zur Funktionalität oder Syntax von Teilen hast, dann frage genau danach, denn wir sind hier ein Fachforum. Aber dem Verein vorzuwerfen, dass unsere Wiki-Texte und -Beispiele didaktisch ungünstig seien, oder dass unsere erklärenden Texte grundsätzlich schwer verständlich seien, sagt mehr über Dich aus, als über unser Wiki! Also überlege Dir gut, wie Du Kritik üben willst, ohne Gefahr zu laufen, selbst als fragwürdig zu erscheinen.

Liebe Grüße

Felix Riesterer