2 replies [Last post]
Lumio
Lumio's picture
Offline
newbie
Last seen: 13 years 30 weeks ago
Joined: 2008-05-05
Posts: 2
Points: 0

Hi!
My first post. I really try to write this post in good english Laughing out loud But I think I'll fail Wink

Ok... my problem is as shown:

On this picture you see the white box (=the textbackground) with 2 green boxes (the very top of the background and also the bottom of it) and the red box for the text.

So what I want is the following: I want, that the top and the bottom of the background is different as the center and also start the text already in the top background-box. So it would be done easy... but the next problem: the background has transparent parts Wink

I already tried a litte:

As you can see it would be easy. But now... where is the center part of the background.
There is where I have to stop. I don't know how to place the center of it.

When I try to add that center part it looks like this:

(the grey shadow at the very left and right is fine... but the rest)
As you can see, the center part starts at the right place but I told him to be 100% and so it gets out of the mainbox.
To give you a better view, where the Div-boxes are:

And here some parts of the code:
body-Tag Structure

	<div id="bgShadowLeft"></div>
	<div id="bgShadowRight"></div>
	<div id="menuBackground"></div>
	
	<div id="menu"></div>
	<div id="mainLayer">
		<div id="boxTop"></div>
		<div id="boxContent">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
		</div>
		<div id="boxCenter"></div>
		<div id="boxBottom"></div>
		
			
	</div>

CSS

body {
	background-image:url(../images/background.jpg);
	background-repeat:repeat;
	background-position:top center;
	background-attachment:scroll;
	
	font-family:Helvetica, Arial, Verdana;
	font-size:0.8em;
	
	height:100%;
}
div { border:1px solid #800000; }

#bgShadowLeft {
	background-image:url(../images/bgShadowLeft.png);
	background-repeat:repeat-y;
	background-position:top left;
	
	position:fixed;
	left:0;
	top:0;
	
	width:114px;
	height:100%;
	z-index:2;
	border:none;
}
#bgShadowRight {
	background-image:url(../images/bgShadowRight.png);
	background-repeat:repeat-y;
	background-position:top right;
	
	position:fixed;
	right:0;
	top:0;
	
	width:87px;
	height:100%;
	border:none;
}

#mainLayer {
	position:absolute;
	left:50%;
	top:120px;;
	width:616px;
	margin-left:-308px;
	z-index:6;
	background-color:#808080;
}

#menuBackground {
	background-image:url(../images/menuShadow.png);
	background-repeat:repeat;
	
	position:absolute;
	left:0;
	top:0;
	
	width:100%;
	height:150px;
	z-index:1;
}
#menu {
	position:absolute;
	left:50%;
	top:0px;;
	width:600px;
	height:125px;
	margin-left:-300px;
	z-index:5;
}

#boxTop {
	position:absolute;
	top:0;
	left:0;
	width:616px;
	height:218px;
	
	background-image:url(../images/box_top.png);
	background-repeat:no-repeat;
}
#boxCenter {
	position:absolute;
	top:218px;
	left:0;
	width:616px;
	height:100%;
	
	background-image:url(../images/box_center.png);
	background-repeat:repeat-y;
	margin-bottom:439px;
	z-index:7;
}
#boxBottom {
	position:absolute;
	bottom:0;
	left:0;
	width:616px;
	height:221px;
	
	background-image:url(../images/box_bottom.png);
	background-repeat:no-repeat;
	z-index:7;
}
#boxContent {
	position:relative;
	padding:16px;
	padding-top:1px;
	padding-bottom:4px;
	z-index:10;
}

Thanks in ahead Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 days 22 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Lumio wrote:And here some

Lumio wrote:
And here some parts of the code:

Where does it say we need parts of the code? Please post it all, or better yet a link to the page, if it's online.

Verschwindende wrote:
  • CSS doesn't make pies

Lumio
Lumio's picture
Offline
newbie
Last seen: 13 years 30 weeks ago
Joined: 2008-05-05
Posts: 2
Points: 0

I already found out how to

I already found out how to do that:
All in is the same... and in CSS:

#mainLayer {
	position:absolute;
	left:50%;
	top:120px;;
	width:616px;
	margin-left:-308px;
	z-index:6;
	
	padding-top:218px;
	
}

#boxTop {
	width:616px;
	height:218px;
	margin-top:-218px;
	
	background-image:url(../images/box_top.png);
	background-repeat:no-repeat;
}
#boxCenter {
	position:absolute;
	width:616px;
	top:218px; /* here the tricky thing */
	bottom:221px; /* here again */
	
	background-image:url(../images/box_center.png);
	background-repeat:repeat-y;
	z-index:7;
}
#boxBottom {
	width:616px;
	height:221px;
	
	background-image:url(../images/box_bottom.png);
	background-repeat:no-repeat;
	z-index:7;
}
#boxContent {
	position:relative;
	padding:16px;
	padding-top:1px;
	padding-bottom:4px;
	z-index:10;
	margin-top:-218px;
	margin-bottom:-218px;
}

But it doesn't work in IE6. I'll get it out Laughing out loud