Hallo, Gast! (Registrieren)

Letzte Ankündigung: MyBB 1.8.38 veröffentlicht (30.04.24)


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
Header Fixieren (Oberer Teil der Seite)
#1
Question 
HiHo Folx!

Die nervenaufreibende Suche geht weiter Big Grin 
-----

Install -> myBB 1.8.29 -> KEINE Probleme <- läuft 1A
-----

Frage: Im oberen Bereich, wo auch das Logo angesiedelt ist, befindet sich afaik der "Header". Lässt sich der obere Bereich "fixieren", sodass selbiger erhalten bleibt, und beim Scrollen der Seiten nicht verschoben wird?

Ich habe zwar einiges an Info's in Bezug auf den "header" gefunden, jedoch waren die Antworten für mich nicht schlüssig; i.e. -> nur der Inhalt, nur das Logo, nicht aber der ganze obere Bereich.

Sollte das über die "css" gehen -> kurze Info - wo sich der Eintrag befindet Wink 

Vielen Dank schon mal für Eure Antworten!

Ich hab' keine Macken! Das sind Special Effekt's!

Zitieren
#2
Füge folgendes mal bitte zur global.css des default Themes hinzu:
Code:
#header {
    position: sticky;
    top: 0;
}
Zitieren
#3
Danke für die Hilfe....

Das setzen des Sticky Bit's hat nicht funktioniert; verständlicherweise ist die "Vererbung" jetzt nicht mehr vorhanden, und die Formatierung ist weg.

Heisst - die Seite wird auf volle Breite angezeigt, und nicht mehr in der Mitte, mit Rand links und Rechts.

Beides ist kein Problem - wird je eh angepasst......

Ist die Position des von Dir genannten Eintrages in der "global.css" wichtig?

Ich hab' keine Macken! Das sind Special Effekt's!

Zitieren
#4
(31.01.2022, 10:40)Digitalkeeper schrieb: Danke für die Hilfe....

Das setzen des Sticky Bit's hat nicht funktioniert; verständlicherweise ist die "Vererbung" jetzt nicht mehr vorhanden, und die Formatierung ist weg.

Heisst - die Seite wird auf volle Breite angezeigt, und nicht mehr in der Mitte, mit Rand links und Rechts.

Beides ist kein Problem - wird je eh angepasst......

Ist die Position des von Dir genannten Eintrages in der "global.css" wichtig?

Ansich ändert sich durch diese Zusatzregel nichts an der generellen Ansicht des Forums, nur der Seitenkopf wir oben fixiert.

Auch die Position in der global.css ist eher zweitrangig, wichtig ist nur, dass alle geschweiften Klammern der CSS Regeln immer geschlossen werden.

Im Browser klappt die Funktion durch temporäre Einbettung der neuen Regel ohne Probleme.
   
Zitieren
#5
Information 
Hmmm, ich schätze - ich hatte das an falscher Stelle eingetragen! Rolleyes

Ich hatte das per Editor auf meinem Rechner gemacht, dann per FTP die Datei hochgeladen - das brachte nix! Entweder hat er die Einträge nicht übernommen, und/oder es war an falscher Stelle.

Über das ACP und den Einstellungen -> eingetragen -> erledigt!

Und siehe da - passt! Smile
-----

Vielen Dank! Das hat mich wieder ein Stück weiter gebracht!
-----

btw - das mit dem Editieren im und mittels ACP ist Super! Tolle Sache!

*case closed*

Ich hab' keine Macken! Das sind Special Effekt's!

Zitieren
#6
Nachtrag - ich hatte das beim "ersten Versuch" im falschen "Theme" eingetragen, weshalb es nicht funktionierte; im KORREKTEN Theme funktioniert es einwandfrei!

Ich hab' keine Macken! Das sind Special Effekt's!

Zitieren
#7
Die CSS-Eigenschaft "position: sticky" wird nicht ausnahmslos von allen Browsern unterstützt.
Der alte Internet Explorer kennt es überhaupt nicht und der Edge nur ab einer bestimmten Version.
Für einige Webkit-basierte Browser, solltest du vorsichthalber auch diese Alternative zusätzlich einbauen:
Code:
position: -webkit-sticky;

Bedenke auch, dass ein Sticky-Header einen Teil der tatsächlichen Anzeigefläche auf dem Display blockiert.
Vor allem auf dem Display eines Mobiltelefons kann sich das auch negativ auswirken.
Als kleinen Bonus kannst du den Sticky-Header auch nur bei bestimmten Display-Auflösungen anpinnen. Zum Beispiel mit sog. CSS Media Queries. Hiermit würde der Sticky-Header nur aufwärts einer Display-Auflösung von 720 Pixeln greifen:
Code:
@media screen and (min-width: 721px) {
  #header {
    position: sticky;
    top: 0;
  }
}

[ETS]
MyBB + innovative Themes:
NokiaPort.de Forum Nokia-Traditionsforum seit 2006.
Live Escape Game Forum Diskussionsplattform für Escape-Rooms.
Unlösbares Problem, Dilemma? -> das Nötel Smile
Zitieren
#8
Danke für die Info's!

Werde ich berücksichtigen, und entsprechend "einbauen"  Smile

Ich hab' keine Macken! Das sind Special Effekt's!

Zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Responsive Teil eines Templates Foxi 2 1.431 06.06.2020, 13:58
Letzter Beitrag: Foxi
  Hintergrund fixieren gwillad 6 5.834 12.12.2013, 19:51
Letzter Beitrag: gwillad
  CSS - Adsense Layer an rechten oder linken Seitenrand fixieren Weihnachts-Lichter 6 2.910 27.08.2013, 13:32
Letzter Beitrag: Weihnachts-Lichter
  Suchleiste fixieren Fab0r 4 2.609 28.07.2011, 21:29
Letzter Beitrag: Fab0r
  Teil eines Styles ändern [PN Leiste] kev22021994 2 2.219 05.01.2011, 21:39
Letzter Beitrag: kev22021994