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. :wink:


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

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? 8) 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. :oops:

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) - :wink: - 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

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. 8)
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.

8) Die "Fixierung" hast du ja ziemlich geschickt versteckt. :wink: 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 :P

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