• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Responsive-Off-Canvas-Menü CSS ändern

Status
Für weitere Antworten geschlossen.
E

Ehemaliger Benutzer 33785

Guest
Hallo,
ich habe im Internet ein Github Projekt gesehen, was schon etwas älter ist... (https://github.com/dbushell/Responsive-Off-Canvas-Menu)
Ich habe das schon in meine Datei eingebaut, da mir das Design gefällt, Habe aber im css Code nichts geändert.
Mein Problem: Da bei mir noch nicht alle Seiten komplett bis unten hin gefüllt sind und es auch nicht sein werden, ist jetzt meine Frage, ob mir jemand von euch sagen kann wo ich in den Dateienen etwas ändern muss.
Es geht hierbei nur um die Mobile Seite, bei der Desktop Ansicht ist alles ok
 
Hallo

Da bei mir noch nicht alle Seiten komplett bis unten hin gefüllt sind und es auch nicht sein werden, ist jetzt meine Frage, ob mir jemand von euch sagen kann wo ich in den Dateienen etwas ändern muss.

Ich verstehe nicht was du damit meinst. Hast du einen Link zu der Seite?

Gruss

MrMurphy
 
Hallo

Du hast das Problem mit deiner Seite. Entsprechend benötigen wir einen Link zu deiner Seite.

Außerdem weiß ich noch immer nicht was du mit

Da bei mir noch nicht alle Seiten komplett bis unten hin gefüllt sind und es auch nicht sein werden, ist jetzt meine Frage, ob mir jemand von euch sagen kann wo ich in den Dateienen etwas ändern muss.

meinst.

Gruss

MrMurphy
 
Ich nehme mal an, er möchte, dass sein Footer bei wenig Inhalt immer am unteren Rand ist.
Oder?!
 
Zuletzt bearbeitet:
Ja genau, das ist es..

Ich habe die Webseite nur lokal bei mir auf dem Raspberry Pi, habe aber die CSS und JS Dateien nicht geändert.
 
Hallo

Dann suchst du "Sticky Footer". Das ist ein Oberbegriff für unterschiedliche Lösungen. Gemeinsam ist allen, dass der Footer auch bei wenig Inhalt immer am unteren Fensterrand angezeigt wird und bei viel Inhalt (oder kleinerem Fenster / Bildschirm) nach unten gedrückt wird und beim Scrollen erst nach dem Inhalt angezeigt wird.

Welche der Lösungen davon für dich in Frage kommt hängt von deinen CSS-Kenntnissen und deinen sonstigen Anforderungen ab.

Gruss

MrMurphy
 
Danke, werde es morgen oder am Wochenede mal austesten...
 
Hallo

Ich habe mal für die finale Version (step4.html) eine Lösung mit dem Flexbox-Modell erstellt. Dazu muss am Ende des head-Bereichs der step4.html

Code:
   <![endif]-->
</head>

folgendes eingefügt werden:

Code:
   <![endif]-->
   <style>
   * {
      box-sizing: border-box;
   }
   body {
      display: -ms-flexbox;
   }
   #inner-wrap {
      height: 100%;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
   }
   #main {
      flex: 1 0 auto;
   }
   </style>
</head>

Das wäre es dann auch schon.

Die erforderlichen CSS-Anweisungen

Code:
   * {
      box-sizing: border-box;
   }
   body {
      display: -ms-flexbox;
   }
   #inner-wrap {
      height: 100%;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
   #main {
      flex: 1 0 auto;
   }

können natürlich stattdessen auch in die step4.css eingetragen werden. Dann musst du aber darauf achten, dass sie von bereits vorhandenen CSS-Anweisungen nicht überschrieben werden.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Hallo

Um Probleme mit unterschiedlichen Browsern sowie viel und wenig Inhalt zu vermeiden.

Bei wenig Inhalt soll das gesamte Fenster ausgefüllt sein, aber keine Scrollbalken erscheinen.

Bei viel Inhalt (mehr als die Fenstergröße) sollen Hintergrundfarben nicht plötzlich aufhören wenn gescrollt wird.

Und das in allen relavanten Browsern.

Diese Kombination hat sich dafür als praxisgerecht erwiesen und die meisten genannten Probleme treten gar nicht erst auf.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Vielen Dank für deine Hilfe MrMurphy, habe es gerade ausprobiert und es funktioniert mega gut... DANKE
 
Zuletzt bearbeitet von einem Moderator:
Status
Für weitere Antworten geschlossen.
Zurück
Oben