CSS Solides und flexibles CSS template

[koffi]

hallo zusammen

ich bin jetzt beim 3ten versuch meine seite (eine art social network) so zu modellieren, dass es gleich in allen browsern angezeigt wird und auch bei zoom nicht zur katastrophe wird.

ich bin zunächst auch immer mit meiner arbeit zufrieden, aber dann kommt mir eine neue idee (zB brauche ich eine leiste o.ä.) und schon bricht das ganze layout zusammen. mein ziel ist es jetzt, ein solides template zu entwerfen, das sich automatisch neuen leisten und containern anpasst, sowohl fixe als auch flexible breiten und längen hat, und trotzdem noch richtig dargestellt wird (in allen browsern und auflösungen). eine verdammt schwierige aufgabe, wie ich herausgefunden habe.

um eine vierte frustration zu vermeiden, dachte ich mir ich frage mal nach rat. wie soll ich es angehen?
die 10000 tutorials die man so findet stoßen irgendwie auch alle an ihre grenzen.

- von HTML5 sectioning habe ich mittlerweile die schnauze voll. ich habe das gefühl dass es die flexibilität meiner seite limitiert. klar, ist super um schnell einfache seiten schön zu gestalten, aber ich hätte es dann doch gerne etwas flexibler und denke es ist besser ich stürze mich wieder in den div-jungle

- was haltet ihr von strukturierung von divs mit css-tables, also display: table / table-row / table cell etc um header, navigation, content und weitere leisten zu modellieren? ist daran etwas auszusetzen? auf diese weise habe ich es das letze mal versucht, mit mäßigem erfolg, aber ich denke wenn ich es nochmal richtig angehe, könnte es besser werden.

- oder soll ich einfach "klassisch" einen haufen divs schreiben, floaten etc? davor graut es mich ehrlichgesagt auch ein bisschen..

ich bin sehr dankbar für alle anregungen und erfahrungen, oder falls jemand ein WIRKLICH gutes tutorial kennt um gute layouts zu entwerfen, immer her damit.

 

[T0a5tbr0t]

Guck dir Flexbox an. Ein paar Beispiele
Man braucht vielleicht etwas Zeit um es zu verstehen, es ist aber ein sehr mächtiges Layout-System. Eigentlich auch das erste wirkliche Layout-System für CSS. Irgendwelche Blöcke mit floats rumzudrücken war immer schon ein Hack aber es ging nicht anders...
Leider ist die Flexbox Unterstüzung der Browser noch etwas mau. Und man brauch haufenweise komische Präfixe. Ich verwende das nur mit "Autoprefixer" Tools.

Ansonsten CSS Selektoren lernen und verstehen. Es gibt nen Prinzip namens "Object Oriented CSS". Guck dir vielleicht auch mal ein paar CSS Frameworks wie Bootstrap an und wie diese Probleme lösen.

Und wenn du es nicht schon machst: Die Entwicklertools der Browser verstehen. Firebug, Devtools in Chrome haben haufenweise kleine Tricks mit denen man schon sehr schnell Rumbasteln kann.

 

[koffi]

an flexbox habe ich mich auch schon versucht. habs vergessen zu erwähnen oder wohl eher verdrängt. ich glaube es hatte zu problemen bei der anzeige auf smartphones geführt, deswegen habe ich die idee vergraben.

spricht etwas gegen die strukturierung mit css display: table (table-row, table-cell...)? oder ist das ähnlich lächerlich wie die strukturierung mit html <table>?
mir scheint display:table die logischste und einfachste lösung..

 

[Daaron]

ich bin jetzt beim 3ten versuch meine seite (eine art social network) so zu modellieren, dass es gleich in allen browsern angezeigt wird und auch bei zoom nicht zur katastrophe wird.

Mediaqueries mit nem Mobile-First - Ansatz nutzen... Wenn du sauber arbeitest, dann reagiert so ein Ansatz extrem flexibel auf neue Komponenten.

- von HTML5 sectioning habe ich mittlerweile die schnauze voll.

Weder <section> noch <article> sind dazu da, deine Inhalte zu zerpflücken, sondern für semantische Strukturierung.... und das geht unabhängig von deinem gewählten Layout.
Und keinesfalls kann oder sollte man <div> stur durch die neuen Elemente ersetzen...

Semantisches HTML ist der wichtigste Punkt von allen. Du kannst jedes beliebige Layout mit vollwertiger Semantik darstellen. Im schlimmsten Fall brauchst du etwas mehr Hirnschmalz.

was haltet ihr von strukturierung von divs mit css-tables, also display: table / table-row / table cell etc um header, navigation, content und weitere leisten zu modellieren?

GAR nichts.
Damit erreichst du keine Flexibilität, du verbaust sie dir statt dessen.

oder soll ich einfach "klassisch" einen haufen divs schreiben, floaten etc? davor graut es mich ehrlichgesagt auch ein bisschen..

Nein. ERST Semantik, DANN Optik... und sturer Einsatz von float ist keine Endlösung. Mit display:inline-block; sowie display:flex; kann man deutlich mehr erreichen.

Ergänzung (19. Dezember 2013)

an flexbox habe ich mich auch schon versucht. habs vergessen zu erwähnen oder wohl eher verdrängt.

Nochmal der Hinweis: Mobile-First - Ansatz wählen...
Dann führt Flex auch zu keinen Problemen...

 

[koffi]

Weder <section> noch <article> sind dazu da, deine Inhalte zu zerpflücken, sondern für semantische Strukturierung.... und das geht unabhängig von deinem gewählten Layout.
Und keinesfalls kann oder sollte man <div> stur durch die neuen Elemente ersetzen...

dann leuchtet mir nicht ganz ein, wozu diese html5 sections genau da sind. warum kann ich sie nicht durch divs ersetzen und selber die kontrolle übernehmen, was mit diesen bereichen passiert?

 

[Speedy.]

HTML5-Tags wie section oder article haben keine Auswirkung auf das Layout, sondern nur auf die Symantik einer Seite. Du kannst einen section-Tag genauso stylen wie einen div-Tag.

Viele machen seit HTML5 den Fehler, alle div-Tags durch die neuen, vermeindlich besseren Tags wie section, article, header usw. zu ersetzen, ohne den Hintergrund zu semantisch wertvollem Markup verstanden zu haben. Davor wollte dich Daaron warnen.

Dein Problem ist ein CSS-Problem, unabhängig von den HTML-Tags. Such dir im Notfall ein gutes Framework wie Twitter Bootstrap oder Foundation, dass nimmt dir viel Arbeit ab.

 

[Daaron]

Was ein <article> ist, ist ja vom Namen her schon recht eindeutig. Um genau zu sein ist ein <article> etwas, dass du losgelöst vom Rest der Seite betrachten könntest, ohne dass es seinen Sinn verliert: Ein Produkt, ein Newseintrag, ein Event, ein User-Kommentar,... Das alles sind <article>.

<section> ist eben KEINE sture "Sektion" des Dokumentes. In erster Linie könnte man <section> als abgeschlossene Einheit innerhalb eines größeren Kontext betrachten. Der offensichtlichste Anwendungsfall für <section> ist natürlich ein "Kapitel" innerhalb eines <articles>. Oder angenommen, du hast einen <article>, der sich um ein Immobilienobjekt dreht, dann wäre die Beschreibung eine Sektion, die Anfahrtsbeschreibung+Karte wäre eine, die Bildergalerie wäre eine,...

Auch <header> und <footer> sind zu mehr gut, als sie halt "oben und unten" an die Seite zu klatschen. Jeder Artikel kann diese Elemente haben, die Quelle eines <blockquote> gibt man in einem <footer> an,...
Und <aside> ist auch nichts, woraus man eine Spalte im Layout macht, sondern ergänzende Informationen, unabhängig von der Anordnung.


Semantische Strukturierung deiner Inhalte sollte immer deine oberste Priorität sein, denn das ist es, worüber deine Seite vermarktet wird. Erst danach fängst du mit CSS an. Funktion >>> Gestaltung