Hi,

I'm new to inkscape and to illustration software in general. So far so good, but I'm up against an obstacle. I need to make the header on my wiki website expandable with different resolutions and screen sizes. To do that, I need to split the long, narrow rectangle on which the header is based into two pieces that overlap. I need to make the clipped ends look as if the boxes simply end, like I cut them with scissors. It's literally just a long box made with the rectangle tool.

Any help?

Thanks!

Do you mean something like one of these?

Thanks for your response!

Yes, the top yellow pair most closely resembles what I'm after. I want them to overlap so that their connection is undetectable and they appear to be one box that grows longer and shorter with the width of the browser page.

Could you explain your question a little more? I don't understand what benefit you could possibly get out of making the rectangle into two ovelapping objects rather than simply changing the size of the rectangle.

Certainly, thanks for asking.

Look at the Inkscape forum header at the top of this page. It narrows and widens as you drag your browser wider or narrower. As a result, the search box stays in view as you shrink the browser window. This can be achieved by posting two images designed to overlap. One image disappears behind the other, giving the effect of a single shrinking or expanding image.

If that header were a single image of fixed width, it wouldn’t shrink and expand like that, and the search box would disappear off the side of the page as the browser is dragged smaller.

There may be a better way to achieve what I’m after, but the way I’m doing it requires two images, cut and overlapping so that the seam is invisible.

You can see the problem in action here: http://www.mythopoedia.com

Wait a second, I made the below tutorial before reading the post above. I don't understand why you would do that. Don't have the images overlap, have a small piece repeat x number of times, based on the browser width, then cap them with the rounded part.

Thanks so much! And thanks for the creative presentation. I think my problem may be complicated by the fact that I'm using rounded corners and a gradiated "shine". Any suggestions?

(proper CSS usage not shown )

Again, thank you so much. I hope you won't mind another question.

I'm still trying to get the split right. Do I have to split all the elements separately? By that I mean, do I have to chop the end first off the graduated shine, then off the solid blue base? Is that a matter of splitting the elements individually, then lining them up?

Your example looks flawless. Is there a way to split everything together, to ensure a clean fit online?

Thanks again!

You want three pieces. The start, the middle piece that gets repeated, and the end piece. All tree are in a separate td.

Honestly, it might be best to forget the solid blue line...

I'm really inexperienced with HTML and such, and this solution might be light years more convoluted then some other solution I can't think of but...

**(ok, I tried doing my idea and it just got way to silly, so forget it. Sorry.)**

In your orange graduated shape, is that gradient an overlay, or is it a single element graduated from orange to yellow?

You might like to go to a HTML forum or look for some tutorials to get an idea of how to break up an image for HTML. "Slicing" is the term used to break down a rectangle into a seperate pieces for use in HTML. But Inkscape is a little clumsy at slicing if you don't know how. Your best bet is to export your rectangle as PNG then use something like GIMP to slice it.

But using SWN's images, this is the clean correct HTML:


If this doesn't make sense to you, then this is why you should go look for some tutorials that will explain all these concepts in detail. I think "A List Apart" has some good ones that deal with this.

Ummm...that didn't work ugly. (yes, I changed the file names)

All I got was "hello world" and half of the right cap...

I made a mistake by setting background colour, but here is a full working copy for you to examine - http://www.mediafire.com/?ewetseeed5h