Hintergrund dreigeteilt

[JFooty]

jetzt hab ich bei den hintergründen noch nen "außenrahmen" der dunkelblau ist. ich hätte es lieber, wenn der hintergrund komplett mit anschlag links und rechts ist.

Dazu musst du entweder die Position der Hintergrundbilder anpassen oder die Breite der div-Container etwas verringern.
Ich würde letzteres bevorzugen. Ändere also mal die Breite für div#background3left und div#backgroundright auf 350px. Für das rechte Bild müsste auch noch das hier:

Code: Alles auswählen

background: darkblue url(./images/backgroundR.jpg) no-repeat fixed 0 0;

so abgeändert werden:

Code: Alles auswählen

background: darkblue url(./images/backgroundR.jpg) no-repeat fixed 100% 0;

[tazzi]

Code: Alles auswählen

/* drei geteilter Hintergrund */

div#background3left {
background: #009de0 url(./images/backgroundL.jpg) no-repeat fixed 0 0;
float:left;
width:350px;
height:1200px;
}

div.background3content {
float:left;
width: 500px;

}

div#backgroundright {
background: #009de0 url(./images/backgroundR.jpg) no-repeat fixed 100% 0;
float:right;
width:350px;
height:1200px;
}

ist nun meine css an entsprechender stelle.

kleine probleme bleiben.
1. der rand sollte weg
http://www.tazzi.org/fremdforen/Unbenannt1.PNG
Große Bilder bitte nur verlinken - KB:16 - JFooty

2. kann man die bilder nie ganz sehen, scrollt man runter, werden sie irgendiwe, wie ein rollo, hochgerollt, so daß man nie bis zum unteren ende der bilder kommt, selbst wennd as forum an sich lang genug ist

3. ist es so, daß das forum zwar gerade so in die mitte passt, aber wenn ich das fenster verkleinere, springt es unter die bilder, statt einfach scrollbalken im fenster zu erzeugen. und ich kann das fenster auch nicht beliebig weit auseinander ziehen. das forum passt sich dann nciht an, sondern bleibt klein

[JFooty]

zu 1.)Finde in der stylesheet.css:

Code: Alles auswählen

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #000;
	background: #009de0 url(images/body.gif) fixed;
	font-size: 10px;
	margin: 0;
	padding: 0 10px;
}

Hier sind die letzten beiden Zeilen überflüssig, da ja schon vorher das hier:

Code: Alles auswählen

* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

alle Innen- und Außenabstände erstmal auf 0 setzt.

zu 2.: Finde in der stylesheet.css:

Code: Alles auswählen

background: #009de0 url(./images/backgroundL.jpg) no-repeat fixed 0 0;

bzw.

Code: Alles auswählen

background: #009de0 url(./images/backgroundR.jpg) no-repeat fixed 100% 0;

Ersetze mit:

Code: Alles auswählen

background: #009de0 url(./images/backgroundL.jpg) no-repeat scroll 0 0;

Code: Alles auswählen

background: #009de0 url(./images/backgroundR.jpg) no-repeat scroll 100% 0;

zu3.: Dann musst du mit %-Werten arbeiten, in etwa so:

Code: Alles auswählen

/* drei geteilter Hintergrund */

div#background3left {
background: #009de0 url(./images/backgroundL.jpg) no-repeat scroll 100% 0;
float:left;
width:15%;
height:1200px;
}

div.background3content {
float:left;
width: 69%;

}

div#backgroundright {
background: #009de0 url(./images/backgroundR.jpg) no-repeat scroll 0 0;
float:right;
width:15%;
height:1200px;
}

Ich denke, das kommt deinen Vorstellungen schon ziemlich nahe.

[tazzi]

so, gesagt getan, fast perfekt
css sieht wie folgt aus:

Code: Alles auswählen

/* drei geteilter Hintergrund */

div#background3left {
background: #009de0 url(./images/backgroundL.jpg) no-repeat fixed 100% 0;
float:left;
width:15%;
height:1200px;
}

div.background3content {
float:left;
width: 69%;

}

div#backgroundright {
background: #009de0 url(./images/backgroundR.jpg) no-repeat fixed 100% 0;
float:right;
width:15%;
height:1200px;

nur: das linke bild ist verschwunden, einfach so..

[JFooty]

Setze mal hier die 100% wieder auf 0:

Code: Alles auswählen

div#background3left {
background: #009de0 url(./images/backgroundL.jpg) no-repeat fixed 100% 0;

Also:

Code: Alles auswählen

div#background3left {
background: #009de0 url(./images/backgroundL.jpg) no-repeat fixed 0 0;

[tazzi]

super, das hats gebracht, bleibt noch das "scrollproblem"
soll heißen, wenn ich nun scrolle, rollen sich die beiden bilder sozusagen auf, statt bis zu ihrem fußende zu scrollen.
was kann man dagegen machen?

[WEEDman]

was meinst du mit scrollen sich auf?

und ich würde an deiner stelle z.B. den linken Rand: http://ofdff.tazzi.org/styles/getaway/t ... roundL.jpg - also die weiße Fläche links von den Körpern verkleinern und dem entsprechend das ganze linke Bild schmaler machen, dann sieht es auch bei "normaler" Auflösung (1024*768 px) gut aus

[tazzi]

ja, das sind kleinigkeiten, die ich dann selber hinbekomm, davon mal abgesehen, daß ich mir eh ein neues bild besorgen muß, da ein bandmitglied ausgestiegen ist und dieses bild somit nicht mehr aktuell ist..
die forumseinstellungen, sprich das template und die stylesheet sind erstmal wichtiger, danach kommt die bilderarbeit
und im moment nervt mich dieses gescrolle der bilder. man sieht sie nie ganz. da man, wenn man das forum scrollt, irgendwie die bilder von unten aufrollt, statt bis zu deren ende zu scrollen..

[WEEDman]

ach du meinst das: http://img211.imageshack.us/img211/6716 ... osch32.jpg ,oder?
hmm liegt vllt. an margin oder padding ?!

[tazzi]

genau das! das kann am margin/padding liegen? ok, werd ich heute abend mal in der richtung rumprobieren. Danke


edit: seh grad, da ist gar kein padding oder margin im bereich "dreigeteilter hintergrund"
müßte es dann nicht automatisch ok sein?