Seite 1 von 1
Kopfzeile immer sichtbar machen
Verfasst: 08.11.2015 09:16
von 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
Re: Kopfzeile immer sichtbar machen - Header fixieren
Verfasst: 08.11.2015 12:13
von 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
füge danach in einer neuen Zeile ein
Code: Alles auswählen
<div class="bottomfixedheader"><div class="topfixedheader">
suche
füge
davor ein:
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
Re: Kopfzeile immer sichtbar machen
Verfasst: 08.11.2015 14:56
von 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.
Re: Kopfzeile immer sichtbar machen
Verfasst: 08.11.2015 15:29
von 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
Re: Kopfzeile immer sichtbar machen
Verfasst: 08.11.2015 16:00
von 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
Re: Kopfzeile immer sichtbar machen
Verfasst: 08.11.2015 17:04
von Talk19zehn
Okay, nur leider fehlt der o.g. Einbau zur Zeit gänzlich.
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
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
Re: Kopfzeile immer sichtbar machen
Verfasst: 08.11.2015 19:22
von 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
Re: Kopfzeile immer sichtbar machen - Header fixieren
Verfasst: 08.11.2015 20:16
von 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
Re: Kopfzeile immer sichtbar machen
Verfasst: 09.11.2015 18:57
von 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
Re: Kopfzeile immer sichtbar machen
Verfasst: 23.11.2015 21:15
von 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