css Neueinstieg ? – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self css Neueinstieg ? Sun, 07 Mar 21 08:19:43 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785360#m1785360 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785360#m1785360 <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display#display:_inline-block" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display#display:_inline-block</a></p> <p>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 ..</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>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 ..</p> css Neueinstieg ? Sun, 07 Mar 21 08:36:24 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785361#m1785361 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785361#m1785361 <p>Servus!</p> <blockquote> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display#display:_inline-block" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display#display:_inline-block</a></p> <p>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 ..</p> </blockquote> <p>Oops - ich schau mal, was man verbessern kann. Danke, dass Du nicht einfach woanders hingehst - ich werde das Tutorial noch mal anpacken - versprochen!</p> <blockquote></blockquote> <blockquote> <p>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 ?</p> </blockquote> <p>Du hast den Schritt vom Block-Element p hin zum inline-Element a nicht nachvollzogen. <strong>Der wird dort aber auch nicht genau erklärt!</strong> 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.</p> <p><strong>[EDIT]</strong> 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. <strong>[/EDIT]</strong></p> <blockquote> <p>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.</p> </blockquote> <p>Nein, CSS war eine Erleichterung, mit der man die Layoutangaben aus den tausendfach wiederholten Attributen und Tabellen in ein zentrales Stylesheet packen konnte.</p> <p>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.</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign/bestehende_Webseiten_umbauen" rel="nofollow noopener noreferrer">HTML/Tutorials/responsive Webdesign/bestehende Webseiten umbauen</a> (Scroll dich mal durch und schau auch die untere Grafik an!)</li> </ul> <blockquote> <p>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 ..</p> </blockquote> <p>Wirklich? <strong>Flexbox</strong> (und <strong>Grid Layout</strong>) 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.</p> <ul> <li><strong>Empfehlung</strong>: <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/mehrspaltige_Layouts" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid/mehrspaltige_Layouts</a></li> </ul> <blockquote> <p>ist das eher so ein Projekt, dass wieder nicht von allen Browsern unterstützt werden wird? ..</p> </blockquote> <p>Nein, Flexbos und Grid werden mittlerweile von allen modernen Browsern unterstützt, sogar von IE11.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> css Neueinstieg ? Sun, 07 Mar 21 08:55:04 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785362#m1785362 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785362#m1785362 <p>Servus!</p> <blockquote> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display#display:_inline-block" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display#display:_inline-block</a></p> <p>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 ..</p> </blockquote> <p>Kennst du <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg" rel="nofollow noopener noreferrer"><strong>CSS/Tutorials/Einstieg</strong></a>?</p> <p>Dort wird im 5. Kapitel das Box-Modell erklärt und dann gleich auf Flexbox und Grid Layout verwiesen.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> css Neueinstieg ? Sun, 07 Mar 21 11:13:54 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785376#m1785376 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785376#m1785376 <p>Lieber carstencs,</p> <blockquote> <p>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 ..</p> </blockquote> <p>gilt das "schwer zu lesen" grundsätzlich für alle Welt? Deine Formulierung legt das nahe. Meintest Du das?</p> <blockquote> <p>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.</p> </blockquote> <p>Was vermittelt Dir diesen Eindruck? Inwiefern kannst Du das belegen?</p> <blockquote> <p>Also bei dem Beispiel oben, was ja vollkommen korrekt ist(leider kann man den ganzen Code nicht nachvollziehen )</p> </blockquote> <p>"Man" kann "den ganzen Code" nicht nachvollziehen? Auch wieder allgemein gültig (für alle Welt)?</p> <blockquote> <p>weil das CSS eben nicht blockbasiert ist.</p> </blockquote> <p>"Das CSS"? Sag' mal, wovon schreibst Du hier eigentlich?</p> <blockquote> <p>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 ..</p> </blockquote> <p>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!</p> <blockquote> <p>aber bei Google findet man dazu nicht viel ..</p> </blockquote> <p>Schon wieder "man". <em>Du</em> <em>persönlich</em> findest dazu nicht viel. Wonach genau hast Du gesucht? Was waren exakt Deine Suchbegriffe und was hattest Du Dir davon erhofft aber nicht erhalten?</p> <blockquote> <p>und ich glaube einfach weil die Leute das CSS viel zu individuell interpretieren wollten.</p> </blockquote> <p>Glauben hat bei Beschäftigung mit Technik sicherlich seine Daseinsberechtigung. Aber zum Entwickeln von Software ist das ungeeignet.</p> <blockquote> <p>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 ..</p> </blockquote> <p>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.</p> <p>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.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> css Neueinstieg ? Sun, 07 Mar 21 10:14:20 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785367#m1785367 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785367#m1785367 <p>@@Matthias Scharwies</p> <blockquote> <p><strong>Flexbox</strong> (und <strong>Grid Layout</strong>) ist die Antwort auf das Problem des pixelgenauen Layouts.</p> </blockquote> <p>??</p> <p>Wenn du hier das Richtige meinst, hast alles getan, dass das falsch rüberkommt.</p> <p>Responsive Webdesign – oder kurz: Webdesign<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> – ist das Gegenteil von von pixelgenauem Design.</p> <p>Flexbox und Grid sind Werkzeuge. Mit denem kann man sowohl responsive als auch pixelgenaues Design umsetzen.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://twitter.com/g16n/status/530307801210683392" rel="nofollow noopener noreferrer">John Allsopp</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> css Neueinstieg ? Sun, 07 Mar 21 09:50:58 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785363#m1785363 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785363#m1785363 <p>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 ..</p> <p>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.</p> <p>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 .</p> <p>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</p> css Neueinstieg ? Sun, 07 Mar 21 09:58:27 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785364#m1785364 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785364#m1785364 <p>Servus!</p> <blockquote> <p>die Bsp .. sind ja meistens nicht richtig nachvollziehbar oder ? wegen dem fehlen HTML code</p> </blockquote> <p>Hast du mal auf "ausprobieren" geklickt? - Dort sind unsere Live-Beispiele „versteckt“.</p> <blockquote> <p>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.</p> </blockquote> <p>Sollte so sein. Wenn ich so einen internen Link vermisse, suche ich den Begriff im SELF-Wiki und ergänze ihn. <strong>→</strong> Du kannst selbst aktiv werden und <strong>unser</strong> Werk verbessern! Nur Mut!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> css Neueinstieg ? Sun, 07 Mar 21 10:05:38 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785365#m1785365 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785365#m1785365 <p>@@Matthias Scharwies</p> <blockquote> <blockquote> <p>die Bsp .. sind ja meistens nicht richtig nachvollziehbar oder ? wegen dem fehlen HTML code</p> </blockquote> <p>Hast du mal auf "ausprobieren" geklickt? - Dort sind unsere Live-Beispiele „versteckt“.</p> </blockquote> <p>Die Anführungszeichen um „versteckt“ sind wohl hier falsch. Nicht typografisch (das sind die um „ausprobieren“), sondern fehl am Platz.</p> <p>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.</p> <p>Wenn man</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> css Neueinstieg ? Sun, 07 Mar 21 10:12:59 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785366#m1785366 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785366#m1785366 <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>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.</p> </blockquote> <p>Wie lautet dein Vorschlag?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> Quelltextansicht Sun, 07 Mar 21 10:22:37 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785369#m1785369 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785369#m1785369 <p>Hallo Gunnar,</p> <blockquote> <p>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.</p> </blockquote> <p>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.</p> <p>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.</p> <p>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?</p> <p><a href="/users/3084" class="mention registered-user" rel="noopener noreferrer">@carstencs</a> 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.</p> <p>Gruß<br> Jürgen</p> css Neueinstieg ? Sun, 07 Mar 21 10:18:38 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785368#m1785368 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785368#m1785368 <p>Servus!</p> <blockquote> <p>@@Matthias Scharwies</p> <blockquote> <p><strong>Flexbox</strong> (und <strong>Grid Layout</strong>) ist die Antwort auf das Problem des pixelgenauen Layouts.</p> </blockquote> <p>??</p> <p>Wenn du hier das Richtige meinst, hast alles getan, dass das falsch rüberkommt.</p> <p>Responsive Webdesign – oder kurz: Webdesign[^1] – ist das Gegenteil von von pixelgenauem Design.</p> <p>Flexbox und Grid sind Werkzeuge. Mit denem kann man sowohl responsive als auch pixelgenaues Design umsetzen.</p> </blockquote> <p>Bei jemandem, der vorher fragte, ob Flexbox ein Plugin für die Programmiersprache CSS wäre, würde ich den Begriff Werkzeug vermeiden.</p> <p>Lies das verlinkte Tutorial. Und verkürze nicht:</p> <blockquote> <blockquote> <p>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.</p> </blockquote> </blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> Quelltextansicht Sun, 07 Mar 21 10:40:47 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785371#m1785371 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785371#m1785371 <p>Hallo JürgenB,</p> <blockquote> <p>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?</p> </blockquote> <p>ein kleiner Info-Kasten, der allen Tutorials vorangestellt ist? Vielleicht auch nur mit einem Link zu einem kleinen Kapitel dazu?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> Quelltextansicht Sun, 07 Mar 21 11:18:08 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785377#m1785377 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785377#m1785377 <p>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 ... <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display#Zusammenwirkung_von_display.2C_float_und_position" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display#Zusammenwirkung_von_display.2C_float_und_position</a></p> <p>erkennt man, dass so Links vielleicht nicht weiterführen würde, weil das für jedes HTML Element anders ist.</p> <p>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 ?</p> <p>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 ?</p> <p>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 ..</p> Quelltextansicht Sun, 07 Mar 21 10:49:26 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785372#m1785372 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785372#m1785372 <p>Hallo Matthias,</p> <p>ja, das würde reichen.</p> <p>Gruß<br> Jürgen</p> Quelltextansicht Sun, 07 Mar 21 11:05:11 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785375#m1785375 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785375#m1785375 <p>Hallo,</p> <blockquote> <blockquote> <p>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?</p> </blockquote> <p>ein kleiner Info-Kasten, der allen Tutorials vorangestellt ist? Vielleicht auch nur mit einem Link zu einem kleinen Kapitel dazu?</p> </blockquote> <p>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.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.<br> (mit freundlichem Dank an <a href="https://forum.selfhtml.org/self/2021/feb/20/telefonbuch-ruckwartssuche/1784617#m1784617" rel="noopener noreferrer">Tabellenkalk</a> für die Ergänzung ) </div> Quelltextansicht Sun, 07 Mar 21 11:40:36 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785380#m1785380 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785380#m1785380 <p>Hallo Carsten,</p> <blockquote> <p>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 ... <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display#Zusammenwirkung_von_display.2C_float_und_position" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display#Zusammenwirkung_von_display.2C_float_und_position</a></p> </blockquote> <p>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.</p> <p>Beim Rest habe ich nicht verstanden, worauf du hinauswillst.</p> <p>Gruß<br> Jürgen</p> Quelltextansicht Sun, 07 Mar 21 15:06:49 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785394#m1785394 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785394#m1785394 <p>@@carstencs</p> <blockquote> <p>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 ?</p> </blockquote> <p>Zum Begriff: Ein <strong>Stylesheet</strong> ist eine Menge von Regeln – das, was zwischen <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span></code> und <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></code> steht oder in einer externen Datei, die per <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>…<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span></code> eingebunden wird.</p> <p>Was du meinst, ist vermutlich: wo man für jedes HTML Element die möglichen CSS-<strong>Eigenschaften</strong> aufrufen kann.</p> <p>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.</p> <p>So wirken z.B. für ein Element mit <code>display: inline</code> (bei horizontaler Schreibrichtung) <code>margin-left</code> und <code>margin-right</code>; nicht aber <code>margin-top</code> und <code>margin-bottom</code>.</p> <p><code>a</code>, <code>em</code>, <code>span</code>, … haben als Grundeinstellung (ein browserinternes Stylesheet) <code>display: inline</code>, d.h. vertiake Abstände wirken nicht. <code>body</code>, <code>p</code>, <code>div</code>, … haben als Grundeinstellung <code>display: block</code>, da wirken vertiake Abstände.</p> <p>TL;DR: So eine Übersicht, wie du sie dir vorstellst, kann es nicht geben.</p> <p> LLAP</p> <p>PS: Du <a href="https://de.wikipedia.org/wiki/Plenk" rel="nofollow noopener noreferrer">plenkst</a>. Im Deutschen steht vor dem Fragezeichen kein Leerzeichen.</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> Quelltextansicht Sun, 07 Mar 21 12:12:47 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785382#m1785382 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785382#m1785382 <p>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.</p> <p>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 ...?</p> <p>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 .</p> <p>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.</p> <p>der Syntax für Klassen, IDs und wie man einzelne Tags ansteuert .</p> <p>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</p> Quelltextansicht Sun, 07 Mar 21 12:16:38 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785383#m1785383 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785383#m1785383 <p>Servus!</p> <blockquote> <p>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.</p> <p>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 ?</p> </blockquote> <p>Ich hatte Dir um <a href="https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785362#m1785362" rel="noopener noreferrer">9:55 </a> folgendes geschrieben:</p> <blockquote> <p>Kennst du <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg" rel="nofollow noopener noreferrer"><strong>CSS/Tutorials/Einstieg</strong></a>?</p> </blockquote> <blockquote> <p>Dort wird im 5. Kapitel das Box-Modell erklärt und dann gleich auf Flexbox und Grid Layout verwiesen.</p> </blockquote> <p>Du fragst wegen eines Kapitels im Kurs:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung" rel="nofollow noopener noreferrer">CSS/Tutorials/Ausrichtung</a></li> </ul> <p>Bitte lies den Einleitungsblock. Unterhalb des Inhaltsverzeichnisses gibt es einen grünen Kasten mit einem Verweis auf Flexbox.</p> <p>"<em>Eine <strong>Gestaltung von Webseiten</strong> mit diesen Methoden ist heute eher unüblich. Stand der Technik ist eine Umsetzung mit Flexbox oder dem Grid Layout:</em>"</p> <p>Und jetzt überleg mal, was wir in diesem Fall hätten besser machen können.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> Quelltextansicht Sun, 07 Mar 21 12:18:49 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785384#m1785384 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785384#m1785384 <p>Hallo carstencs,</p> <blockquote> <p>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 .</p> </blockquote> <p>Das haben wir lange und oft diskutiert und haben uns dagegen entschieden.</p> <blockquote> <p>der Syntax für Klassen, IDs und wie man einzelne Tags ansteuert .</p> </blockquote> <p>Tags lassen sich nicht formatieren. <a href="http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html" rel="nofollow noopener noreferrer">http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html</a></p> <blockquote> <p>also dieses Zeichen hier > dafür habe ich immer noch keine Syntaxerklärung gefunden</p> </blockquote> <p><a href="https://wiki.selfhtml.org/wiki/Schnell-Index/CSS" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/Schnell-Index/CSS</a></p> <blockquote> <p>und die anderen wenigen Informationen habe ich mir eigentlich irgendwie selber zusammensuchen müssen</p> </blockquote> <p>welche denn?</p> <blockquote> <p>.. so was kann auch didaktik sein ..</p> </blockquote> <p>Genau. Wie schon geschrieben: Frag konkret nach, wenn du was nicht verstehst.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> Quelltextansicht Sun, 07 Mar 21 12:21:47 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785385#m1785385 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785385#m1785385 <p>Lieber carstencs,</p> <p>hier ein Beispiel, wie Dein Verhalten hier im Forum auf mich wirkt:</p> <blockquote> <p>also dieses Zeichen hier > dafür habe ich immer noch keine Syntaxerklärung gefunden</p> </blockquote> <p>Das gebe ich in meinen Firefox als "Adresse" ein: <code>css ></code><br> Ergebnis-Seite: <a href="https://duckduckgo.com/?t=canonical&q=css+%3E&ia=web" rel="nofollow noopener noreferrer">https://duckduckgo.com/?t=canonical&q=css+%3E&ia=web</a><br> Erster Suchtreffer: <a href="https://stackoverflow.com/questions/4459821/css-selector-what-is-it" rel="noopener noreferrer">CSS '>' selector; what is it? - Stack Overflow</a></p> <p>Man mag ja mit dem Englischen auf Kriegsfuß stehen, aber da steht das interessante Wort <em>selector</em> drin. Das haben wir hier auch: <a href="https://wiki.selfhtml.org/wiki/Selektor" rel="nofollow noopener noreferrer">Selektor</a>. Von dort gelangt man zu <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren" rel="nofollow noopener noreferrer">CSS/Selektoren</a>.</p> <p>Dein Nichtfinden wirkt auf mich (ich formuliere nicht allgemein "wirkt auf andere"), als ob Du Dich beim Suchen durchaus mehr anstrengen könntest.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> Quelltextansicht Sun, 07 Mar 21 12:50:57 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785387#m1785387 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785387#m1785387 <p>Hallo carstencs,</p> <blockquote> <p>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 .</p> </blockquote> <p>Damit widersprichst du dir selbst, denn 10:50 Uhr hast du geschrieben: „vom Einfachen zum Komplizierten .. ersteinmal einbißchen Grundsynthax ,“</p> <p>Es ist für den Anfang nicht notwendig zu wissen, dass es User- und Autorenstylesheets gibt.</p> <p>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.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> Quelltextansicht Sun, 07 Mar 21 15:16:47 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785395#m1785395 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785395#m1785395 <p>@@Matthias Apsel</p> <blockquote> <p>Tags lassen sich nicht formatieren.</p> </blockquote> <p>Nicht?</p> <pre><code class="block language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>http://www.w3.org/2000/svg<span class="token punctuation">'</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span>xlink</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>http://www.w3.org/1999/xlink<span class="token punctuation">'</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>0 0 400 300<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> </code></pre> <p>vs.</p> <pre><code class="block language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>http://www.w3.org/2000/svg<span class="token punctuation">'</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span>xlink</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>http://www.w3.org/1999/xlink<span class="token punctuation">'</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>0 0 400 300<span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> </code></pre> <p> </p> <p>Und wieso knallt dieses Markdowndingens hier Leerzeilen rein?</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> Quelltextansicht Sun, 07 Mar 21 12:44:46 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785386#m1785386 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785386#m1785386 <p>Danke das war echt nett .. irgendwann hätte ich das aber auch selber gegoogelt</p> <p>ich hab halt nur so allgemein gemeint .. das ist ganz schön aufwendig sich dort in die Materie wieder einzuarbeiten</p> <p>bei Eurer HTML Seite ist das einfacher gewesen ..</p> <p>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.</p> <p>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 ..</p> Quelltextansicht Sun, 07 Mar 21 12:52:16 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785388#m1785388 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785388#m1785388 <p>Lieber carstencs,</p> <blockquote> <p>irgendwann hätte ich das aber auch selber gegoogelt</p> <p>ich hab halt nur so allgemein gemeint ..</p> </blockquote> <p>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?</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> Quelltextansicht Sun, 07 Mar 21 17:32:45 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785400#m1785400 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785400#m1785400 <p>Hallo carstencs,</p> <blockquote> <p>ich hab halt nur so allgemein gemeint .. das ist ganz schön aufwendig sich dort in die Materie wieder einzuarbeiten</p> </blockquote> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Quelltextansicht Sun, 07 Mar 21 13:24:42 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785390#m1785390 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785390#m1785390 <p>Hallo Matthias,</p> <blockquote> <p>fällt es mir recht schwer, deine Kernaussagen herauszufiltern.</p> </blockquote> <p>Das geht nicht nur dir so…</p> <p>Gruß<br> Kalk</p> Quelltextansicht Sun, 07 Mar 21 13:09:57 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785389#m1785389 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785389#m1785389 <p>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 ?</p> <p>ist das so empfohlen oder eigentlich ein Hack ?</p> Quelltextansicht Sun, 07 Mar 21 14:01:29 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785393#m1785393 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785393#m1785393 <p>Hallo,</p> <p>bitte befasse dich doch mal ein bisschen mit CSS-Grundlagen. Einstiegsmöglichkeiten würden dir ja schon genannt.</p> <blockquote> <p>[...] wohin die CSS Reise hier so allgemein geht .. in den gesendeten Links da oben?</p> </blockquote> <p>Was für gesendete Links da oben?</p> <blockquote> <p>also die haben um das p paragraph-element noch ein <div> mit einer undefinierten classe getan .. und dann die Box mit dem div erzeugt.</p> </blockquote> <p>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.</p> <blockquote> <p>Bei Euch sind die Boxen immer direkt im p Element ohne div</p> </blockquote> <p>Ja. Warum auch nicht? Ein p-Element bildet eine Box, einen Block.<br> Außer man definiert das absichtlich anders.</p> <blockquote> <p>und ihr verändert den Displaystatus des p-elements zu block ?</p> </blockquote> <p>Nein. Ein p-Element ist "von Natur aus" ein Blockelement. Ihm per CSS explizit <strong>display: block;</strong> zuzuweisen ist so, als würdest du einen roten Feuermelder rot anpinseln.</p> <p>Aber wie gesagt: Grundlagen. Und ich schließe mich den Kameraden an: Verständliche, ordentliche Sätze wären auch nicht schlecht.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.<br> (mit freundlichem Dank an <a href="https://forum.selfhtml.org/self/2021/feb/20/telefonbuch-ruckwartssuche/1784617#m1784617" rel="noopener noreferrer">Tabellenkalk</a> für die Ergänzung ) </div> Quelltextansicht Sun, 07 Mar 21 15:21:12 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785396#m1785396 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785396#m1785396 <p>@@Der Martin</p> <blockquote> <p>Leider hält sich bei manchen Autoren immer noch hartnäckig der Irrglaube, man bräuchte div-Elemente, um sie mit CSS zu stylen.</p> </blockquote> <p>Noch hartnäckiger hält sich der Irrglaube, man bräuchte Klassen an Elementen, um sie mit CSS zu stylen.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> Quelltextansicht Sun, 07 Mar 21 15:42:35 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785397#m1785397 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785397#m1785397 <p>Hallo,</p> <blockquote> <blockquote> <p>Leider hält sich bei manchen Autoren immer noch hartnäckig der Irrglaube, man bräuchte div-Elemente, um sie mit CSS zu stylen.</p> </blockquote> <p>Noch hartnäckiger hält sich der Irrglaube, man bräuchte Klassen an Elementen, um sie mit CSS zu stylen.</p> </blockquote> <p>in der Tat. Klassen können hilfreich sein, um ein Element (oder mehrere Elemente) für die Anwendung von CSS-Regeln zu selektieren. Klassen <strong>nur</strong> wegen CSS zu vergeben, ist aber meist der falsche Ansatz.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.<br> (mit freundlichem Dank an <a href="https://forum.selfhtml.org/self/2021/feb/20/telefonbuch-ruckwartssuche/1784617#m1784617" rel="noopener noreferrer">Tabellenkalk</a> für die Ergänzung ) </div> Quelltextansicht Sun, 07 Mar 21 15:45:03 Z https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785398#m1785398 https://forum.selfhtml.org/self/2021/mar/07/css-neueinstieg/1785398#m1785398 <p>@@Der Martin</p> <blockquote> <blockquote> <blockquote> <p>Leider hält sich bei manchen Autoren immer noch hartnäckig der Irrglaube, man bräuchte div-Elemente, um sie mit CSS zu stylen.</p> </blockquote> <p>Noch hartnäckiger hält sich der Irrglaube, man bräuchte Klassen an Elementen, um sie mit CSS zu stylen.</p> </blockquote> <p>in der Tat. Klassen können hilfreich sein, um ein Element (oder mehrere Elemente) für die Anwendung von CSS-Regeln zu selektieren. Klassen <strong>nur</strong> wegen CSS zu vergeben, ist aber meist der falsche Ansatz.</p> </blockquote> <p>Der Ansatz von BEM. Der Ansatz von Bootstrap … ‍♂️ *seufz*</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div>