Navigationsteleportation richtig "einstellen"

[Rolf B]

Hallo Siimon,

deine Links springen genau richtig. Aber deine Sections sind durcheinander, was an deinem Gebastel mit float liegt. Ein Element, das gefloatet wird, befindet sich nicht mehr im normalen Flow der Seite. Ein Element, dessen Kind-Elemente allesamt gefloatet sind, hat Höhe 0. Das gilt z.B. für deine Section mit id="Allrad Quattro" (übrigens ein ungünstiger Name für eine id, man kann sie nur mühsam als CSS Selektor verwenden - id="allrad_quattro" wäre handlicher). In dieser Section sind zwei Kinder, beide gefloatet, und weil das Elternelement nun die Höhe 0 hat hängen sie untendrunter und quetschen die Kinder von id="konfigurator" weg.

Lösung 1 (nicht empfohlen): Erzeuge einen Block Formatting Context (BFC). Kind-Elemente eines BFC verlassen diesen nicht, die Allrad Quattro Section würde sich dann entsprechend vergrößern.

Einen BFC kannst Du nicht explizit erzeugen. Es gibt ein paar CSS Eigenschaften, die das implizit tun. Zum Beispiel zoom oder overflow. Gibt den Sections die Eigenschaft zoom:1 oder overflow:hidden. Dann bilden sie einen BFC und die Floats bleiben drin. In deiner Navigation hast Du genau das gemacht.

Lösung 2: Vergiss Float, und mach aus deinen Sections Flexboxen.

Weitere Hinweise:

• Ein Ende-Element </br> ist falsch. Wenn Du es XHTML-mäßig haben willst, dann <br />. In deinem konkreten Anwendungsfall ist es richtig, "</br>" durch "" zu ersetzen. Weil - dahinter kommt nix mehr. Ein Zeilenumbruch am Ende eines <div> ist nicht nötig.
• die Bilder skalieren schlecht (auf einem schmalen Viewport sehen die Autos aus wie frisch aus der Presse). Setze nur die Breite oder nur die Höhe, nicht beides.
• wenn etliche deiner Bilder das gleiche CSS Styling bekommen müssen, ist die CSS Selektion über die ID ineffizient. Gib ihnen eine class und style die Klasse. Es ist vermutlich auch nicht nötig, die Bilder in ein div einzuhüllen.
• Bilder mit 1.1MB Größe werden deine Seite bei einem Mobilanwender unbeliebt machen.
• hast Du die Erlaubnis, Bilder von wallpaperbetter auf deiner Seite einzubinden? Wenn nicht: Das ist zumindest Bandbreitendiebstahl und ggf. auch eine Urheberrechtsverletzung.
• sei semantisch. <div id="top"> möchte eigentlich <header> heißen, und <div id="footer"> möchte ein <footer> sein. <div id="navigation"> wäre gerne ein <nav> Element.

Rolf