Kopfzeile immer sichtbar machen

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Canndy
Mitglied
Beiträge: 9
Registriert: 28.06.2015 12:07

Kopfzeile immer sichtbar machen

Beitragvon Canndy » 08.11.2015 09:16

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
Ehemaliger
Beiträge: 4376
Registriert: 08.06.2009 12:03

Re: Kopfzeile immer sichtbar machen - Header fixieren

Beitragvon Talk19zehn » 08.11.2015 12:13

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

Canndy
Mitglied
Beiträge: 9
Registriert: 28.06.2015 12:07

Re: Kopfzeile immer sichtbar machen

Beitragvon Canndy » 08.11.2015 14:56

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
Ehemaliger
Beiträge: 4376
Registriert: 08.06.2009 12:03

Re: Kopfzeile immer sichtbar machen

Beitragvon Talk19zehn » 08.11.2015 15:29

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

Canndy
Mitglied
Beiträge: 9
Registriert: 28.06.2015 12:07

Re: Kopfzeile immer sichtbar machen

Beitragvon Canndy » 08.11.2015 16:00

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
Ehemaliger
Beiträge: 4376
Registriert: 08.06.2009 12:03

Re: Kopfzeile immer sichtbar machen

Beitragvon Talk19zehn » 08.11.2015 17:04

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

Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 5491
Registriert: 24.05.2010 08:31
Kontaktdaten:

Re: Kopfzeile immer sichtbar machen

Beitragvon Kirk » 08.11.2015 19:22

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: Änderungen am Style sind nicht sofort sichtbar (Template-Caching)

Talk19zehn
Ehemaliger
Beiträge: 4376
Registriert: 08.06.2009 12:03

Re: Kopfzeile immer sichtbar machen - Header fixieren

Beitragvon Talk19zehn » 08.11.2015 20:16

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

Canndy
Mitglied
Beiträge: 9
Registriert: 28.06.2015 12:07

Re: Kopfzeile immer sichtbar machen

Beitragvon Canndy » 09.11.2015 18:57

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

Canndy
Mitglied
Beiträge: 9
Registriert: 28.06.2015 12:07

Re: Kopfzeile immer sichtbar machen

Beitragvon Canndy » 23.11.2015 21:15

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


Zurück zu „[3.0.x] Styles, Templates und Grafiken“