Banner oben und Navileiste

[sirschmock]

Guten Morgen,

nach erfolgreicher Hilfe von Euren Admins hab eich jetzt noch eine Frage.

Ist es möglich das meinen Banner und die Navileiste fest verankern kann.

Ich möchte es gerne so haben das sich nur der untere Teil bewegt aber oben alles stehen bleibt.

Würde mich über ein Feedback freuen.

Gruß

SIr Schmock

Bei ienem neuem Thread sehe ich die Buttons Öffnen und Erledigt ist schon komisch.

[Zuckerpuppe]

Hallo,

möglich ist das schon. Dazu muss man die Templates bearbeiten und beiden Elementen eine eigene class zuordnen. Diese muss dann über das CSS festgesetzt werden.
Allerdings würde das nur gehen, wenn man die Navigation über das Logo setzt.

Hier mal ein Screenshot aus meinem Testforum, wie das aussehen könnte:

[sirschmock]

Danke für das Feedback

Ok dann würde ich das gerne mal testen aber weiß leider nicht wie, wenn Du einen Link hast wo ich es finden kann wäre ich sehr dankbar.

Ich weiß das ich nur 1 Frage stellen darf aber das geht aus Deiner Antwort nicht heraus. Ich sehe auf Deinem Pic das die Verlinkung von ganz Links nach Rechts geht, aber ich möchte meine jetzige Verlinkung so haben wie sie momentan ist. Mittig halt.

Danke
Sir Schmock

[Zuckerpuppe]

Nee, keine Angst...die Navizeile sieht bei dir dann genauso aus wie jetzt, nur halt über dem Banner..

Es gibt noch keine Anleitung dazu hier im Forum. Ich setz mich später mal daran und schreib dir das auf.
Ich kann aber noch nicht genau sagen, wann ich das schaffe, da ich jetzt leider schon wieder los muss.

übrigens...wenn du beim Eröffnen eines neuen Threads die Themenicons siehst, dann musst du sie auch sehen, wenn du dein Eingangsposting editierst (also den ersten Beitrag im Thread)

[sirschmock]

Alles klar nur keine Eile, bin ja erst mal am Design drann das sind nur Feinheiten die fehlen zum Schluss.

Und Du wirst es nicht glauben ich sehe die Buttons jetzt

Gruß
Sir Schmock

[Zuckerpuppe]

So, hier nun die Anleitung, um die Navi und das Logo zu fixieren

Schritt 1:

Adminbereich - Anzeige - Templates - Allgemeines - overall_header

Dort suchst du folgenden Abschnitt raus: ( in einem Template ohne Änderungen befindet er sich in Zeile 265 bis 269 )

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

Dort fügst du dort noch folgendes hinzu (grün markiert), um die Navi zu fixieren

<table id="navifix" cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>

Dann suchst du im selben Template folgenden Abschnitt (sollte bei dir nun ab Zeile 249 sein), um das Logo zu fixieren:

Code:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->

Zu diesem Abschnitt fügst du folgendes (grün markiert) hinzu:

<table id="logofix" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_left -->

Jetzt auf "Absenden" klicken und dann in der Liste die Änderung aktivieren, indem du auf das grüne Kreuz klickst.

Nun haben wir für die Navigation und für das Logo eigene IDs erstellt, mit denen wir über das CSS die Position bestimmen und fixieren können. Damit kommen wir auch schon zu Schritt 2.

Schritt 2:

Anzeige - Bilder&Farben - Farben -> Reiter CSS Stylesheet

hier fügst du in das große Feld folgendes ein:

Code:

#navifix{
    height: 25px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
#logofix {
    height: 220px;
    left: 0;
    position: fixed;
    top: 90px;
    z-index: 100;
}
.bodylinewidth {
    margin-top: 25px;
}


So, jetzt sollte die Navi oberhalb des Logos stehen und beides ist fixiert.
Allerdings würde ich dir abraten, das Logo zu fixieren. Es könnte für einige User störend sein, weil es z.B. beim Beitragschreiben über die Texteditor-Icons ragt, wenn man einen längeren Text schreibt und das doch eher hinderlich ist, wie ich eben selber feststellen musste, als ich das in meinem Testforum ausprobiert habe.

Du kannst das ja mal selber austesten und wenn dir das mit dem Logo nicht gefällt, dann entfernst du einfach die Elemente (logofix) wieder.

[Zuckerpuppe]

sorry, ich seh grad, dass ein Teil fehlt, der ins CSS eingetragen werden muss...
Anscheinend hab ich den nicht mit rauskopiert

Diesen Code musst du noch mit ins CSS setzen, damit das Forum an sich etwas nach unten rutscht und der Header nicht auf den Kategorien sitzt...

Code:

.bodyline{
  padding-top:320px;
}


Die Pixelanzahl kannst du noch nach Belieben verändern. Aber ich denke, dass es bei dir passen sollte.

edit: Wichtig! Bitte Beachten! Dieser Code muss nur eingesetzt und angepasst werden, wenn man das Logo auch fixieren möchte.
Wenn man nur die Navi fixiert, braucht man diesen Code nicht einzusetzen!

[sirschmock]

Danke für die Antwort,

habe jetzt mal alles gemacht und klappt auch alles, es wäre nett wenn Du dir das mal anschauen würdest.
Gibt es jetzt noch eine möglichkeit, wenn ich Scrolle das ich das nicht sehe was nach oben gescrollt wird, denn das sieht ja schrecklich aus.
Habe schon mehrere Foren gesehen das es oben stehen bleibt aber es in den Hintergrund verschwindet.

Wenn ich das noch mit Dir schaffen würde wäre ich Super Glücklich.

Grüße aus der EIfel

Sir Schmock

[#Frank]

Du kannst folgendes versuchen:
Setze zu den beiden oberen CSS Einträgen noch diesen Befehl dazu

Code:

z-index: 100;

Zum Hintergrund:
Es gibt auf dem Bildschirm nicht nur die zwei Dimension X und Y, sondern es gibt auch die dritte Dimension Z.
Mit der Z Index Angabe legst du die Reihenfolge der Schichten nach vorn hin fest. Je höher die Zahl um so weiter im Vordergrund liegt das Element.
Sollte es mit dem CSS Eintrag nicht klappen, dann must du das direkt im Tabelle Tag hinter dem ID Eintrag einsetzen. Die Schreibweise lautet dann:

Code:

z-index="100"

Dann sollte dein Foreninhalt hinter dem Logo und der Navi lang laufen.

Edit: fast alles Quatsch, aber du solltest das trotzdem einsetzen.
Dein Problem ist, das deine Navi und deine Logotabelle keine Hintergrundfarbe / Grafik besitzen.
Weil das alles Transparent ist, scheint das natürlich durch wen du runter Scrollst.
Das einfachste ist, wenn du beiden CSS Einträgen noch eine Hintergrundfarbe zuweißt.

[Zuckerpuppe]

Frank, der Foreninhalt geht ja hinter die Elemente.
Der CSS-Code ist schon richtig (bzw das z-index ist schon enthalten) und funktioniert auch.

In seinem Forum ist jedoch der Hintergrund transparent, sodass man den Foreninhalt hinter dem Logo und der Navi sieht.

sirschmock, dann musst du dem Logo und der Navi eine Hintergrundfarbe zuordnen.

Änder mal die CSS-Codes, die ich dir gegeben habe, folgendermaßen um - Diese beiden austauschen:

Code:

#navifix {
    background-color: #000000;
    height: 25px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
#logofix {
    background-color: #000000;
    height: 200px;
    left: 0;
    position: fixed;
    top: 70px;
    z-index: 100;
}


Diesen bitte noch hinzufügen:

Code:


#i_logo {
    margin-bottom: -110px;
    width: 100%;
}

Ich habe als Hintergrundfarbe jetzt mal Schwarz genommen.
Die Farbe ist noch änderbar.

Alternativ kannst du auch ein Hintergrundbild einsetzen.
Dazu musst du im CSS-Code folgendes hinzufügen:

Code:

background-image:url(http://i48.servimg.com/u/f48/17/48/62/10/hg_110.jpg);

[sirschmock]

Einen wunderschönen guten Morgen

zuerst einmal Danke ich Dir das Du mir so tatkräftig zu Seite stehst. Habe alles hinbekommen so wie ich es eigentlich haben möchte.
Aber eine kleinigkeit stört mich bei der ganzen Sache. Auf jeder Auflösung PC oder Lappi oder wie auch immer ist alles Super aber warum erscheint mein Navileiste am Ipad nicht mittig da veruscht alles ??
Das ist das letzt was jetzt noch fehlt.

Du kannst es Dir ja mal anschauen ob ich alles richtig gemacht habe.

Beste Grpße aus der Eifel

Sir Schmock

[Zuckerpuppe]

Das liegt an der Tabelle, die du in die Forenbeschreibung eingesetzt hast.
Die macht das Forum breiter, egal, welche Forenbreite du eingesetzt hast.
Momentan hast du ja 100% eingestellt. Aber wegen der Tabelle wird der Index nicht auf 100% skaliert, sondern in der tatsächlichen Breite angezeigt.
Bei hohen Auflösungen ist das kein Problem, aber bei kleinen Monitoren, bzw Auflösungen sieht man das halt.

Ich habe eine sehr kleine Auflösung (ja, ich liebe meinen alten Monitor )
und sehe deinen Index so, dass ich seitlich scrollen muss und auch dass die Navi und das Logo verschoben sind.
Ebenso wird es mit dem iPad sein, weil der Monitor ja auch recht klein ist.
Schau mal, so sieht es bei mir aus:



Wenn ich jetzt mal die Tabelle verkleinere, dann passt auch alles drauf und ich muss nicht mehr seitlich scrollen.


Entweder verkleinerst du die Tabelle in der Breite oder aber du entfernst die Index-Module. Wenn ich die temporär rausnehme, passt es nämlich auch wieder...schau hier:

[Zuckerpuppe]

Ist das jetzt hier erledigt? Ich sehe, dass du die Index Module rausgenommen hast.
Kann ich abschliessen?

[sirschmock]

Sorry ja ist erledigt.
Und noch einmal vielen Dank für Deine Bemühungen. Findet man nicht oft im Netz.

Grüße aus der Eifel

[Zuckerpuppe]

Prima, freut mich, dass es geklappt hat

-closed-