css Neueinstieg ?

[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