Topic: Slices CSS and backgrounds

I am trying to apply the following slices (see image) into a div tag arrangment in such a way that the div content can stretch horizontally and vertically. Ultimately to allow the content to float over the background images. For clarification, I have named the slices A.. through H.
Here is the images... then I will try and explain what each slice should be doing:



A - Background Image TOP-LEFT
B - Background Image REPEATS ACCROSS TOP
C - Background Image TOP-RIGHT
D - Background Image REPEATS DOWN LEFT SIDE
E - Background Image BOTTOM-LEFT
F - Background Image REPEATS ACCROSS BOTTOM
G - Background image Repeats DOWN RIGHT SIDE
H - Background Image BOTTOM-RIGHT

Here is what I have started with: http://www.meetscoresonline.com/temp/ui_content.html
[css found in html example]


Question? Am I way off with this example here? I created "ui_content" div-wrapper, then used abosolute positioning to position my background and backround repeat elements accordingly... It isn' working very well though.

<div class="ui_content">
<div class="ui_content_right_top"/>
<div class="ui_content_right_rpt"/>
<div class="ui_content_top_rpt"/>
<h3 class="title">Testing...</h3>
<p>This is the content</p>
<p>This is the content</p>
<p>This is the content</p>
</div>

[edit]Removed example CSS from this post and elaborated on the *intent* of the above HTML[/edit]

(Edited by Karl on 08-05-2004 01:44)

looks like you can work with a fixed width. That means you can get rid of all that stuff you got there.

and slice it 3 times that's it.

TOP = header/title/blah - include everything you would want in C for the background
MIDDLE = content / set background image as the whole width with the shadows /repeat y only/ x no-repeat - use negative padding to move your content into the header.
BOTTOM = footer/ bottom image

Set top padded and everything else should be set to relative.
Don't make it harder than it has to be.

Apply everything relative

But it needs to be able to stretch in the y direction and the x direction....

Okay, let me ask this question:

How would you create layer for slice "C" which will stay on the top and right... and create a layer for slice "B" which will fill the top left to right? I will need one additional layer to contain the TITLE which will float above these two layers.

How can this be done? Uggg, I'm lost!
Should I be using tables?

[edit]
I've updated my example online. I don't understand why the div with class "ui_content_title" is not contained by the dive with class "ui_content". When I change the size of the page, the "ui_content_title" div is hooked to the right of the browser, not it's containing block. Is this an IE fault?
[/edit]
Karl

(Edited by Karl on 08-05-2004 18:06)

I'm closer!
I've updated my example at:
http://www.meetscoresonline.com/temp/ui_content.html

Notice the 2nd example: content overflows... but I need help stretching the left repeat elements and right repeat elements.

Karl

Okay,
when i sat down to do it myself I totally understand where you were coming from with that diagram. The only way you are going to get the desired effect is to follow a 3 column format. Use something like this here.
Your left and right columns will be fixed widths and only large enough so you can see the shadow you are placing into the background and maybe some padding for your text with the grey. This will be your main content area. Do the same for your Header (title area) and the same for the footer.

FIXED|SPAN SPAN SPAN SPAN|FIXED|
---------------------------------------
|1 |222222222222222|3333333333| HEADER
|1 |222222222222222|3333333333| { this area fixed height for right background
|1 |222222222222222|3333333333|
==========================
|1 |222222222222222222222222|3| CONTENT
|1 |222222222222222222222222|3|
|1 |222222222222222222222222|3|
|1 |222222222222222222222222|3|{ this area use negative padding top to move content into header
|1 |222222222222222222222222|3|...because of right background in header
|1 |222222222222222222222222|3|
|1 |222222222222222222222222|3|
|1 |222222222222222222222222|3|
========================== FOOTER
|1 |222222222222222222222222|3| { similar to CONTENT just different background images
---------------------------------------



(Edited by MalFunkShun on 08-06-2004 05:40)

Uggg... These need to be layers so that the text from 22222222222 can spill over freely into the area 3333333333333.

I think I have a solution, no time to post it now but I will in next day or two.

Karl

2 will spill into the 3 area of the header if you do it the way i have it setup with negative padding of the content area.
but i'm interested in seeing how you are going to accomplish this. maybe i can learn a thing or two.



(Edited by MalFunkShun on 08-07-2004 23:49)

This may help:

http://www.alistapart.com/articles/customcorners2/

[originally posted in site review and copied over here to complete this thread]

I used absolute positioning and normal positioning with CSS. Here is the CSS:
http://www.ultimateimage.lfchosting.com/style/ui_content.css

And here is the XSLT document which is responsible for producing all of those swoop grey areas:

http://www.ultimateimage.lfchosting.com/documents/incl_ui_content.xsl

Karl