Seitenanker unter Objekt springen lassen

[achisto02]

Hallo,

ich steh gerade etwas auf dem Schlauch. Ich bin gerade dabei eine ganz einfache Webseite mittels HTML/CSS/JS und Bootstrap zu erstellen.
Das Problem dabei ist, meine Navigation bzw. der komplette head-Container. Dieser wurde mit den Bootstrap-Klassen am oberen Rand fixiert. Die einzelnen Navigationspunkte "springen" nun zum entsprechenden Seitenanker auf der Seite. Die Seite springt allerdings immer zurück zum anfang des Browserfenster am oberen Rand. Der Text wird dadurch von head-Container teilweise verdeckt.

Gibt es da eine Lösung, wie ich die Seite unter den besagten Container springen lasse? Habs mit padding und margin schon ausprobiert, hat leider nicht den gewünschten Erfolg gebracht.

Ich hab die Seite leider nur lokal auf dem Rechner, sonst könnte ich es euch zeigen um das Problem zu verdeutlichen.

Vielen Dank im Voraus
Mit freundlichen Grüßen

 

[Myhar]

Ich hab die Seite leider nur lokal auf dem Rechner, sonst könnte ich es euch zeigen um das Problem zu verdeutlichen.

Wenn du willst, dass man dir helfen kann, dann erstelle einen prototypen und lade ihn irgendwo hoch oder erstelle ein jsfiddle, anhand dessen man dein Problem nachvollziehen kann.
Anhand deiner Beschreibung kann ich deni Problem nämlich nicht genau nachvollziehen.

 

[achisto02]

Hallo Myhar,

danke für die Antwort. Ich hab mal das Grundgerüst in jsfiddle nachgebaut.
Hier der Link dazu: http://jsfiddle.net/me5rmf1e/2/

dort erkennt man das Problem wenn man auf einen der Links klickt.

Vielen Dank

 

[Myhar]

Danke für den Link damit fängt man schon mehr an.
aus Zeitmangel hier erst mal ein paar kleine Denkanstöße, frühestens morgen kann ich es mir genauer ansehen:
Reicht es, wenn du deinem Contentbereich ein padding von oben gibst? Dann überlappt der nav-Bereich nicht den Textbereich.
Sorry nochmal für die kurze Antwort, wie gesagt ab morgen dann frühesten mehr.

 

[achisto02]

Ich bin dir für jeden Denkanstoss dankbar. Wie gesagt, ich steh gerade komplett auf den Schlauch.

Reicht es, wenn du deinem Contentbereich ein padding von oben gibst? Dann überlappt der nav-Bereich nicht den Textbereich.

Leider nicht. Ich hab meinem main-Container der den kompletten Inhaltsbereich umschließt mit einem padding-top ausgestattet. Hatte aber keine Wirkung.
Ich danke für jedenfalls schonmal für die Antworten und schau mal ob ich bis morgen eine Lösung finde, falls ja werde ich mich wieder melden.

 

[ebene11]

Du kannst dem jeweils aktuellen Bereich ein padding mitgeben, z.B. so:

#contact:target {
padding-top: 5em;
}

 

[achisto02]

Vielen Dank ebene11 für deine Antwort. Hat geklappt.

 

[achisto02]

Hallo,

ich habe die Seite mit dem entsprechenden Code von ebene11 nun getestet. Die Lösung ansich funktioniert problemlos, doch durch dein Codeschnipsel springen bzw. springt der Home Container eben diese 5em nach unten. Ich hab den jsfiddle Code editiert, dort erkennt man das Problem.
Beim erstmaligen Laden der Seite befindet, sich der Home-Container noch auf der gewünschten Position. Beim klick auf den Navigationspunkt "HOME" springt die Seite zum entsprechenden Seitenanker. Scrollt man nach oben, merkt man aber das der Home Container nach unten gerutscht ist.

Hier mal der Link zum jsfiddle: http://jsfiddle.net/me5rmf1e/5/

Würde es noch einen anderen Lösungsansatz geben, der eben nicht den kompletten Home-Container verschiebt?

Vielen Dank

 

[Myhar]

Nur mit padding alleine wirst du hier keinen Erfolg haben, da habe ich mich gestern getäuscht.
Hier eine Lösung für dein Problem.
Ein paar kleine Hinweise noch: Du verwendest zu viele divs (auch divitis genannt ^^ ) in deiner Seite. Du brauchst kein div, in dem noch ein div verschachtelt ist, in dem dann der eigentliche Inhalt ist.
Statt <div class="head"> kannst du <header> verwenden. Die div class="container" kannst du entfernen, die haben keinerlei Stile zugewiesen.
Abstände erzeugt man auch nicht mit <br> zwischen Überschrift und Text sondern mittels margin/paddings.

 

[ebene11]

Nimm halt die Anweisung für #home:target raus.

Einfacher und optisch nicht unbedingt schlechter:
- den kompletten Kopfbereich (.head) fix positionieren
- jedem Bereich (home, contact, impressum) grundsätzlich ein padding mit auf den Weg geben

 

[achisto02]

Danke für die Antwort und für die den Link zur Lösung. Werd das dann so umbauen das es funktioniert.

Abstände erzeugt man auch nicht mit <br> zwischen Überschrift und Text sondern mittels margin/paddings.

In der tatsächlichen Seite wurden nur margins/paddings für die einzelnen Abstände verwendet. Der jsfiddle-Code sollte nur die Problematik schildern und verdeutlichen. Aber trozdem danke.

Statt <div class="head"> kannst du <header> verwenden.

Das muss ich mich noch etwas mehr einarbeiten. Da bin ich noch überhaupt nicht fit drin. Danke für die Anregung.

Nimm halt die Anweisung für #home:target raus.

Danke für deine Antwort. Hab ich schon getestet, bevor ich den post abgeschickt habe. Der komplette Head Container ist fix an dem oberen Rand fixiert. Deswegen entsteht ja das Problem, das der head Contentbereich überlappept.

 

[ebene11]

Hab ich schon getestet, bevor ich den post abgeschickt habe.

Warum dann der Post - läuft doch, oder?

Der komplette Head Container ist fix an dem oberen Rand fixiert.

Nö, bei dir ist das nav-Element und nicht der head-div fix positioniert. Dazu bekommt .head bei dir noch eine Mindesthöhe von 75 Pixeln - die führen dazu, dass der Inhalt nicht unter der Navigation verschwindet, 'kollidieren' dann aber mit den padding-Werten.

Ansonsten gebe ich Myhar recht - zu viel unnötiges Markup (divs). Reduziere es auf das Wesentliche, dann gibt es nicht mehr so viele Stolperfallen.

 

[achisto02]

(divs). Reduziere es auf das Wesentliche, dann gibt es nicht mehr so viele Stolperfallen.

Nö, bei dir ist das nav-Element und nicht der head-div fix positioniert. Dazu bekommt .head bei dir noch eine Mindesthöhe von 75 Pixeln - die führen dazu, dass der Inhalt nicht unter der Navigation verschwindet, 'kollidieren' dann aber mit den padding-Werten.

Das hab ich eben auch nochmal gemerkt, als ich es ausprobiert habe. Klappt aber nur alles. Vielen Dank.