Navigationsteleportation richtig "einstellen"

[Siimon S.]

Hey,

ich habe ein Problem mit meiner Website. Also es ist eine One-Page-Website. Ich habe gerade eine Navigationsübersicht erstellt, bei der dann automatisch runter gescrollt wird, nachdem drauf geklickt wurde.

Mein Problem ist aber das die überschrift von dem Beitrag wo man hin gescrollt wird immer unten ist. Das heisst man sieht noch den Beitrag darüber. Ich möchte es aber so das man den Beitrag zu dem Thema auf das man geklickt hat lesen kann.

Quelltext

Html: https://pastebin.com/DMJvBqQL

CSS: https://pastebin.com/knxZf4s2

MFG Simon

[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

[Siimon S.]

Hey,

Danke für die ganzen Tipps! Ich werde mich dran bemühen alles umzusetzen ^^

PS. Das ist für ein Schulprojekt, ich benötige keine Mobilansicht und die Webseite läuft nur auf Localhost, deswegen müsste das eigentlich kein Problem mit den Bildern sein (Hoffe ich ^^ Wird ja nicht ins Internet hochgeladen)

[Rolf B]

Hallo Siimon,

ob Du für ein Schulprojekt diese Bilder verwenden darfst, musst Du überprüfen. Wenn Du es nur deinem Lehrer zeigst, kann es okay sein. Wenn das Projekt bspw. bei einem Tag der offenen Tür vorgezeigt wird, sieht das anders aus.

Für ein besseres Markup habe ich Dir in der letzten Stunde mal einen Vorschlag gemacht:

https://jsfiddle.net/8c4vfbp6/

Man muss die Bilder tatsächlich in ein div stecken. Andernfalls bekommt man die Größe nicht gebändigt (ich zumindest nicht).

Rolf

[Gunnar Bittersmann]

@@Rolf B

id="Allrad Quattro" (übrigens ein ungünstiger Name für eine id

Ich hab’s in der Spec noch nicht gefunden, aber der Validator meint, Whitespace wäre in IDs nicht bloß ungünstig, sondern verboten.

id="allrad_quattro" wäre handlicher)

Der Handlichkeit wegen würde ich keinen Unterstrich, sondern einen Bindestrich verwenden: id="allrad-quattro"

• auf der Tastatur ohne Shift zu erreichen
• _ ist bei Unterstreichung nicht von Leerzeichen zu unterscheiden

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Der Martin]

Hallo,

Der Handlichkeit wegen würde ich keinen Unterstrich, sondern einen Bindestrich verwenden: id="allrad-quattro"

• auf der Tastatur ohne Shift zu erreichen
• _ ist bei Unterstreichung nicht von Leerzeichen zu unterscheiden

... und der Unterstrich sieht sch... ähm, unschön aus. Tatsächlich vermeide ich ihn wo immer möglich aus ästhetischen Gründen. Stattdessen, je nach Kontext, entweder ein Bindestrich, ein Leerzeichen oder gar nichts (lückenlos zusammenschreiben), in diesem Fall evtl. mit CamelCase unterstützt..

Live long and pros healthy,
 Martin