Topic: Slices CSS and backgrounds Pages that link to <a href="https://ozoneasylum.com/backlink?for=22818" title="Pages that link to Topic: Slices CSS and backgrounds" rel="nofollow" >Topic: Slices CSS and backgrounds\

 
Author Thread
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 08-05-2004 01:22 Edit Quote

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)

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

IP logged posted posted 08-05-2004 05:21 Edit Quote

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

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 08-05-2004 06:12 Edit Quote

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

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 08-05-2004 17:52 Edit Quote

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)

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 08-05-2004 21:00 Edit Quote

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

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

IP logged posted posted 08-06-2004 05:39 Edit Quote

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)

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 08-07-2004 16:01 Edit Quote

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

MalFunkShun
Maniac (V) Inmate

From: few miles outside philly
Insane since: Jul 2001

IP logged posted posted 08-07-2004 23:48 Edit Quote

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)

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 08-09-2004 05:58 Edit Quote

This may help:

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

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 08-13-2004 16:29 Edit Quote

[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



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu