Fixer Menübalken über der Seite

[Eddi]

Hallo,

ich würde gerne über meiner Seite einen schwarzen Balken mit Menüpunkten fixiert sehen, der sich in seiner Breite aber an body anpasst. Angelegt sind:

body {
   width: 70em;
   padding: 0;
   font-size: 16px; <!-- 1 em -->
   line-height:1.4;
   color: black;
   background-color: #FFFFFF;
   align: center;
}

<style>
.blackbox {
  <!--width: 70em; Menü in schwarz -->
  width: 100%;
  height: 2em;
  border: 0em solid;
  padding-top: 1px;
  padding-bottom: 1px;
  vertical-align: middle;
  horizontal-align: middle;
  background: black;
  font-family: Verdana;
  font-size: 1em;
  position: fixed;
}

…

<div class="blackbox">
<img src="MP5blau.jpg">&nbsp&nbsp
<a class="zwei" href="#ziel" target="_blank">
POLITIKBLOG&nbsp</a>
<a class="zwei" href="#auszug" target="_blank">
&nbspWAHLPROGRAMM&nbsp</a>
<a class="zwei" href="#person" target="_blank">
&nbspPERSON&nbsp</a>
<a class="zwei" href="#filme" target="_blank">
&nbspTHEMEN&nbsp</a>
<a class="zwei" href="#alternativen" target="_blank">
&nbspALTERNATIVEN&nbsp</a>
<a class="zwei" href="#anfragen" target="_blank">
&nbspMEHR</a>
</div>

Der schwarze Balken ist aber immer nur so breit wie die Texte darin, nicht wie body.

Warum? Was mache ich falsch?

Eddi

[Gunnar Bittersmann]

@@Eddi

Was mache ich falsch?

Du zeichnest Code nicht als solchen aus. So ist dein Posting schlecht zu lesen und dir kann nicht geholfen werden.

Und du kannst dich nicht damit rausreden, du hättest es nicht gewusst. ☞ mein Posting von vor einer Woche

Bitte korrigiere das. Du kannst nicht immer erwarten, dass es jemand anderes tut.

LLAP 🖖

[Eddi]

Lieber Kollege,

wie bist du denn drauf? So was von Unfreundlichkeit gehört hier nicht her.

"Rausreden" wollen? "Erwarten"? Was sollen diese Unstellungen?

Ich habe ein ganz normales Problem, was nicht gelöst ist, und höflich eine Frage dazu formuliert.

Edgar Gättner

[Gunnar Bittersmann]

@@Eddi

Angelegt sind:

body { width: 70em; padding: 0; font-size: 16px; <!-- 1 em -->

Was mache ich falsch?

Du beachtest bereits gegebene Hinweise nicht.

LLAP 🖖

[Eddi]

Hallo,

du bist ja klug. Vielleicht funktionierten diese nicht???

Edgar Gättner

[Gunnar Bittersmann]

@@Eddi

du bist ja klug.

Nicht wahr?

Vielleicht funktionierten diese nicht???

☞ Was nicht funktioniert

LLAP 🖖

[Gunnar Bittersmann]

@@Eddi

Vielleicht funktionierten diese nicht???

Du lässt keinerlei Anzeichen erkennen, dass du die bereits gegebenen Hinweise umgesetzt hättest. Wie kannst du dann behaupten, dass diese nicht funktionierten?

Dasselbe wie in deinem anderen Thread: Du gibst für .blackbox ist eine feste Breite von width: 70em an und wunderst dich, dass .blackbox eine feste Breite hat.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Du gibst für .blackbox ist eine feste Breite von width: 70em

Das habe ich anders identifiziert. Oder irre ich mich hier?

Rolf

[Gunnar Bittersmann]

@@Rolf B

Du gibst für .blackbox ist eine feste Breite von width: 70em

Das habe ich anders identifiziert. Oder irre ich mich hier?

Vermutlich. Hängt davon ab, was genau du als Syntaxfehler ansiehst und welche width-Angabe du meinst.

<!-- ist nicht der Fehler; aber das sagte ich vor 3 Wochen schon.

LLAP 🖖

[Gunnar Bittersmann]

@@Eddi

ich würde gerne über meiner Seite einen schwarzen Balken mit Menüpunkten fixiert sehen

Wer immer sowas sehen will, sollte bedenken, dass Nutzer Links, Buttons u.a. interaktive Elemente sehen wollen und diese sich nicht bei Tastaturnavigation unter fixierten Headern (bzw. Footern) verstecken dürfen.

Da muss man mit JavaScript ran: Element.scrollIntoRestrictedView() Was auch heißt, Header/Footer erst mit JavaScript zu fixieren.

LLAP 🖖

[Bernd]

Hallo Gunnar,

darf ich fragen was ein

<x-l></x-l>

ist bzw. warum nutzt du dieses? Bei Google kann ich dazu nichts finden.

[Matthias Apsel]

Hallo Bernd,

<x-l></x-l>

ist bzw. warum nutzt du dieses?

https://wiki.selfhtml.org/wiki/HTML/Web_Components/custom_elements

Bis demnächst
Matthias

[Bernd]

Hallo,

danke dir.

[Gunnar Bittersmann]

@@Bernd

darf ich fragen was ein

<x-l></x-l>

ist bzw. warum nutzt du dieses?

Zum Warum:

• Thread
• s.a. Rolfs Antwort
• und mein Posting

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Da muss man mit JavaScript ran:

Das muss man nicht unbedingt, wenn man den Abstand einer Überschrift mit padding statt margin regelt.

h3 {
   margin: 0;
   padding-top: 1em;
}

Das padding gibt an, wieviel Platz für den Überschriftenbereich zu reservieren ist. Wenn zum vorigen Text mehr oder weniger Abstand zu halten ist, kann das mit margin-top korrigiert werden.

<h3 id="ziel">Ziele des Bloggers</h3>

Eine Alternative dazu ist, die id in ein leeres <a> Element in der Überschrift hineinzulegen und dieses über absolute Positionierung um ein paar em nach oben zu schieben.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Das muss man nicht unbedingt, wenn man den Abstand einer Überschrift mit padding statt margin regelt.

Doch. Zu einen, weil du die Höhe des fixierten Headers i.d.R. nicht kennst. In meinem Beispiel weißt du nicht, ob „Land of Hope and Dreams“ in eine Zeile passt oder in 2, 3, … Du kannst also gar nicht wissen, wieviel Padding du da geben müsstest.

Zu anderen, weil es nicht nur Bereiche geht, die als seiteninterner Anker angesprungen werden können, sondern um sämtliche interaktiven Elemente.

Wenn du nicht gerade einen riesigen Bildschirm hast, solltest du in dem Beispiel den Button „All aboard!“ ohne Scrollen nicht sehen. Falls doch, zieh mal das Browserfenster kleiner.

Dann tabbe (Tastaturnavigation mit Tab-Taste) dich durch die Links durch. Ohne JavaScript würde so mitgescrollt werden, dass das fokussierte Element gerade so im Viewport ist, d.h. an der unteren Bildschirmkante – durch den fixierten Footer verdeckt. Beim Zurücknavigieren (Shift + Tab) wäre das fokussierte Element an der oberen Bildschirmkante durch den fixierten Header verdeckt.

Um das fokussierte Element in den sichtbaren Bereich zu bringen, brauchst du JavaScript.

Oder man scrollt nicht über die gesamte Viewporthöhe, sondern nur innerhalb des Bereichs zwischen fixiertem Header und fixiertem Footer – das sieht dann so aus.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Oder man scrollt nicht über die gesamte Viewporthöhe, sondern nur innerhalb des Bereichs zwischen fixiertem Header und fixiertem Footer – das sieht dann so aus.

Was auch nicht unproblematisch ist. Wenn Header und Footer zusammen schon den Viewport ausfüllen, bleibt für den Hauptbereich nichts übrig und der Inhalt ist nicht zu sehen.

min-height für den Hauptbereich führt zu doppelten Scrollbalken – auch nicht das Gelbe vom Ei.

TL;DR: Fixierter Header und/oder Footer sind PITA^[1]. Damit die Seite damit funktioniert (im Sinne von: funktioniert), gibt es einiges zu bedenken – und zu lösen.

LLAP 🖖

---

1. pain in the ass ↩︎

[Gunnar Bittersmann]

@@Gunnar Bittersmann

weil es nicht nur Bereiche geht, die als seiteninterner Anker angesprungen werden können

Aber auch um diese. Die sollten auch in den sichtbaren Bereich gescrollt werden:

	window.addEventListener('hashchange', event => {
		if (location.hash)
		{
			const targetElement = document.querySelector(location.hash);
			
			if (targetElement)
			{
				targetElement.scrollIntoRestrictedView();
			}
		}
	});

Oder gehört die Abfrage, ob scrollIntoRestrictedView() auf einem Element aufgerufen wird, besser in die Methode selbst rein?

sondern um sämtliche interaktiven Elemente.

Damit das main-Element (das durch einen Skip-Link angesprungen werden kann), beim Draufclicken nicht rumspringt, wäre da zu ergänzen:

	document.documentElement.addEventListener('focusin', event => {
		if (event.target.tagName != 'MAIN')
		{
			event.target.scrollIntoRestrictedView();
		}
	});

LLAP 🖖

[ursus contionabundo]

Wer immer sowas sehen will, sollte bedenken, dass Nutzer Links, Buttons u.a. interaktive Elemente sehen wollen und diese sich nicht bei Tastaturnavigation unter fixierten Headern (bzw. Footern) verstecken dürfen.

Da muss man mit JavaScript ran: Element.scrollIntoRestrictedView() Was auch heißt, Header/Footer erst mit JavaScript zu fixieren.

Nice. THX!

[Rolf B]

Hallo ursus,

ich weiß nicht. Die Lösung zum sticky-Problem heißt JavaScript, aber ist sticky die Lösung zum eigentlichen Problem?

Look Gun, no Script@all

Rolf

[ursus contionabundo]

aber ist sticky die Lösung zum eigentlichen Problem?

Das weiß ich nicht, das Überlasse ich gern Euch "UI-Fuzzies", weil ihr das besser wisst als ich "Server-Fuzzie". Mein "nice" war also allgemeiner als auf das "eigentliche Problem bezogen" gemeint. Dieses weil das Skript von Gunnar ein Problem lösen kann, welches ich haben könnte oder sogar schon habe.

[Rolf B]

Hallo ursus,

ich bin kein UI Fuzzie. Ich bin ein Fullstack-Entwickler, also sowas wie ein Rechtsanwalt. Kann (fast) alles, aber nichts richtig. Was mir Gunnar täglich beweist 😂

Disclaimer: Das ist ein Spruch, den ich von einem Anwalt gelernt habe.

Rolf

[Gunnar Bittersmann]

@@ursus contionabundo

Element.scrollIntoRestrictedView() Nice.

Eine Unschönheit hat das Ding aber noch: die Ablage der sticky Elemente in quasi-globalen Variablen document.stickyToTopElement und document.stickyToBottomElement außerhalb der Methode.

Wäre es nicht angebracht, diese als Parameter zu übergeben?

HTMLElement.prototype.scrollIntoRestrictedView = function (stickyElements)
{
	if (stickyElements.top)
	{
		// …
	}
	if (stickyElements.bottom)
	{
		// …
	}
};

document.stickyToTopElement = document.querySelector('header');
document.stickyToBottomElement = document.querySelector('footer');
				
document.documentElement.addEventListener('focusin', event => {
	event.target.scrollIntoRestrictedView({
		top: document.stickyToTopElement,
		bottom: document.stickyToBottomElement
	});
});

LLAP 🖖

[user4711]

Da muss man mit JavaScript ran: Element.scrollIntoRestrictedView() Was auch heißt, Header/Footer erst mit JavaScript zu fixieren.

Eine Frage eines Anfängers hierzu: Wie bekomme ich mein Header-Element nun dazu, auch fixiert zu bleiben? Wenn ich dein JS aus deinem Beispiel in meine Seite einbinde und mein CSS entsprechend deinem Beispiel anpasse (... :root[data-scroll-into-restricted-view-enabled] header ...), dann tut sich nichts - der Header scrollt weiterhin mit.

Im Übrigen verstehe ich auch dein CSS nicht wirklich; :root ist klar, aber was hat es mit den eckigen Klammern auf sich? In der W3-Spezifikation finde ich hierzu nichts. Könntest du hierzu (jedenfalls für mich) etwas Licht ins Dunkel bringen?

[Matthias Apsel]

Hallo user4711,

Im Übrigen verstehe ich auch dein CSS nicht wirklich; :root ist klar, aber was hat es mit den eckigen Klammern auf sich?

https://wiki.selfhtml.org/wiki/CSS/Selektoren/Attributselektor

Bis demnächst
Matthias

[user4711]

https://wiki.selfhtml.org/wiki/CSS/Selektoren/Attributselektor

Danke, das hilft mir weiter.

Das Problem, dass der Header bei mir nicht fixiert bleibt, liegt am Browser und der Nichtunterstützung von position:sticky; im Internet Explorer, mit dem ich gerade getestet hatte ...

[Matthias Apsel]

Hallo user4711,

Das Problem, dass der Header bei mir nicht fixiert bleibt, liegt am Browser und der Nichtunterstützung von position:sticky; im Internet Explorer, mit dem ich gerade getestet hatte ...

header {
  position: fixed;
  position: sticky;
}

Nachfolgende Deklarationen überschreiben vorhergehende. Für den IE ist die zweite Deklaration jedoch ungültig (sticky kennt er nicht), deshalb wird im IE der Header fixiert. Vielleicht ist aber der mitscrollende Header der bessere Fallback.

Bis demnächst
Matthias

[Rolf B]

Hallo Eddi,

du bist offenbar länger nicht hier gewesen, ich nehme an, dass Du deswegen meinen Hinweis wegen der Kommentare im CSS noch nicht umgesetzt hast.

Denn das ist der Grund, warum dein width:100% nicht greift. Bei Dir steht:

.blackbox {
  <!--width: 70em; Menü in schwarz -->
  width: 100%;
  height: 2em;

Auf Grund des CSS Syntaxfehlers, der aus den HTML Kommentaren entsteht, wird bis zum nächsten Semikolon gesprungen, bis der Browser wieder versucht, etwas zu verstehen. Die width-Angabe gehört deshalb noch zum fehlerhaften Teil.

Rolf