Design-Problem mit <article>

[jakobility]

Hi, ich möchte gerne meine Blogartikel mit <article> kennzeichnen. Wie ich gelesen habe, sollen in dem <article>-Tag möglichst die Überschrift, der Text und die Kommentare enthalten sein. Die Sidebar soll jedoch außerhalb von <article> sein.

Wenn ich das probiere, rutscht nur leider immer meine Sidebar nach unten und kann nicht rechts neben dem Text angezeigt werden. Hier nochmal zur Veranschaulichung, was ich erreichen will:


Ich habe nun als Notlösung erstmal die Sidebar mit in den <article>-Bereich gesetzt und als <aside> gekennzeichnet, was aber auch nicht die beste Lösung ist. Bei <aside> innerhalb von <article> sollte der Text ja zum spezifischen Artikel passen, was aber bei meiner Sidebar nicht der Fall ist. Was schlagt ihr als Lösung vor?

Gruß, Jakob

 

[citybreaker]

Es wäre vielleicht ganz gut etwas Code und Seite zu sehen. Ohne Quellcode können wir keine Tipps geben.

 

[jakobility]

Jo, sorry. Hier der Link zu meiner Seite: TabletCommunity.de | Tablet-News, Apps, Testberichte & mehr

Dort sollte ja der Quellcode zugänglich sein. Falls ihr noch anderen Code, z. B. von einer PHP-Datei benötigt, sagt einfach Bescheid :)

 

[Tronjer]

Das Problem liegt darin, dass durch die <article> Semantik das vorgegebene Grid-Layout durcheinandergebracht wird. Das obere Element nimmt 12 Spalten in Anspruch, das linke untere 8 und das rechte untere 4. Alle .grid Klassen verwenden display: inline stat float: left, weil sich dadurch das clearen ersparen lässt und floats Elemente aus dem Textfluss des Eltern-Containers hebt.

Wenn du nun das obere und das linke untere Element in einem gemeinsamen <article> zusammenfasst, dann hat dieser 12 Spalten und dein <aside> rutscht natürlich darunter. Man könnte <article> und <aside> wiederum in ein übergeordnetes Div packen und etwas mit float oder position: absolute versuchen, aber in dem Fall wird das responsive Design nicht mehr funktionieren.

 

[jakobility]

Hmm, naja so wirklich responsive ist mein Design ja sowieso nicht - wobei ich das auch mal bald in Angriff nehmen wollte.

Also gibt es keine Möglichkeit, die Seiten mit <article> korrekt zu kennzeichnen, ohne dass die Sidebar verschoben wird bzw. die "responsiveness" verloren geht? Ich habe gesehen, dass anscheinend auch große Seiten wie TheVerge das Problem haben und ihre Sidebar innerhalb von <article> platziert haben.

 

[Tronjer]

Ein Div-Container hat immer die Form eines Quadrats. Lege einfach mal einen Border um die einzelnen Elemente.

Wenn der obere Teil im <article> über de volle Seitenbreite geht, dann passt <aside> nicht mehr links daneben. Also müssen die Elemente übereinander geschoben werden. Du könntest auch das <aside> in einem Eltern-Container mit 12er-Grid verpacken und diesen mit position: relative oder absolute und einem Wert für top direkt auf dem <article> positionieren. Vor dem <aside> müssen dann eben 8 Spalten frei bleiben.

Ich würde die Elemente im <article> auf 8 Spalten begrenzen, den Kommentieren-Button nach links setzen und der "überlangen" Headline mal versuchsweise ein whitespace: no-wrap geben, damit sie über die vorgegebene Containerbreite hinausragen kann. Falls das nicht funzt, muss man sich eben was anderes überlegen oder die Zeile notfalls umbrechen.

 

[jakobility]

Danke, habe das <aside> nun mittels position:absolute sowie einem Wert für top und left über <article> gelegt. Das schien mir nun erstmal die einfachste Lösung zu sein.