assembling a sliced image in css?

Hi there,

Can anybody tell me the best way to re-assemble images that have been sliced up ...

I used to use tables but now prefer to use css

Here is what it consists of

Its a white square with rounded corners

So i slice top-left, top-right, bottom-left, bottom-right just so i got the roundness..

The center is effectively WHITE so i didn't slice it... not only that i need to place HTML/TEXT in there anyway.

Any advice greatly appreciateed

Ian
ianinspainAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jmelikaCommented:
Ian,

I usually use a combination of both table and CSS.  Table by itself has a mind of its own.  CSS helps me control it.  I'd do a three column table.  Make the background for the first column your left slice (no-repeat), second column your middle slice (allow repeat), third column for your right slice (no-repeat).  Make sure you specify the width of the first and last columns otherwise they'll be too thin to see since they do not contain any data.  The CSS helps you with the margin, the no-repeat, etc.

About your middle White column, I'd make a very small slice of that and allow the repeat for it like I mentioned.  That way if you have any top or bottom borders, it'll be aligned with the left and right columns.

Good luck
JM
0
ianinspainAuthor Commented:
Hi .. thanks for the reply..

But i am really looking for a pure CSS way?

Are you aware of a pure CSS way of rebuilding sliced images within CSS

Using a DIV or something?? I was thinking of place a div for each image with a large div inside but i really don't think this is the best way

Any additional ideas?

thanks
0
GrandSchtroumpfCommented:
you can use the "Onion Skinned Drop Shadows" technique: http://www.alistapart.com/articles/onionskin/
the link descibes how to make a drop shadow, but the principle is exactly the same.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

M256Commented:
Give this a shot:

<style>
#topleft {
 background:transparent url(http://www.osbornewood.com/images/tulip.gif) no-repeat;
 width: 50px;
 height: 63px;
 float:left;
 }
#topright {
 background:transparent url(http://www.osbornewood.com/images/tulip.gif) no-repeat;
 width: 50px;
 height: 63px;
 float:left;
 }
#bottomleft {
 background:transparent url(http://www.osbornewood.com/images/tulip.gif) no-repeat;
 width: 50px;
 height: 63px;
 float:left;
 clear:left;
 }
#bottomright {
 background:transparent url(http://www.osbornewood.com/images/tulip.gif) no-repeat;
 width: 50px;
 height: 63px;
 float:left;
 }
</style>

<div id="topleft"></div>
<div id="topright"></div>
<div id="bottomleft"></div>
<div id="bottomright"></div>

Of course, you need to change the width, height, and url for each image.

Matthew
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Oliver_DornaufCommented:
Put your image like this:
<img alt="pictogram"   src="...." width="168" height="209" style='width:106px;height:104px;float:left'/>
<img alt="pictogram"   src="...." width="168" height="209" style='width:106px;height:104px;float:left'/>
<img alt="pictogram"   src="...." width="168" height="209" style='width:106px;height:104px;'/>

and you have three images in a line....
0
M256Commented:
Hello again Ian,

I was reading through your question again, and noticed I missed something before.  You want something inside this area.
If the following is not what you are looking for, can you provide either your table code, or a link to it?

Thanks,

Matthew

<style>
#topleft {
 background:transparent url(http://www.osbornewood.com/images/tulip.gif) no-repeat;
 width: 50px;
 height: 63px;
 float:left;
 }
#topright {
 background:transparent url(http://www.osbornewood.com/images/tulip.gif) no-repeat;
 width: 50px;
 height: 63px;
 float:right;
 }
#bottomleft {
 background:transparent url(http://www.osbornewood.com/images/tulip.gif) no-repeat;
 width: 50px;
 height: 63px;
 float:left;
 }
#bottomright {
 background:transparent url(http://www.osbornewood.com/images/tulip.gif) no-repeat;
 width: 50px;
 height: 63px;
 float:right;
 }
#container {
 width:500px;
 }
.clearing {
 clear:both;
 }
</style>
<div id="container">
<div id="topleft"></div>
<div id="topright"></div>
<br class="clearing">
<p>Test paragraph</p>
<div id="bottomleft"></div>
<div id="bottomright"></div>
</div>
0
ianinspainAuthor Commented:
Thanks guys for all the help.

I am nearly there! i hope :-)

Here is a live version of it http://www.cuttingedgedesigns.biz/untitled-1.htm

but basically here it is ( i changed it to an easier version, Top Side and Bottom images)

I got a container, then I place the top image at the top.. then next a div for hold text etc
and then the bottom div.. Works ok apart from center which has a background image that is supposed to repeat Y
and i tried puttting a margin on the center so it brings the center away from the border edges - but this didn't work

I haven't mentioned any Poistion rules due to the fact that i am not posiution it... but i am floating it to the right...

I have not mentioned any sizing etc, i presume this is ok.. because the size will come from the img tags etc?

Thanks once again

<div id="container">
<div id="top"><img src="panel_top.gif" /></div>
<div id="center">
  <p>Test paragraph and more</p>
  <p>tests and more tests</p>
  <p>and more tests </p>
</div>
<div id="bottom"><img src="panel_bottom.gif" /></div>
</div>

Here is the css

#container
{
      float: right ; margin: 100px
}
#center
{
      background-image: url(panel_bg.gif);background-repeat: repeat-y;
      margin: 5px;
}
0
ianinspainAuthor Commented:
oh .. forgot to tell you whats wrong, but you can see with the link anyway..

The background image is supposed to Repeat Y but it doesn't

Ian
0
M256Commented:
Change your margin: 5px; to padding: 5px;

Working code:

<style>
#container
{
     float: right ; margin: 100px
}
#center
{
     background-image: url(panel_bg.gif);background-repeat: repeat-y;
     padding: 5px;
}
</style>
<div id="container">
<div id="top"><img src="panel_top.gif" /></div>
<div id="center">
  <p>Test paragraph and more</p>
  <p>tests and more tests</p>
  <p>and more tests </p>
</div>
<div id="bottom"><img src="panel_bottom.gif" /></div>
</div>
0
ianinspainAuthor Commented:
thanks M256!

Yep that made everything ok

But it doesn't honour the padding now i.e. the words "and more" .. the "more goes right to the end and touches the border

live link updated with example.

i thought padding was inherited so it should inherit down to next block lever??? i.e. the <p>?? no?

Could you also comment on this?

I haven't mentioned any Poistion rules due to the fact that i am not positioning it... but i am floating it to the right...

I have not mentioned any sizing etc, i presume this is ok.. because the size will come from the img tags etc?
0
M256Commented:
It is padded correctly.  It just doesn't look like it because your image is only 160px wide.
Give this a try:

<style>
#container
{
float: right;
margin: 100px
}
#center
{
background-image: url(panel_bg.gif);
background-repeat: repeat-y;
background-position:right;
width:160px;
padding:5px;
}
</style>
<div id="container">
<div id="top"><img src="panel_top.gif" /></div>
<div id="center">
  <p>Test paragraph and more</p>
  <p>tests and more tests</p>
  <p>and more tests </p>
</div>
<div id="bottom"><img src="panel_bottom.gif" /></div>
</div>

It's goofy in Netscape/Firefox; I'll take another look when I have time.

Matthew
0
ianinspainAuthor Commented:
Ahhh ... I think i got it...

I put a margin of <p> and its fine now....

Perfect... thats good but just uploaded the live link again..

and the <p> area is overflowing .. take a look..

http://www.cuttingedgedesigns.biz/untitled-1.htm

I have set a width too, but it overflows, I looked at the overflow property but that doesn't seem to help

I thought a <p> inside a div  ... its size is controlled by the div??
0
ianinspainAuthor Commented:
Nope skip that last part... it doesn't flow over... ONLY if the a word (i.e. no spaces) if larger that the area... so its ok

If anybody can answer the following for me, and i will assign points.. Thanks once again

I haven't mentioned any Poistion rules due to the fact that i am not posiution it... but i am floating it to the right...

I have not mentioned any sizing etc, i presume this is ok.. because the size will come from the img tags etc? I don't need to set widths do?
0
M256Commented:
There's a couple of ways to deal with that overflow.  My favorite:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
#container
{
      float: right ; margin: 100px
}
#center
{
      background-image: url(panel_bg.gif);background-repeat: repeat-y;
      padding:5px;
      width: 160px;
      overflow: hidden;
}
p
{
      margin: 10px
}
</style>
</head>

<body>

<div id="container">
<div id="top"><img src="panel_top.gif" /></div>
<div id="center">
  <p>Test paragraph and morefhfhfhfhfh fhfhfhfhfhfhfhjf hf h dd ddgh fff ss sss ssss sss ssssssssssss gdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdgdg</p>
  <p>tests and more tests</p>
  <p>and more tests </p>
</div>
<div id="bottom"><img src="panel_bottom.gif" /></div>
</div>
</body>
</html>

You can change       
overflow: hidden;
to       
overflow: scroll;
but that doesn't look so nice.

The other option is a lot more work, and that is to make it dynamically resize.  It would require a slice on the x axis like you did with the y axis.

Matthew
0
M256Commented:
I think we have already set the with with this code:
#center { width: 160px; }

That should be all the sizing you need.

Matthew
0
ianinspainAuthor Commented:
cool! thanks.. i am CSSing now like you wouldn't believe :-)

0
M256Commented:
Ian,

Delighted I could help.  It's cool that you are becoming familiar with this exciting technology!

Matthew
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.