Anzeige

Seitenanker unter Objekt springen lassen

Seitenanker unter Objekt springen lassen | PSD-Tutorials.de

Erstellt von achisto02, 12.08.2014.

  1. achisto02

    achisto02 Noch nicht viel geschrieben

    Dabei seit:
    03.07.2014
    Beiträge:
    7
    Geschlecht:
    männlich
    Software:
    Adobe Creative Suite 5 - 6, Notepad
    Seitenanker unter Objekt springen lassen
    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
     
    #1      
  2. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.103
    Geschlecht:
    männlich
    Ort:
    Ö
    Seitenanker unter Objekt springen lassen
    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.
     
    #2      
  3. achisto02

    achisto02 Noch nicht viel geschrieben

    Dabei seit:
    03.07.2014
    Beiträge:
    7
    Geschlecht:
    männlich
    Software:
    Adobe Creative Suite 5 - 6, Notepad
    Seitenanker unter Objekt springen lassen
    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
     
    #3      
  4. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.103
    Geschlecht:
    männlich
    Ort:
    Ö
    Seitenanker unter Objekt springen lassen
    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.
     
    #4      
  5. achisto02

    achisto02 Noch nicht viel geschrieben

    Dabei seit:
    03.07.2014
    Beiträge:
    7
    Geschlecht:
    männlich
    Software:
    Adobe Creative Suite 5 - 6, Notepad
    Seitenanker unter Objekt springen lassen
    Ich bin dir für jeden Denkanstoss dankbar. Wie gesagt, ich steh gerade komplett auf den Schlauch.
    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.
     
    #5      
  6. ebene11

    ebene11 Noch nicht viel geschrieben

    Dabei seit:
    22.05.2014
    Beiträge:
    18
    Geschlecht:
    männlich
    Ort:
    Karlsruhe
    Seitenanker unter Objekt springen lassen
    Du kannst dem jeweils aktuellen Bereich ein padding mitgeben, z.B. so:

    Code (Text):
    1. #contact:target {
    2. padding-top: 5em;
    3. }
     
    #6      
  7. achisto02

    achisto02 Noch nicht viel geschrieben

    Dabei seit:
    03.07.2014
    Beiträge:
    7
    Geschlecht:
    männlich
    Software:
    Adobe Creative Suite 5 - 6, Notepad
    Seitenanker unter Objekt springen lassen
    Vielen Dank ebene11 für deine Antwort. Hat geklappt.
     
    #7      
  8. achisto02

    achisto02 Noch nicht viel geschrieben

    Dabei seit:
    03.07.2014
    Beiträge:
    7
    Geschlecht:
    männlich
    Software:
    Adobe Creative Suite 5 - 6, Notepad
    Seitenanker unter Objekt springen lassen
    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
     
    #8      
  9. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.103
    Geschlecht:
    männlich
    Ort:
    Ö
    Seitenanker unter Objekt springen lassen
    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.
     
    #9      
  10. ebene11

    ebene11 Noch nicht viel geschrieben

    Dabei seit:
    22.05.2014
    Beiträge:
    18
    Geschlecht:
    männlich
    Ort:
    Karlsruhe
    Seitenanker unter Objekt springen lassen
    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
     
    #10      
  11. achisto02

    achisto02 Noch nicht viel geschrieben

    Dabei seit:
    03.07.2014
    Beiträge:
    7
    Geschlecht:
    männlich
    Software:
    Adobe Creative Suite 5 - 6, Notepad
    Seitenanker unter Objekt springen lassen
    Danke für die Antwort und für die den Link zur Lösung. Werd das dann so umbauen das es funktioniert.

    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.

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


    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.
     
    #11      
  12. ebene11

    ebene11 Noch nicht viel geschrieben

    Dabei seit:
    22.05.2014
    Beiträge:
    18
    Geschlecht:
    männlich
    Ort:
    Karlsruhe
    Seitenanker unter Objekt springen lassen
    Warum dann der Post - läuft doch, oder?

    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.
     
    #12      
  13. achisto02

    achisto02 Noch nicht viel geschrieben

    Dabei seit:
    03.07.2014
    Beiträge:
    7
    Geschlecht:
    männlich
    Software:
    Adobe Creative Suite 5 - 6, Notepad
    Seitenanker unter Objekt springen lassen
    Das hab ich eben auch nochmal gemerkt, als ich es ausprobiert habe. Klappt aber nur alles. Vielen Dank.
     
    #13      
Seobility SEO Tool
x
×
×