Contao-Camp 2024
Ergebnis 1 bis 5 von 5

Thema: Probleme mit Ankern und position:fixed

  1. #1
    Contao-Nutzer Avatar von Planz
    Registriert seit
    05.08.2011.
    Beiträge
    95

    Standard Probleme mit Ankern und position:fixed

    Hallo zusammen,

    Ich habe auf meiner Seite den Header via
    Code:
    position:fixed;
    width:100%;
    top:0px;
    background-image:url("../img/header_bg.png");
    background-repeat:repeat-x;
    z-index:200;
    eingebunden. Es soll eine Onepage Seite werden. Die Navigation funktioniert mit Ankern welche mit SmoothScroll verschönert wurden. Wenn man nun jedoch auf einen Anker klickt, verdeckt der fixed header den Titel. Wie kann ich es machen, dass der Titel/Artikel direkt unter dem header erscheint?

    Zu diesem Thema habe ich noch diese Seite gefunden http://molily.de/css-position-fixed. Welche dieser 5 Varianten ist die beste? Oder gibt es noch einfachere/bessere?

    Besten Dank für eure Hilfe

    Gruss
    involatus

  2. #2
    Contao-Nutzer
    Registriert seit
    16.09.2009.
    Beiträge
    57
    Partner-ID
    7622

    Standard

    Eine einfache Lösung, die mir auf Anhieb einfällt: dem "verankerten" Element ein padding-top in Höhe des Headers zuweisen.

  3. #3
    Contao-Nutzer Avatar von Planz
    Registriert seit
    05.08.2011.
    Beiträge
    95

    Standard

    Zitat Zitat von Elvador Beitrag anzeigen
    Eine einfache Lösung, die mir auf Anhieb einfällt: dem "verankerten" Element ein padding-top in Höhe des Headers zuweisen.
    Hallo Elvador

    Danke für deinen Input. Wenn ich dem h1 Element einen Anker angehängt habe mit dem padding-top funktionierte es nicht. Deshalb habe ich nun vor jede Überschrift ein
    HTML-Code:
    <a name="anker_name" id="anker_id" class="anker">&nbsp</a>
    eingefügt, welchem ich dann das css angehängt habe

    Code:
    .anker
    {
    	display:block;
    	padding-top:70px;	
    }
    So funktioniert es prima. Sieht im Backend halt nicht so schön aus, aber man soll ja nicht immer meckern.

    Danke & Gruss
    Involatus

  4. #4
    Contao-Nutzer
    Registriert seit
    16.09.2009.
    Beiträge
    57
    Partner-ID
    7622

    Standard

    Das ist eine Möglichkeit. Etwas schöner wird es m.E. wenn du dir ein übergeordnetes DIV (davon gibts bei Contao ja reichlich als Container) schnappst und das padding-top sowie die Verlinkunge via ID/Anker darüber vornimmst.

    Jetzt weiß ich natürlich nicht, wie du deine Onepage-Seite realisierst, aber wenn du z.B. mit mehreren Artikeln arbeitest, bietet sich natürlich der CSS-Selektor div.mod_article sehr an...

  5. #5
    Contao-Urgestein
    Registriert seit
    07.04.2010.
    Ort
    Stuttgart
    Beiträge
    2.733
    User beschenken
    Wunschliste

    Standard

    Ich habe da mal was gebaut, dass dieses Offset auch hat. Basiert auf http://mootools.net/forge/p/navsimple (das kann mit dem offset umgehen) und nutzt die artikelliste.
    https://github.com/psren/contao-magicArticleList Eventuell hilft es dir ja.

    Wenn ich euch helfen konnte könnt ihr euch gerne mal
    meine Amazon Wunschliste anschauen. Dankeschön.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •