Fragen und Antworten » Header und Shoutbox

07.10.2012 01:18

Mizzet
#1 Header und Shoutbox

Mi

1. Frage:
Wie kann ich den Header fixieren, so das dieser auch beim scrollen immer am oberen Bildschirmrand stehen bleibt?

2. Frage;
Ich habe eine Shoutbox mit folgendem Codesegment eingebunden

1
2
3
4
5
6
7
8
 
<td style="width:20%; height:100%; vertical-align:top; background-color:#4d4d4d;">
 
<!-- Beginn Code www.Speechbox.de // (Shoutbox)-->
<iframe name="speechbox" allowTransparency="true" frameborder="0" style="width:100%; height:100%;" src="http://42318.speechbox.de"></iframe>
<!-- Ende Code www.Speechbox.de // -->
{{user_registered==true.end}}
 
</td>
 

Nun ist Chrome aber der einzige Browser welcher diese Anweisung wie gewünscht darstellt:

Alle anderen Browser stellen diese Anweisung wie folgt dar:

Wo liegt der Fehler? Wer kann mir helfen? Ich dreh noch durch.

Forum der 24ten Panzerdivision - Wot-Clangaming

Antworten

Beitrag melden

#2

07.10.2012 13:50 (zuletzt bearbeitet: 07.10.2012 13:51)

Mizzet
#2 RE: Header und Shoutbox

Mi

Mizzet

Das mit der Shoutbox hat sich erledigt. Wieder mal was wichtiges über Chrome vs den Rest der Welt gelernt.

Wäre aber noch ganz kuhl wenn mir einer mit der Headergeschichte weiterhelfen könnte.

Forum der 24ten Panzerdivision - Wot-Clangaming

Antworten

Beitrag melden

#3

13.10.2012 23:36

Mizzet
#3 RE: Header und Shoutbox

Mi

Mizzet

Sorry, aber ich muß das jetzt mal pushen.
Die Frage mit dem Header muß sich doch lösen lassen....

Das Grundprinzip ist ja klar; eine Styleanweisung mit position: fixed und evtl. noch ein z-index sollten das gewünschte Ergebnis herbeiführen, nur....
wo zum Kuckuck muß ich die Anweisung einfügen?
Ich komme einfach nicht weiter. Ich habe die einzelen Templaterubriken durchsucht und auch verschiedene Varianten im CSS-Bereich ausprobiert, aber nichts hat funktioniert.

BITTE HELFT MIR! Den Header zu fixieren ist unerläßlich für das geplante Layout.

Forum der 24ten Panzerdivision - Wot-Clangaming

Antworten

Beitrag melden

#4

14.10.2012 08:04 (zuletzt bearbeitet: 14.10.2012 08:04)

Mizzet
#4 RE: Header und Shoutbox

Mi

Mizzet

Hilf dir selbst dann hilft dir Gott, oder so ähnlich.
Also wie folgt gelöst:
Template-Entwicklung → Obere Leiste
Die Zeile

1
 
	<div class="wrap" id="obere_leiste">

durch diese ersetzen

1
 
	<div class="wrap" id="obere_leiste" style="position:fixed; z-index:5;">

Nun muß nur noch der BODY auf Abstand gehalten werden und fertsch.

Forum der 24ten Panzerdivision - Wot-Clangaming

Antworten

Beitrag melden

#5

14.10.2012 11:56

Olaf
#5 RE: Header und Shoutbox

Ol

Olaf

Hallo

Wenn man Templateeingriffe vermeiden kann,dann soltte man es auch ausnutzen.
Ich habe mal für Deinen Wunsch nur reine CSS Anweisungen ausgearbeitet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
#cat_47  {
     padding-top: 120px ! important;
}
 
#breadcrumbs {
padding-top: 120px ! important;
}
 
.options {
     margin-top: 10px ! important;
     z-index: 0;
}
 
#obere_leiste {
     position: fixed;
     z-index: 60;
}
 

Ob noch Zusatzanweisungen erstellt/ergänzt werden müssen bei z.B. einer PN kann ich als Gast nicht prüfen.

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

Antworten

Beitrag melden

#6

14.10.2012 16:55

Mizzet
#6 RE: Header und Shoutbox

Mi

Mizzet

*Facepalm*
Ja, hast recht und mich endlich mit der Nase auf die richtigen Stellen gestoßen. Ohne Dich hätte ich mich echt noch blöd gesucht. (Kommentare sind nicht gerade die Stärke von den Softwarelern bei XOBOR )

Ich habe Deinen Code noch um ein paar Anweisungen erweitert. Jetzt funktioniert das auch ordentlich.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
body {background-attachment: fixed;}
 
#obere_leiste {position: fixed; width: 100%; z-index: 60;} 
 
#breadcrumbs {padding-top: 120px ! important;}
 
.content table {padding-top: 100px;}
 
.options {margin-top: 10px ! important; z-index: 0;}
 
td.main {padding-top: 80px;}
 
.psidebar {margin-top: 120px; position: fixed; width: 180px;}
 
.proright_wrap {width: 70%; margin: 120px 15% 0px; float: left;}
 