Ergebnis 1 bis 7 von 7

Thema: Fixed Header. Header soll mitscrollen

  1. #1
    Contao-Nutzer
    Registriert seit
    28.03.2014.
    Beiträge
    116

    Standard Fixed Header. Header soll mitscrollen

    Hallo an alle,
    es geht eigentlich um eine (wie ich glaube) simple Augabe. Ich will einfach das mein Header die ganze Zeit stehen bleibt und die anderen Elemente drunter weg scrollen.
    Es gibt dazu ja auch schon einiges in dem Forum und ich bin da auch fündig geworden und hab auch schon die ersten "Erfolge" gemeistert, leider fehlt mir da glaube ich aber irgendwo noch eine KLeinigkeit.
    Zu der generellen Vorgehensweise: Ich wollte das über CSS und nicht JS lösen, da ich von JS wenig bis keine Ahnung habe und das für die weitere Verwendung und Anpassung kompliziert wäre.

    Bisher habe ich folgendes:
    In meinem Header habe ich eine Klasse "bangb1" und der hab ich folgendes CSS zugeschrieben:

    HTML-Code:
    .bangb1 {
        position:fixed;
        width:100%;
        z-index: 120
    }
    Dadurch hab ich ja das Problem, dass das Element nach dem Header nach oben rutscht und der Header über dem nächsten Element (nennen wir es Element2) liegt. Also hab ich noch eine weitere Formatdefinition:

    HTML-Code:
    .abheader {
        margin-top:165px;
    }
    Diese wollte ich dann immer im Element2 einbinden.

    Jetzt kommt aber das Problem, dass ich oben einen weißen Rand habe mit den 165px und der HEader immernoch über dem Element2 liegt.

    Hat da jemand abhilfe?

    Lg
    Geändert von BrainStormer (11.04.2017 um 15:44 Uhr)

  2. #2
    Contao-Fan Avatar von Fehrmann
    Registriert seit
    04.07.2009.
    Ort
    Wismar
    Beiträge
    585
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ungetestet: Probier mal der Klasse .bangb1 ein "top:0;" mitzugeben (damit wäre er oben verankert)

    Ansonsten nehmen wir auch gerne einen Link zur Seite falls möglich.

    Viele Grüße
    René
    Software-Entwickler Backend/Frontend

  3. #3
    Contao-Nutzer
    Registriert seit
    28.03.2014.
    Beiträge
    116

    Standard

    Oh man... da sieht man den Wald vor lauter Bäumen nicht mehr.
    Ich hatte das mal drinne und dann irgendwann gelöscht.
    Klappt. Danke für die schnelle Antwort!

  4. #4
    Contao-Nutzer
    Registriert seit
    28.03.2014.
    Beiträge
    116

    Standard

    Ich muss hier nochmal einhaken. Auf der normalen Website sieht das alles gut aus. Aber noch nicht auf der mobilen. Das liegt wahrscheinlich an den Margin von 165px, da es auf der mobilen weniger sind. Wie könnt ich das denn lösen ?
    Lg


    Gesendet von iPhone mit Tapatalk

  5. #5
    Contao-Nutzer
    Registriert seit
    28.03.2014.
    Beiträge
    116

    Standard

    ..
    Geändert von BrainStormer (11.04.2017 um 15:44 Uhr)

  6. #6

  7. #7
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.529
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hi brainstormer,

    vielleicht ist das interessant für dich:
    https://www.contao-konferenz.de/cont...agenturen.html
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

Aktive Benutzer

Aktive Benutzer

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

Berechtigungen

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