Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

assembling a sliced image in css?

Posted on 2004-11-30
17
Medium Priority
?
512 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:ianinspain
17 Comments
 
LVL 9

Expert Comment

by:jmelika
ID: 12709309
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
 

Author Comment

by:ianinspain
ID: 12710548
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 12711299
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 5

Accepted Solution

by:
M256 earned 1600 total points
ID: 12711729
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
 
LVL 4

Assisted Solution

by:Oliver_Dornauf
Oliver_Dornauf earned 400 total points
ID: 12714841
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
 
LVL 5

Expert Comment

by:M256
ID: 12716476
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
 

Author Comment

by:ianinspain
ID: 12727150
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
 

Author Comment

by:ianinspain
ID: 12727172
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
 
LVL 5

Expert Comment

by:M256
ID: 12727269
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
 

Author Comment

by:ianinspain
ID: 12727412
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
 
LVL 5

Expert Comment

by:M256
ID: 12727987
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
 

Author Comment

by:ianinspain
ID: 12729622
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
 

Author Comment

by:ianinspain
ID: 12729658
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
 
LVL 5

Expert Comment

by:M256
ID: 12731029
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
 
LVL 5

Expert Comment

by:M256
ID: 12731046
I think we have already set the with with this code:
#center { width: 160px; }

That should be all the sizing you need.

Matthew
0
 

Author Comment

by:ianinspain
ID: 12740554
cool! thanks.. i am CSSing now like you wouldn't believe :-)

0
 
LVL 5

Expert Comment

by:M256
ID: 12740844
Ian,

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

Matthew
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month20 days, 15 hours left to enroll

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question