[Zimwy]

Hey,
I'm trying to design a web site for a music camp I used to go to and I wanted to do something along the lines of the following. You can see a mock-up here:



So far I've learned how to make div boxes with rounded corners. But, I was wondering if there's a way to make the corners extend from the div box so that hey can be the clarinet ends. I was thinking if the box gets wider than the actual image of the clarinet, I could just repeat the part I've selected in red over and over.

So, I feel like this should be possible, but I definitely don't know enough and was wondering if any of you could help me. Thanks!

gabe

[Millennium]

What technique are you using to round the corners? Since you know the width of the images you're using, you can set the width of the box to match it, but that may interfere with your box depending on the technique you use.

[Turias]

You can do this:

Code:
<div class="expandabletop">
<div class="mouthpiece">
<div class="end">
<div class="bluebox">
text
</div></div></div></div>


.expandabletop
{
    background: url('') repeat-x top
    z-index: -1;
}

.mouthpiece
{
    background: url('') no-repeat top left;
}

.end
{
    background: url('') no-repeat top right;
}

.bluebox
{
    /* However you currently do it */
}

You will have to play with the paddings and margins of some of the boxes to get them to align correctly. The low z-index of the expandable piece will place it under the mouthpiece and the end of the clarinet, causing it only to be visible where you want it to be.

[Zimwy]

Hey,
Thanks! That looks great. I went ahead and tried it on my own and came up with this:

http://olney-123.resnet.brown.edu/~g...wood/clar.html

This flips out in mac ie though. Will your plan be nicer across multiple browsers? The nice thing about this is it only takes 2 divs. Then again, the bottom doesn't show right

gabe

[Turias]

Originally posted by Zimwy:
Hey,
Thanks! That looks great. I went ahead and tried it on my own and came up with this:

http://olney-123.resnet.brown.edu/~g...wood/clar.html

This flips out in mac ie though. Will your plan be nicer across multiple browsers? The nice thing about this is it only takes 2 divs. Then again, the bottom doesn't show right

gabe

Mine should be fine across browsers. You just have to play with the positioning a little. The one you put up doesn't seem like it will scale vertically, either.