Div-Container

[Rolf B]

Hallo Simon,

ein ähnliches Problem hatten wir vor einiger Zeit schonmal; ich finde es nur nicht wieder. Das Problem ist, das position:fixed das Element aus dem normalen Layout-Fluss herausnimmt, d.h. dein div.seite beginnt genau wie dein div.kopfzeile am oberen Rand des Body.

Wenn Du nun auf irgendeinen Anker auf der Seite verlinkst, dann wird dieser Anker hinter den Kopf positioniert. Und deswegen scheint die Positionierung falsch. Aber sie ist genau da, wo sie hin muss.

Du kannst das lösen, indem Du dem Zielelement ein Anhängsel verpasst, dass genausoweit nach oben verschoben ist wie der Header hoch ist. Nachteil: Du musst Dich auf eine Headerhöhe festlegen. Aber wenn Deine Ziele alle Überschriften mit ID sind, oder a mit id, kannst Du im CSS sowas tun (angenommen, deine Kopfzeile ist 3em hoch):

a[id]::before { content:"*"; display:block; width: 0; position:relative; top:-3em;

Und nun zur üblichen Predigt...

Dein div.kopfzeile möchte eigentlich ein <header> Element sein, dein div.seite ein <main> Element und dass es ein position-Attribut von HTML Elementen gibt (was etwas anderes ist als eine position-Eigenschaft in den Styles), davon habe ich noch nichts gehört.

Weiter: Dein <center> Element möchte ein text-align:center Style an der Überschrift sein, dein Tabellen-Layout für das Menü möchte eine Liste sein und Konstrukte wie diese hier: <div class="l2"></div><br></br> schreien nach CSS Ersatz (Margin). Sowas legt man nicht ins HTML. Spätestens dann, wenn Du dein Layout von der Mobilansicht auf die Desktopansicht überträgst, fällt Dir das auf die Füße. Achso, du hast mit der Desktopansicht angefangen und bekommst nachher die Mobilansicht nicht hin? Das geht vielen so. Deswegen „mobile first“.

Und so weiter und so weiter; das ist eine Lernkurve für "modernes HTML", über die wir alle mussten und müssen.

Rolf