Forum immer zentral zum Hintergrund

Peter3 · Beitrag von **Peter3** » 17.05.2012 20:24

Hallo, ich durchforste nun schon mehreren Stunden das Internet und bin leider nicht fündig geworden, auch mit probieren kam ich leider auf keine Lösung.

Meinen Forencontent habe ich auf eine feste Breite gebracht und zentriert. (Prosilver)

common.css

Code: Alles auswählen

#wrap {
	padding: 0 20px;
	width: 910px;
	margin: 0 auto;
}

Dann habe ich einen Background eingefügt und diesen zentriert:

colours.css

Code: Alles auswählen

html, body {
	color: #536482;
	background-color: #000000;
	background-image: url('http://www.mentally-disordered.de/forum/styles/prosilver/theme/images/bg.gif');
	background-repeat: no-repeat;
	background-position: top center;
	margin: 0 auto;
}

Es geht nun um folgendes Problem:

Auf hoher Auflösung ist das Forum zentral zum BG, wenn man das Fenster allerdings minimiert bzw.
wenn man eine geringe Auflösung hat, dann schiebt sich der BG unter dem Forum entlang.

Ich möchte aber, dass das Forum immer zentral über dem BG steht!

Wäre super, wenn mir jemand dabei helfen könnte!
Danke im Vorraus!

Grüße Peter

Forenlink

Beitrag von **Crizzo** » 17.05.2012 20:36

Hi,

so einfach geht das nicht. Denn wenn das Browser-Fenster zu klein ist, scheitert die "Zentrierung" des Forum, weil "margin: 0 auto" funktinoiert nur, wenn es auch Randabstände gibt, die man automatisch einstellen kann. Sobald das Fenster zu klein ist, sind die Abständie 0 und dann wird nichts mehr gemittelt.

Das Hintergrundbild dagegen wird mit center, immer in der Mitte vom Browser-Fenster gehalten und deshalb links und rechts abgeschnitten, wenn das Browser-Fenster zu schmal wurde.

Also versuch mal ein weiteres Div-Element um den div#wrap zu legen und dann diesem das Hintergrundbild zu geben und das dann zu zentrieren.

Grüße

Peter3 · Beitrag von **Peter3** » 17.05.2012 21:10

Vielen Dank für die schnelle Antwort, ich habe es mal umgesetzte, irgendetwas scheint jedoch nicht zu stimmen, der bg wird nicht angezeigt, hier die codes:

common.css ( #bgwrap habe ich hier eingefügt, soll der div container sein, der #wrap dann umschließt )

Code: Alles auswählen

/* Main blocks
---------------------------------------- */
#bgwrap {
	background-image: url('http://www.mentally-disordered.de/forum/styles/prosilver/theme/images/bg.gif');
	background-repeat: no-repeat;
	width: 1500px;
}
	
#wrap {
	padding: 0 20px;
	width: 910px;
	margin: 0 auto;
}

colours.css (Hab den code fürs Bild hier wieder zurückgesetzt)

Code: Alles auswählen

html, body {
	color: #536482;
	background-color: #000000;
}

overall_header.html ( Hier habe ich den neuen Div Container eingesetzt:

Code: Alles auswählen

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div id="bgwrap">
<div id="wrap">

Find:

Code: Alles auswählen

			<span class="corners-bottom"><span></span></span></div>
		</div>

Add after:

Code: Alles auswählen

</div>

Wo liegt der Fehler?

Forenlink

Beitrag von **Crizzo** » 17.05.2012 21:14

Die CSS-Regel:

Code: Alles auswählen

#bgwrap {
   background-image: url('http://www.mentally-disordered.de/forum/styles/prosilver/theme/images/bg.gif');
   background-repeat: no-repeat;
   width: 1500px;
}

kann ich auf deiner Seite nirgends finden. Hast du die neue Datei korrekt hochladen und danach das Theme aktualisiert?

Peter3 · Beitrag von **Peter3** » 17.05.2012 21:39

Danke für den Hinweis, als ich vorhins die Auflösung Probeweise runtergestellt habe, hat sich die Anordnung auf meinem Desktop verändert, dadurch habe ich die falsche common Datei hochgeladen.

Ich habe noch folgende margin Zeile hinzugefügt:

Code: Alles auswählen

#bgwrap {
	background-image: url('{T_THEME_PATH}/images/bg.gif');
	background-repeat: no-repeat;
	width: 1500px;
	margin: 0 auto;
}

Jetzt klappt soweit alles ganz gut, es ergaben sich allerdings folgende zwei Probleme:

1. Oben und unten nimmt das BG einen Abstand zum Rand ein, liegt das an einem Padding?
2. Das Fenster nimmt nun Bezug zu den 1500px. Dadurch muss eine 1024er Auflösung nach rechts scrollen.
Der hellbraune, gerahmte Teil des BGs ist 1024px breit und nur dieser Teil soll auf entsprechender Auflösung angezeigt werden.
Soll heißen den grauen Rand links und rechts sollen nur höhere Auflösungen sehen.

Ich denke dazu muss ich mein BG image teilen, richtig? In drei Teile.
Wie bzw, wo soll ich dann die Bildteile links und rechts einfügen?

Vielen Dank für die tolle Hilfe.

Beitrag von **Crizzo** » 17.05.2012 21:43

Peter3 hat geschrieben: 1. Oben und unten nimmt das BG einen Abstand zum Rand ein, liegt das an einem Padding?

Nein, padding eines Elementes hat keine Auswirkung auf Hintergrundbilder/-farben. Aber das "padding" von body hat eine Auswirkung, weil deshalb das #bgwrap nicht direkt an der Oberkante beginnt, sondern erst nach dem "padding-top" von body.

2. Das Fenster nimmt nun Bezug zu den 1500px. Dadurch muss eine 1024er Auflösung nach rechts scrollen.
Der hellbraune, gerahmte Teil des BGs ist 1024px breit und nur dieser Teil soll auf entsprechender Auflösung angezeigt werden.
Soll heißen den grauen Rand links und rechts sollen nur höhere Auflösungen sehen.

Versuch mal eine width: 95% oder sowas oder gib direkt dem #wrap die bg-image und ein bisschen mit dem padding spielen.

Peter3 · Beitrag von **Peter3** » 17.05.2012 22:16

Danke, die Ränder sind jetzt oben und unten weg.

Das Problem mit den 1500px konnte ich so allerdings nicht lösen.
Wenn ich den BG in #wrap rein bringe, wird das Bild beschnitten (da die Forenbreite ja auf 910px eingestellt ist und auch so bleiben soll.)
Stelle ich width auf 95%, dann stimmt das Verhältnis BG - Forum nicht mehr.

Wäre es nicht möglich #bgwrap auf 1024px zu stellen und dann den BG in 3 Bilddateien zu teilen?
Sodass der linke Bildrand einfach links am Container ist und der rechte Bildrand rechts am Container?

edit:
Ich habe den BG jetzt mal geteilt - Der Mittelteil ist jetzt 990px breit, #bgwrap wurde also ebenfalls auf 990px gestellt.
(Damit muss man nun auf 1024er Auflösung nicht mehr nach links und rechts scrollen.)
Jetzt müssen nur noch die abgeschnittenen Teile vom BG links und rechts eingefügt werden. Aber wie?
Forenlink

Beitrag von **Talk19zehn** » 18.05.2012 00:15

Hi Peter3, es ist sehr lobenswert, wie du dich bemühst. Glücklicherwesie sind die 1500px / bgwrap, die doch ziemlich hinderlich waren, inzwischen geändert.

Hier findest du bestimmt etwas, woran du dich orientieren kannst oder gar nutzen möchtest.
Mein Tipp: http://www.spieleresidenz.de/

=============================================
Ich persönlich weise direkt in der common.css dem Body ( ---> body {..... --> folgende Zeilen wären hierin zu ergänzen )

das Hintergrundbild zu, sofern man sich damit anfreunden kann und habe dann im Grunde keine Sorgen. Zugegebenermaßen muss das Bild eine entsprechende Größe haben oder repeat genutzt werden.

Code: Alles auswählen

background: url("#") fixed;

und gebe hierin ebenso eine prozentuale Breite vor:

Code: Alles auswählen

width: 92%;

fixed, center etc. bitte selbst ausprobieren.

=============================================

Des Weiteren habe ich bspw. folgendes an anderer Stelle ausprobiert: common.css

Code: Alles auswählen

#wrap {
	padding: 0 20px;
	width: 90%;
	min-width:650px;
	background-color: #FFF;
	margin: 0px auto;
}

Code: Alles auswählen

.bildlinks {
	width: auto;
	height: auto;
	background-color: #465673;
	background-image: url("{T_THEME_PATH}/images/dein_bild.gif");
	background-position: top left;
	background-repeat: repeat-y;
}

==== > background-color: #465673; entspricht hier einem passenden Farbton des Bildes, welches ca. 100px in der Breite hat und sich vertikal wiederholen läßt (Höhe 30px). Nicht jede Grafik ist dafür geeignet.

overall_header.html
vor

Code: Alles auswählen

<div id="wrap">

eingefügt

Code: Alles auswählen

<div class="bildlinks">

overall_footer.html
vor

Code: Alles auswählen

<div class="copyright"............

den Container geschlossen

Code: Alles auswählen

</div><!-- ende bildlinks //-->

<!-- Anfang Zierleiste //-->
	<div class="headerbar" style="margin-top:50px;">
		<div class="inner"><span class="corners-top"><span></span></span>
		<!-- <p> &nbsp; </p> //-->
 		<span class="corners-bottom"><span></span></span></div>
	</div>
<div style="clear: both;"></div>
<!-- Ende Zierleiste //-->

Der Effekt ist ganz witzig und relativ unkompliziert gestalbar. Das entspricht jedoch meinen individuellen Anpassungen, die du bitte auch an anderer Stelle anpassen musst, sofern diese Idee für dich überhaupt in Frage käme. Und, es ist nur ein Ansatz, keine fertige Lösung.
Ich hatte hinsichtlich einer Rahmung vielerlei ausprobiert. Vielleicht hilft dir Suche?

Viel Glück!

Peter3 · Beitrag von **Peter3** » 18.05.2012 02:11

Hallo Talk19zehn,
vielen Dank für deine Antwort, dieser Tipp ist Gold wert!

Als du den Beitrag verfasst hast, war ich gerade selber am rumprobieren und wollte es dann ähnlich deiner Lösung einbinden,
mir fehlt da jedoch so etwas das know how - Jedenfalls den <div> im Footer zu schließen ist genial.

-> Damit wird der restliche Forencontent nicht "weggedrückt" (!)

Ich habe die Codes etwas nach meinen Wünschen angepasst:

Code: Alles auswählen

/* Main blocks
---------------------------------------- */
#bgl {
   width: auto;
   height: auto;
   background-image: url("{T_THEME_PATH}/images/bgl.gif");
   background-position: top left;
   background-repeat: no-repeat;
   margin: 0px -250px
}

#bgr {
   width: auto;
   height: auto;
   background-image: url("{T_THEME_PATH}/images/bgr.gif");
   background-position: top right;
   background-repeat: no-repeat;
}

#bgwrap {
	background-image: url("{T_THEME_PATH}/images/bg.gif"');
	background-repeat: no-repeat;
	width: 990px;
	margin: 0 auto;
}

1024er Auflösungen müssen nicht scrollen, um das Forum zu sehen, der linke Rand wird nicht angezeigt.
(Zwar kann man jetzt noch nach rechts scrollen, zum rechten Bildrand, aber das ist nun nicht weiter schlimm)

Und der BG, die Ränder und das Forum sind immer auf gleicher Breite ausgerichtet. Super!

edit: Jetzt liegt noch folgendes Problem vor:
Der BG richtet sich ja immer nach dem Content. Wenn der Content allerdings zu klein ist, wird der BG entsprechend unten abgeschnitten.
Ich habe versucht "html, body" eine min-height zu geben, das erzielt allerdings nicht den gewünschten Effekt. Hat dazu jemand eine Idee?
(Vom BG sollen bspw. immer 800px in seiner Höhe dargestellt werden.)

Das Problem wird ganz besonders im Newsbereich deutlich.

Gute Nacht dann, Peter

phpBB.de

Forum immer zentral zum Hintergrund

Forum immer zentral zum Hintergrund

Re: Forum immer zentral zum Hintergrund

Re: Forum immer zentral zum Hintergrund

Re: Forum immer zentral zum Hintergrund

Re: Forum immer zentral zum Hintergrund

Re: Forum immer zentral zum Hintergrund

Re: Forum immer zentral zum Hintergrund

Re: Forum immer zentral zum Hintergrund

Re: Forum immer zentral zum Hintergrund