Statt Frames?

[Thomas Fehige]

Hallo zusammen,

nach langer Zeit muss/darf ich mal wieder eine kleine Website basteln. Früher bin ich mit Frames halbwegs zurechtgekommen, sehe aber ein, dass die zu recht als "Pfui" gelten. Nun quäle ich mich mit einem Ersatzkonstrukt ab. Es geht um dies:

Alle Seiten sollen eine fixierte Kopfzeile mit Logo bekommen (<header>), darunter eine schmale waagerechte Menüleiste (<nav>), darunter der Bereich für den Inhalt (<main>). <main> soll den gesamten verfügbaren Platz einnehmen und bei Bedarf einen vertikalen Scrollbar bekommen. Ich hoffe, dass ich das mit HTML und CSS aber ohne Javascript-Programmierung hinbekommen kann. Geht das?

Beste Grüße -- Thomas

[Der Martin]

Hallo,

nach langer Zeit muss/darf ich mal wieder eine kleine Website basteln. Früher bin ich mit Frames halbwegs zurechtgekommen, sehe aber ein, dass die zu recht als "Pfui" gelten.

naja, es gibt ein paar wenige Fälle, wo sie sinnvoll anwendbar sind; so wie man sie früher zur Aufteilung der Seite verwendet hat, ist es aber tatsächlich eher ungünstig. Über die Nachteile hast du vermutlich auch schon gelesen.

Alle Seiten sollen eine fixierte Kopfzeile mit Logo bekommen (<header>), darunter eine schmale waagerechte Menüleiste (<nav>), darunter der Bereich für den Inhalt (<main>). <main> soll den gesamten verfügbaren Platz einnehmen und bei Bedarf einen vertikalen Scrollbar bekommen. Ich hoffe, dass ich das mit HTML und CSS aber ohne Javascript-Programmierung hinbekommen kann. Geht das?

Ja. Fixierte, nicht mit-scrollende Elemente bekommst du mit position:fixed, und Container mit eigenem Scrolling bekommst du, indem du ihnen eine definierte Größe gibst und mit overflow:auto oder overflow:scroll deren eigenes Scroll-Verhalten festlegst.

ABER: So praktisch es erscheinen mag, z.B. die Navigation immer erreichbar zu haben - fixierte Elemente können auch lästig oder gar problematisch sein. Nämlich dann, wenn sie einen großen Anteil des Browserfensters beanspruchen. Und da du nicht vorhersehen kannst, wie klein der Bildschirm bzw. das Browserfenster bei deinen Besuchern ist (denk an Mobilgeräte), bleibt eventuell nur noch ein winziges Gucklock für den eigentlichen Inhalt übrig, im Extremfall gar nichts. Ich würde daher von fixierten Elementen abraten und stattdessen herkömmlich die gesamte Seite scrollen lassen.

So long,
 Martin

[Thomas Fehige]

Ja. Fixierte, nicht mit-scrollende Elemente bekommst du mit position:fixed, und Container mit eigenem Scrolling bekommst du, indem du ihnen eine definierte Größe gibst und mit overflow:auto oder overflow:scroll deren eigenes Scroll-Verhalten festlegst.

OK, position:fixed hatte ich gefunden. Und dass ich bspw. die Höhe und Schriftgröße des Headers an die Viewport-Höhe anpassen kann. Das Problem ist, wie der <main>-Container seine "definierte Größe" findet. Die Höhe des Headers ist ja nicht fix sondern variabel. Das Menü kann bei engem Bildschirm oder großer Schrift einen Zeilenumbruch "erleiden", der User kann die Schriftgröße anpassen usw. In dem Beispiel hier: http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/feststehender_footer wird ein schriftgrößenabhängiger oberer Abstand für <main> eingegeben. Das ist ja m.E. ziemlich gefudelt, weil es sich eben nicht unterschiedlichen Displays anpassen kann.

ABER: So praktisch es erscheinen mag, z.B. die Navigation immer erreichbar zu haben - fixierte Elemente können auch lästig oder gar problematisch sein. Nämlich dann, wenn sie einen großen Anteil des Browserfensters beanspruchen. Und da du nicht vorhersehen kannst, wie klein der Bildschirm bzw. das Browserfenster bei deinen Besuchern ist (denk an Mobilgeräte), bleibt eventuell nur noch ein winziges Gucklock für den eigentlichen Inhalt übrig, im Extremfall gar nichts. Ich würde daher von fixierten Elementen abraten und stattdessen herkömmlich die gesamte Seite scrollen lassen.

Gut, ich könnte die fixen Elemente mit Größen- und Mindestgrößenangaben halbwegs an die wechselnden Gegebenheiten anzupassen versuchen. Aber letztlich ist die schlichte Methode eben wohl auch die, die am wenigsten graue Haare produziert. Schade.

Dank + beste Grüße -- Thomas

[Fred]

Mahlzeit,

Das ist ja m.E. ziemlich gefudelt, weil es sich eben nicht unterschiedlichen Displays anpassen kann.

Schau dir doch mal Display:flex; an...

Fred

[Thomas Fehige]

Schau dir doch mal Display:flex; an...

Ja, das geht wirklich. Ich hatte da einige Zeit ein ziemliches Brett vorm Kopp, aber es geht letztlich sehr sparsam und elegant:

body{
	display:flex;
	flex-direction: column;
	height:100vh;
}
header{
	flex:0;
}
nav{
	display:flex;
	flex-direction: row;
	flex:0;
}
nav p {
	flex:0;
}
main{
	flex:1;
	overflow:auto;
}

Mächtig cool, danke für den Hinweis! Thomas

[Matthias Apsel]

Hallo Thomas Fehige,

Was genau klappt beim Code-Formatieren nicht so, wie du es denkst?

Bis demnächst
Matthias

[Thomas Fehige]

Hi Matthias,

Was genau klappt beim Code-Formatieren nicht so, wie du es denkst?

ich hatte vor und nach den drei Tilden keine Leerzeile, bloß einen Zeilenumbruch; nachdem ich den Fehler gefunden hatte, habe ich mein PS vergessen und "speichern" gedrückt. Das PS habe ich entfernt sobald ich das bemerkt hatte. Evtl. steht das mit der Leerzeile ja irgendwo in der Anleitung und ich hab's übersehen.

Dank + beste Grüße -- Thomas

[Thomas Fehige]

Schau dir doch mal Display:flex; an... Ja, das geht wirklich. Ich hatte da einige Zeit ein ziemliches Brett vorm Kopp, aber es geht letztlich sehr sparsam und elegant: ...

Deutlich zu früh gefreut. Im Internet-Explorer 11 gibt das Chaos: header, nav und main liegen sämtlich an der Oberkante des Viewports ausgerichtet und nur main zeigt irgendwelche Anzeichen von css-Formatierung. In Chrome und Opera werden header und nav überhaupt nicht angezeigt.

Wenn ich das richtig sehe, verstehen IE, Chrome und Opera die Angabe flex:0; nicht. Das habe ich für header und nav angegeben, weil die ja ihre "natürliche" Höhe haben und nicht elastisch sein sollen. Der Firefox versteht mich das auch ganz richtig; vom W3C-CSS-Validator kommen auch keine Klagen. Wer weiß Rat?

Minimalbeispiel

css dazu

Beste Grüße -- Thomas

[Fred]

HI,

Wer weiß Rat?

Setz mal html und body auf 100% (Achtung margins und paddings kommen noch dazu, ggf Boxsizing), nimm mal die Angaben für flex bei header und nav raus. Safari benötig noch den vendor prefix -webkit-

Fred

[Fred]

Hi,

sonst schau mal hier, aber nicht verwirren lassen, da stehen div und aside flexibel nebeneinander im body und innerhalb von div stehen header, nav, main und footer flexibel untereinander...

Klinke mich jetzt aus und gehe ins Wochenende...

Fred

[Thomas Fehige]

Hi Fred,

Setz mal html und body auf 100% (Achtung margins und paddings kommen noch dazu, ggf Boxsizing), nimm mal die Angaben für flex bei header und nav raus.

Jau, das klappt! Jedenfalls in Chromium. Morgen probiere ich den IE, bin gerade am Linux-Rechner.

Safari benötig noch den vendor prefix -webkit-

Danke für die Erinnerung.

Männer haben auch Gefühle. Hunger und Durst zum Beispiel.

Wie wahr. Schönes Wochenende -- Thomas