Floating Element auf der Seite positionieren

Einklappen
X
 
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
  • EternaX
    Contao-Nutzer
    • 21.01.2010
    • 30

    #1

    Floating Element auf der Seite positionieren

    Hallo Leute,

    auf meiner Seite soll am linken Bildrand eine Leiste dargestellt werden, die beim Scrollen ihre Position nicht verändert (also position:fixed).

    Mein Seitenlayout (Header, Hauptbereich, Footer) der Seite ist 980px breit und mittig.

    Da die Leiste aber am ganz linken Rand sitzen soll (Bildschirmauflösung unabhängig), kann ich sie nicht über das Template im Hauptbereich darstellen lassen, da sie ja sonst im 980px breiten Hauptbereich mit angezeigt werden würde.

    Ich habe es jetzt so gelöst, dass ich diese Leiste fest in das Template fe_page.tpl geschrieben habe. Funktioniert auch soweit wunderbar. Nur leider gibt es einige Bereiche der Seite, wo sie nicht dargestellt werden soll. Somit ist auch die Lösung es direkt ins Template zu schreiben für die Katz'.

    Dann dachte ich daran, einen eigenen Layoutbereich zu definieren (Über Einstellungen -> Globale Einstellungen), aber auch die Positionierung von eigenen Layoutbereichen ist nur unterhalb des Headers, im Hauptbereich oder oberhalb des Footers möglich - nicht ausserhalb davon.

    Also nochmal die Frage kompakt:
    Wie positioniere ich ein div (mit position: fixed; left: 0px; top:300px) am linken Seitenrand dar, wenn mein Layout nur 980px breit und mittig zentriert ist und ich vor allem das div nicht auf allen Seiten darstellen will?

    Danke im Voraus!!
    Angehängte Dateien
  • EternaX
    Contao-Nutzer
    • 21.01.2010
    • 30

    #2
    Ich habe jetzt eine Kopie der fe_page.tpl angelegt, wo ich einfach die Seitenleiste rein genommen habe und dann je nach verwendetem Layout der Seite wird mal die originale fe_page.tpl verwendet und mal die neue Kopie, wo die Seitenleiste im Code drin ist.


    Wüsste aber ggf noch gerne, ob es eine schönere Lösung gibt. Denn jetzt habe ich den ganzen Code der Seitenleiste im fe_page Template drin und das kann ja nicht so ganz Sinn der Sache sein, auch wenns erstmal funktioniert.

    Kommentar

    • tblumrich
      Contao-Urgestein
      • 25.06.2009
      • 2239

      #3
      Hi.

      Hmm, ich fürchte ohne die fe_page anzufassen, wird das tatsächlich nicht so einfach.
      Je nachdem, wie dein Layout aufgebaut ist, könnte man zwar #left dafür missbrauchen (dem wrapper im Seitenlayout keine Breite geben und dann #main via CSS die Breite geben und mittig ausrichten), aber sofern footer und header dabei sind, wirds wider schwierig.

      Ansonsten könntest du das auch via CSS lösen ohne zweite fe_page und zweites Seitenlayout, indem du die Leiste auf den Seiten wo sie nicht erscheinen soll, halt mit display:none ausblendest. Setzt voraus, das du deinen Seiten eine extra CSS Klasse mitgegeben hast...

      Z.B.

      Code:
      body.seiteohneleiste div.leiste {display:none;}
      Gruß
      Thomas
      blucomp | Webdesign & Onlinelösungen

      Kommentar

      Lädt...