HTML/CSS Problemchen

[CHRiSNEW]

Ich geh auch von clear aus. Ich wüsste spontan nicht, wo man das sinnvoll einsetzen könnte. Höchstens vielleicht, um Abschnitte in längeren Artikeln aufzuräumen? Aber da gibt's sicherlich eine schönere HTML 5 Strukturhilfe. Und wenn der darüberliegende Container sich auf die Höhe anpassen soll, dann nutzt man ja z.B. overflow auto.

[Retro92]

Wenn ich auf den Seiten mal mehr Content habe, wäre es als Besucher ja doof, immer scrollen zu müssen. Könnte man noch ein zweites Navigationsmenü (zum Springen auf der Seite) an der Seite vertikal einrichten? Gibt es bei den "semantic elements" da nicht noch <aside>?

[mrshadowtux]

Jo richtig.

Früher oder später solltest du auch anfangen, die Seite mit Media Queries responsive zu machen etc. Wenn du magst, kann ich dir das die Tage mal alles per Teamviewer zeigen. Falls da Interesse besteht, schreib mir mal ne PN.

[Retro92]

Ok, ich werde darauf zurückkommen, wenn ich geistig soweit bin
Ich bin bei meiner Websuche zu <aside> auf ein paar Sachen gestoßen, z.B. diese Seite: http://wiki.selfhtml.org/wiki/CSS/Anwend...entrierung
So, wie hier die linke Box angeordnet ist, stelle ich mir das auch vor. Nur mit einer zweiten Navigation, wo man dann die Monate für die Nachrichten auswählen kann etc. Der Befehl <aside> allein wird diese Dreiteilung (bei mir wäre es nur eine linke und die Hauptspalte sein) ja wohl nicht verursachen, oder?

[mrshadowtux]

<aside> ist nur ein Strukturierungselement. Das Design musst du mit CSS machen. <aside> ist auch nicht zwangsläufig für Sidebars und auch nicht jede Sidebar ist ein <aside>. Ich nutze <aside> für so Sachen wie Likebuttons etc, denn für so Nebenkrams ists gedacht. Im Zweifelsfall könnte bei dir auch ein zweites <nav> sinnvoll sein für die Sidebar. Jenachdem ob da Navigation ist oder nicht.

Siehe für den weiteren Sinn von aside: http://html5doctor.com/aside-revisited/

Zitat:The aside element can now represent secondary content when used outside of an article. Keep in mind that aside — and, more generally, secondary content — does not necessarily mean “sidebar”. The style of the content should not dictate the use of the element. For content that is not the primary focus of an article (or page) but is still related to the article (or page), aside is what you need, regardless of its visual design.

[Retro92]

Ok. Ich lese mir das gleich durch. Eine zweites nav wäre schon praktisch. Wie bekäme ich in diesem Fall die Vertikale da rein? Gibt es ein starres float, dass die Boxen nebeneinander bringt? Den Rest könnte ich doch wieder mit margin erreichen.

[mrshadowtux]

Gibt da mehrere Methoden für. Ich würde inline-block oder flexbox nehmen. Bin da jetzt aber zu müde für, morgen erkläre ich da gerne was zu.

[Retro92]

Alles klar, mit deinen Antworten hilfst du mir enorm weiter. Freue mich auf flex-box. Das ist mir jetzt schon häufiger begegnet. Ich schau erstmal selbst...

[Retro92]

Habe mir ein paar Sachen zu flex-box durchgelesen und bin erstmal platt. So viel Kram Beim Thema inline-block bin ich auf folgende Seite http://wiki.selfhtml.org/wiki/CSS/Eigens...ge/display gestoßen. Jetzt muss ich mal schauen, wie ich das integrieren kann.
Wie gesagt stelle ich mir ein einfaches vertikales Menü an der linken Seite vor, mit dem ich bei den News bspw. auf Monate hinweisen kann und in anderen Teilen auf Beiträge.

[mrshadowtux]

Einfachste Form der Flexbox für dein Layout:

Code:

body
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
}

body > nav
{
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

main
{
    -webkit-box-flex: 8;
    -moz-box-flex: 8;
    -webkit-flex: 8;
    -ms-flex: 8;
    flex: 8;
    margin-left: 2em;
}

EDIT: Oder inline-block, das ist kürzer!

Code:

body > nav,
main
{
    display: inline-block;
    vertical-align: top;
}

body > nav
{
    width: 20%;
}