Fragen und Antworten » Kopfbereich fixieren?

31.01.2014 12:45

eini1971
#1 Kopfbereich fixieren?

eini1971

Hi Leute,
ist es möglich den ganzen Kopfbereich zu fixieren so daß er nicht noch oben raus gescrollt werden kann?
Ich meine den ganzen Bereich.
Die Topnavigation den Kopfbereich und die Navigation.

Der Rest darunter sollte weiterhin scrollbar sein.
Sonst macht das keinen Sinn.

Gruß
Frank

Boardnr. 621181

www.aquariumzimmer.de
Boardnr. 572886
Business Template

Antworten

Beitrag melden

#2

31.01.2014 13:09 (zuletzt bearbeitet: 31.01.2014 13:09)

TripleM
#2 RE: Kopfbereich fixieren?

TripleM

Habe mal eben was getestet da bei mir alles Trans ist schwierig zu sehen ob du es so meinst

1
 
.header, .topnavigation_wrap, .navigation {position:fixed; left:4% !important;}

Kannst ja mal schauen. Die % Zahl habe ich bei mir weil ich Navigation Header und Top Navi via % bestimmt habe.

Zu sehen im Testforum bei mir

http://ofn-testforum.xobor.de/

Antworten

Beitrag melden

#3

31.01.2014 14:05

eini1971
#3 RE: Kopfbereich fixieren?

eini1971

Danke Mario,
das ist schonmal ein Anfang.
Aber es tut nicht ganz was es soll.
Die Topnavi wird nach links geschoben.
Wird wohl am "wrap" liegen.

Topnavi und Navi sind nun fixiert.
Aber der Kopfbereich zwischen den beiden Leisten wird auch gestaucht
und bleibt nur bedingt fixiert.
Solange man nur bis kurz unter den ActivityFeed scrollt, beilbt er stehen.
Scrolle ich tiefer, also ab den Kategorien,
scrollt dieser Bereich nach oben weg.

Habs mit dieser Zeile dann getestet.

1
 
.header, .topnavigation, .navigation {position:fixed; !important;}

Topnavi und Header werden trotzden gestaucht und nach links verschoben.
Die Topnavi ist nun auch nicht mehr ganz sichtbar.
Der Admin-Link ist nur vollständig sichtbar wnn ich mit der Maus rauf gehe.
Könnte man wohl einen z-index eínsetzen.
Dafür bleibt der gestauchte Header nun wirklich komplett fixiert.
Kannst ja mal in meinem Testforum schauen ;-)

Mit dem Ansatz teste ich nun weiter und berichte wenn ich es geschafft habe.

Gruß
Frank

Boardnr. 621181

www.aquariumzimmer.de
Boardnr. 572886
Business Template

Antworten

Beitrag melden

#4

31.01.2014 14:19

TripleM
#4 RE: Kopfbereich fixieren?

TripleM

1
 
.header, .topnavigation_wrap, #navigation.navigation_wrap {position:fixed; left:0% !important;}

Antworten

Beitrag melden

#5

31.01.2014 15:22

eini1971
#5 RE: Kopfbereich fixieren?

eini1971

Es ist alles sehr merkwürdig.
Ich habe nun alle Plugins deaktiviert,
die Kopf- und Fußzeile ist leer
und in der CSS ist auch nichts drin.
So sieht mein Testforum dann aus:

Sobald ich die CSS-Zeile aber einfüge, sieht es so aus:

Ich habe auch schon versucht Header, Topnavi, und Navi jeweils separat anzusprechen.
Dabei kommen völlig unlogische Sachen raus.
Fixierungen, ohne weitere Einstellungen, bewirken fast immer ein Zusammenschrumpfen und Linksbündigkeit.
Nur bei der Navi nicht immer.
Kommt darauf an welche Leiste ich fixiere.

Setze ich nur

1
 
.topnavigation {position:fixed; !important;}

ein, dann verschwindet der Untergrund der Topnavi.
Die Leiste ist dann transparent und ist nur solange erkennbar,
wie der Header noch da ist.
Scrolle ich runter, ist die Topnavi kaum sichtbar.
Außerdem ist sie nach links verschoben.

Füge ich

1
 
.header {position:fixed; !important;}

hinzu, so sieht man, daß beides im Hintergrund verschwindet wenn man scrollt.
Fixiert ist es aber.
Die Navi ist dann auch fixiert obwohl sie gar nicht in der CSS angesprochen wird.

Ich habe dann alles noch mit z-Index erweitert.
Topnavi mit 9999.
und den Header mit 999.
Aber Die Topnavi verschwindet immer hinter dem Header.
USW.
es gibt ganz irre Kombinationen die Auswirkungen haben, die unlogisch sind.
Navi fixiert - Header schmal.
Ohne das Topnavi und Header in der CSS stehen.
Usw.

???

Sind das wirklich die Namen die ich im CSS brauche?

Gruß
Frank

Boardnr. 621181

www.aquariumzimmer.de
Boardnr. 572886
Business Template

Antworten

Beitrag melden

#6

31.01.2014 15:25 (zuletzt bearbeitet: 31.01.2014 15:30)

TripleM
#6 RE: Kopfbereich fixieren?

TripleM

Hier siehst du alle ID die du bei dir hast

Wie du siehst sind das die die ich dir geschickt habe.

Also bei mir ist das CSS Leer bis auf das hier

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
.header, .topnavigation_wrap, #navigation.navigation_wrap {position:fixed; left:0% !important;}
 
.header {z-index: 9999 !important;}
.topnavigation_wrap {z-index: 99999 !important;}
 
.header, #usercont_bottom.container, .topnavigation_wrap {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}
 
#navigation {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}
 
.content.page_user {
    width: 97%;
    margin-left: auto;
    margin-right: auto;
}
 