Kopfzeile immer sichtbar machen

[Canndy]

Hallo,

ich versuche schon seit ein paar Tagen die Kopfzeile zu fixieren, so das wenn ich nach unten scrolle immer die Kopfzeile sichtbar ist.
Siehe Bild

es geht um das Style: prosilver

[ externes Bild ]

Danke schon mal für eure Hilfe.

Lg Canndy

[Talk19zehn]

Hi, spontan würde ich wie folgt vorgehen: Nur ein erster Anhaltspunkt(!): TEST

common.css: Am Ende hinzufügen

Code: Alles auswählen

.topfixedheader {
   background-color: #fafafa;
   border-color: #12A3EB;
   border-left: 1px solid #12A3EB;
   border-right: 1px solid #12A3EB;
   border-style: solid;
   border-width: 1px 0;
   font-family: Verdana, sans-serif;
   font-size: 11px;
   text-align: center;
   left: 0;
   padding: 25px;
   position: fixed;
   right: 0;
   top: 0;
   z-index: 20000;
}

.bottomfixedheader {
   padding-bottom: 232px;
}

BTW: Abstände, text-align, z-index und Co. bitte noch eigenen Wünschen anpassen. Je nach Anwendung, eignet sich das CSS auch für individuelle HTML-Ausgaben.


overall_header.html
suche

Code: Alles auswählen

<div id="wrap">

füge danach in einer neuen Zeile ein

Code: Alles auswählen

<div class="bottomfixedheader"><div class="topfixedheader">

suche

Code: Alles auswählen

	<a name="start_here"></a>

füge davor ein:

Code: Alles auswählen

<div style="clear: both;"></div>
</div></div>

Prüfe bitte, ob die Container besser an anderer Stelle geschlossen werden soll(t)en. Teste dies bitte auch im Zusammenhang der Deaktivierung deines Boards.
Aus Zeitmangel, alles ungetestet! Nur so eine Idee .... => TEST

Grüße

[Canndy]

Danke für die schnell Antwort, funktioniert noch nicht ganz.
siehe Bild

[ externes Bild ]

jetzt muss nur noch das Forumfenster etwas runter, so das es nicht verdeckt ist.

[Talk19zehn]

Hi, kannst du bitte einen Link zu deinem Forum offenbaren, da du nun das Board3-Portal anstelle des Forums bildlich nachweist.
Ggf. müsste ein "Portaler" sodann weiterhelfen? Mir war das Portal als Startseite - oder so - zumindest zuvor nicht deutlich genug deklariert.
Grüße

[Canndy]

Na klar http://www.aks-xxl.org
befor ich das ganze auf meinem Forum mache Teste ich das erst auf meinem Rechner und musste gerade meine Testforum neu installieren.
Daher das andere Bild.

Lg Canndy

[Talk19zehn]

Okay, nur leider fehlt der o.g. Einbau zur Zeit gänzlich.

...(...)... http://www.aks-xxl.org/aks-portal/portal.php

Eine Prüfung mittels Firebug ist daher gar nicht möglich. Meine Zeit ist kostbar und momentan leider sehr begrenzt.

LG

Edit: 08.11.2015, 18:05
Soeben Live in meiner Testumgebung (ohne Board3Portal) eingespielt, getestet, ---> passt (Prosilver-Standard) phpBB - 3.0.14

Einfach ein wenig ausprobieren. Bspw. --> XXXpx in padding-bottom ändern (von Fall zu Fall) - - erneutes Beispiel: vgl. obige CSS-Deklarationen -> common.css für

Code: Alles auswählen

.bottomfixedheader {
   padding-bottom: 262px;
}

Evtl. hilft´s dir weiter. Oder es hat jemand eine andere Idee. Lösungen sind ja oftmals vielfältig, auch je nach Konzept.

Grüße

[Kirk]

Hallo
Ändere doch mal die css so um:

Code: Alles auswählen

.topfixedheader {
    font-family: Verdana,sans-serif;
    font-size: 10px;
    left: 0;
    padding: 20px;
    position: fixed;
    right: 0;
    top: -8px;
    z-index: 20000;
}

.bottomfixedheader {
   padding-bottom: 148px;
}

Danach das hier nicht vergessen: KB:tippstyles

[Talk19zehn]

Hi Kirk, das geht so natürlich auch, gute Idee. Ohne "border" ist´s auch ganz schick.
Es verändert *mein erstes Konzept ein wenig. Würde man, wie darin anfänglich berichtet, auch weitere Teile (z.B. Texte oder kleine Icons einbinden) wollen, würden sie sich im Standard bis in die index_body.html hinein ...

• *dafür kurze HTML-Beispiele:

  Code: Alles auswählen

  	<div style="clear: both;"></div>
  	<p>Welcome to my board</p>
  	<br /><h2>Only some kind of words ... </h2>
  	</div></div>

  Denkbar war/ist z.B. {SITENAME}, {SITE_DESCRIPTION} bei Bedarf ggf. in geänderter Notation zu versetzen und zentriert auszugeben:

  Code: Alles auswählen

  <div style="clear: both;"></div>
  <h2>{SITENAME}</h2>
  <p>{SITE_DESCRIPTION}</p>
  </div></div>

... überlappen. Warum: Der untere Abstand padding-bottom: 148px; ist nicht ausreichend bemessen, ist zu gering.

Der Text ist nun linksseitig (Standard) anstatt mittig (vgl. neue CSS-Regeln von Kirk).

Tipp: Möchte man also zusätzlich, *wie beschrieben, ein wenig agieren, muss man ein wenig "zirkeln" und das padding-bottom erhöhen, CSS-Teile ggf. wieder hinzufügen, anpassen. Sonst gilt meine erste inhaltliche Aussage nicht mehr.

Die "Fixierung" hast du ja ziemlich geschickt versteckt. Beste Grüße

[Canndy]

Hallo,

super das hat alles auf meinem Testforum funktioniert.
Ihr seid die besten

Jetzt noch ein Backup vom richtigen Forum machen und alles einfügen.
Das mach ich aber am Wochenende.

Lg Canndy

Danke für die schnell Hilfe

[Canndy]

Hallo,
gibt es noch eine funktion das dir Kopfzeile bei Mobilen Geräte (Handy) sich mit vergrößert und sicht nicht zusammenschiebt bis man kaum noch was auf dem Handy zu sehen ist.
Danke schon mal.
Lg Canndy