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/Anwen…ale_Zentrierung
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/Eigen…Anzeige/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;
}

Alles anzeigen

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

Code

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


body > nav
{
	width: 20%;
}

Alles anzeigen

Retro92

Ok, also würde ich dann im html eine neue nav erstellen. Ginge die auch mit ul und li oder wird die Vertikale durch inline-block erzeugt?

mrshadowtux

Ich glaube du wirfst grad was durcheinander. Das da bezog sich auf ein neues Template. Ich glaube, am sinnvollsten wärs, wenn ich dir das ganze mal live per Teamviewer zeige oder so.

HTML/CSS Problemchen

Jetzt mitmachen!

Benutzer online in diesem Thema