Contao-Camp 2024
Ergebnis 1 bis 13 von 13

Thema: Header mit Logo Navi und mobile Navi fixieren klappt nicht

  1. #1
    Contao-Nutzer
    Registriert seit
    27.12.2009.
    Beiträge
    56

    Standard Header mit Logo Navi und mobile Navi fixieren klappt nicht

    Hallo Leute,

    ich weiß leider nicht mehr weiter. Seit 2 Tagen schaffe ich es einfach nicht einen Header (Höhe 100px) zu fixieren.
    Im Header befindet sich links ein Logo ind der Mitte die Hauptnavigation und rechts der Trigger.
    Header: z-index: 999; Logo: z-index: 800; Navigation: z-index: 700; Trigger: z-index: 600 - funktioniert nicht!!!
    Und dann habe ich noch einen Footer und natürlich auch die Cookiebar, der ich einen z-index: 1000 !impotrant; gegeben habe. (Standardmäßig 10)
    Container, Main, Wrapper habe ich position relative gegeben (aber noch keinen z-index)

    Ich weiß, dass es was mit dem z-index zu tun hat. Egal was ich für eine Zahl eingebe. Der Header mit samt Logo Nav und Trigger wird nicht fixiert, trotz position: fixed, top:0

    Kann mir jemand von euch helfen.
    Leider läuft die Seite noch auf Xampp.
    Vielen Dank!
    VG

  2. #2
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.328
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Wenn ich etwas fixieren möchte dann denke ich eher an position:fixed. Z-index sorgt dafür, dass man Elemente übereinanderstapeln kann, beispielsweise um eine fixierte Topleiste dazu zu bewegen, immer über dem anderen Inhalt zu liegen.

    Ohne Link wird das aber schwer zu sagen sein, an welchen Stellen Dein CSS suboptimal ist.

  3. #3
    Contao-Nutzer
    Registriert seit
    27.12.2009.
    Beiträge
    56

    Standard

    Ich habe den Header erstmal schon fixiert. position: fixed, top: 0
    Das Logo rechts ebenfalls und absolut positioniert, die navigation ebenfalls fixiert un den Trigger rechts absolut positioniert und ebenfalls fixiert.
    Ich verstehe es einfach nicht!!

    Die Css sieht so aus:
    #header {
    width:100%;
    height:100px;
    top:0;
    position:fixed;
    background-color:rgba(83,83,83,.4);
    border-bottom:5px solid rgba(83,83,83,1);

    #logo {
    width:155px;
    height:30px;
    top:0;
    position:absolute;
    margin-top:40px;
    margin-left:70px;
    background-image:url("files/Bilder/logo.png");
    background-repeat:no-repeat;

    #nav {
    width:100%;
    height:100px;
    left:280px;
    top:0;
    position:fixed;

    #mobile_nav {
    width:43px;
    height:43px;
    right:40px;
    top:25px;
    position:fixed;
    curser:pointer;

    Vielleicht hilft das ja. Wäre toll. Dankeschön
    Geändert von bienchen (20.06.2018 um 09:40 Uhr)

  4. #4
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    Du willst doch nur den header fixieren oder?
    Die Navi liegt doch innerhalb vom header,vermute ich mal, dann solltest Du nicht alles fixieren, das kann ja nicht klappen, bzw. gut aussehen

  5. #5
    Contao-Nutzer
    Registriert seit
    27.12.2009.
    Beiträge
    56

    Standard

    ich werde das mal probieren und melde mich gleich nochmal.
    Aber aussehen tuts normal.

  6. #6
    Contao-Nutzer
    Registriert seit
    27.12.2009.
    Beiträge
    56

    Standard

    ich habe jetzt nur den header fixiert und alles andere absolut positioniert.
    Es funktioniert trotzdem nicht.
    #header {
    width:100%;
    height:100px;
    position:fixed;
    display:block;
    background-color:rgba(83,83,83,.4);
    border-bottom:5px solid rgba(83,83,83,1);
    z-index: 1000;
    }
    Nehme ich den z-index raus verschwindet auch der Header komplett mit Logo und Navi.

    Ich vermute, dass wrapper, container ebenfalls einen z-index braucht sobald doch etwas absolut positioniert ist oder fixiert ist, oder nicht?

  7. #7
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    Ach so das war jetzt ein Denkfehler, wenn der Header fix ist, dann ist es natürlich blöde wenn darin absolut positionierte Elemente liegen -
    denn die sind ja eben dann absolut und richten sich nicht nach dem fixierten header.
    ALso wenn es denn schon so sein muss, dann musst Du die das so bauen, das um die absolut positionierten sich ein relativ positioniertes div befindet.
    und dann das übergeordnete position:fixed

    Man müsste es wirklich sehen, aber Du muss eigentlich nichts mit z-index machen - klingt jedenfalls für mich alles zu kompliziert.
    Nachtrag: der header natürlich schon, hast Du doch auch gemacht in Deinem CSS - das geht nicht?

    Ich kann es jetzt nicht nachstellen, aber der header fix das .inside sollte dann relativ sein (ist es normalerweise im css wenn Layoutbuilder aktiv) und darin wieder absolute Elemente - irgendwie so?
    Geändert von Bennie (20.06.2018 um 12:36 Uhr)

  8. #8
    Contao-Nutzer
    Registriert seit
    27.12.2009.
    Beiträge
    56

    Standard

    Ach so das war jetzt ein Denkfehler, wenn der Header fix ist, dann ist es natürlich blöde wenn darin absolut positionierte Elemente liegen -
    denn die sind ja eben dann absolut und richten sich nicht nach dem fixierten header.

    achso!!

    Das geht ja gar nicht anders als absolut zu positionieren.
    Im Quelltext ist das ja untereinander.

    Du meinst ich soll den header.inside ein position relative geben und dann kann ich Logo, Navi und Trigger absolut positionieren???
    Hab ich das richtig verstanden??

  9. #9
    Contao-Nutzer
    Registriert seit
    04.12.2013.
    Ort
    Reutlingen
    Beiträge
    221

    Standard

    hast du zufällig eine mobile Navigation irgendwo eingebunden die als Offcanvas den gesamten Inhalt verschieben?
    Das macht Probleme mit position: fixed.

  10. #10
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    Du meinst ich soll den header.inside ein position relative geben und dann kann ich Logo, Navi und Trigger absolut positionieren???
    Hab ich das richtig verstanden??
    Ich denke so müsste es gehen , wie gesagt die Klasse .inside ist wenn du den Layoutbuilder benutzt schon relativ gesetzt, aber das siehst Du mit den Webtools vom Chrome oder Firefox z.B.

    Es kann allerdings sein, dass da jetzt noch irgendwelche Nebeneffekte auftreten, die wir nicht beurteilen können ohne es zu sehen.
    Bedenke auch dass das Innere deines Headers, wenn er fixiert ist und 100% breit, wiederum begrenzt und in der Mitte gehalten werden sollte - aber vielleicht möchtest Du das ja gar nicht.

  11. #11
    Contao-Nutzer
    Registriert seit
    27.12.2009.
    Beiträge
    56

    Standard

    vielen, vielen Dank.
    So lernt man. Toll, dass es euch Experten hier gibt.
    Kann das aber erst später oder morgen probieren.

    Nur habe ich noch ein Problem.

    Warum ist der Text im ce-textmodul in der mobilen Ansicht rechts bis zum Rand, teilweise um 1-2 Buchstaben abgeschnitten (obwohl padding right 20px angegeben wurde) und links wird der Abstand padding-left 20px eingehalten.

    Was mache ich da falsch?
    Geändert von bienchen (20.06.2018 um 13:59 Uhr)

  12. #12
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Wie sieht es denn mit einem Link zur Problemseite aus. Ohne Link stochert man immer leicht im Nebel bzw. kann nicht wissen, welches andere css-noch einen Einfluss auf die fraglichen Bereiche hat.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  13. #13
    Contao-Nutzer
    Registriert seit
    27.12.2009.
    Beiträge
    56

    Standard

    Das tut mir Leid.

    Der Aufbau der Seite läuft auf Xampp.
    Ich habe den Textblöcken kein padding verpasst und die breite auf 96% gesetzt, da der Hintergrund eh weiss ist.

    Somit ist das hier gelöst.
    Danke!

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
  •