Problems making the content area have a dynamic height

[blizeH]

Hi guys,

I'm currently trying to turn this into XHTML/CSS:



The problem is that it needs to have a dynamic height, so I've no idea how to approach the problem.

The first step I'd say would be to create an image along the entire top that's about 5px high for the top of the box, and then a 1px high image for a repeating background.

The problem I've got now is with the bottom area, and how to get text over it without having to create an entirely separate div and put the content between the two (which would be pretty awful).

Thanks in advance for any advice, I'm really stuck on this!

[RZX Developer]

Hey mate do you want the XHTML/CSS version to look exactly like the image above?

wayne

[karinne]

You need 3 divs. One for the top, you content, and the bottom image.

[blizeH]

@ RXZ - Pretty much yup, but I'd like it so that the height will adjust according to how much content is in there.

@ karinne - thanks for the reply, my main problem though is the difference between the content and the bottom image. I mean, the gradient in the content area means I can't put it into actual middle div, yet if it's on the bottom one there'll be a large gap.

Apologies if I've explained it badly, I usually do

[RZX Developer]

The layout could be created in tables but like I keep getting told tables are not the best way of doing it but it would work but the gradient would have to be a set height due to getting it as a td background

Wayne

[karinne]

Bah ... I didn't notice the gradient! Sorry! Ugh! I hate dealing with gradients and outer-glows .... It's not the most Web-page-friendly design.

You have to remember that what looks great in PS might not be suitable for web ... only print

[blizeH]

Ahh I see, thank you karinne, I might need to have a rethink of how I'm doing it then!

@ RZX - cheers dude, I'll consider using tables but I think I'd rather not if possible. Thanks again for the info though!

[MikeHopley]

There are lots of variations, depending on how flexible you want your boxes to be, and how many effects.

I might write a tutorial on this, once I've got it working myself...

For now, check out this tutorial, which is the basis for my (completely flexible) method.

[karinne]

Right ... but then ... how would you handle the outer glow on the borders AND the gradient?

[blizeH]

That's a sweet site thank you, but like karinne said, doing the outer glow is one thing but doing the gradient is going to be a nightmare.

I think I'll just ditch the outerglow thing and have a solid 1px border and then an image background for the gradient. Or something.

[MikeHopley]

Originally Posted by karinne

Right ... but then ... how would you handle the outer glow on the borders AND the gradient?

I'm working on it.

With enough <div>s, you can do anything. Especially if you use display: table-cell;.

[karinne]

hmmm yeah but the display: table-cell isn't widely supported

[MikeHopley]

Originally Posted by karinne

hmmm yeah but the display: table-cell isn't widely supported

Well, not widely supported by IE.

But sometimes, depending on what you're doing, you can hack it with javascript for IE.

For this effect, however, I think display: table-cell is unnecessary.

[karinne]

Well ... I can't wait to see this

[MikeHopley]

Actually, it was a lot easier than I thought. Here's a screenshot:



This is fully scalable (the box width is defined in ems), and won't break no matter how big the box (unlike "sliding doors" techniques). It uses nine images with a total file size of less than 2 Kb (with lossless compression).

The only limitation is that it only works on flat backgrounds. The images must not use transparency. If your page background is patterned, then this will break (at least slightly).

If you want, you can even add another gradient for the box heading.


How it works

In this example, I'm using a <dl> (but you don't have to). Here's my HTML code:

Code: Select all

<dl class="tip">
<dt>Benefits of a good grip</dt>
<dd>
<ul>
<li>More powerful smashes</li>    
<li>More accurate net shots and serves</li>
<li>Stronger smash defence, and ready for both sides</li>
<li>Deceptive strokes</li>
</ul>
</dd>
</dl>

I use javascript to add seven nested <div>s inside the <dl>, transforming the code into this:

Code: Select all

<dl class="tip2">    
<div><div><div><div><div><div><div>
<dt>Benefits of a good grip</dt>
<dd>
<ul>
<li>More powerful smashes</li>    
<li>More accurate net shots and serves</li>
<li>Stronger smash defence, and ready for both sides</li>
<li>Deceptive strokes</li>
</ul>
</dd>
</div></div></div></div></div></div></div>
</dl>

I then apply CSS background images to Snow White and the seven Dwarfs...er, the <dl> and the seven <div>s. You need four sides and four corners. The sides are all 1px wide or high and set to repeat, but the corners overlap the sides to make a soft drop shadow.

The order is important: the corners must be applied to the deeper four <div>s, because these will stack on top of the sides. You must also be careful to match the images so that the corners line up with the sides. This is easy if you are methodical about creating your source graphic.

The content will stretch the <dl> and <div>s that surround it. To make the effect visible, I add padding in the deepest <div>. The padding matches the size of each side image (not the corners, which are larger).

The gradient itself is just applied to the <dd> CSS background.

That's it. Simple, huh?

[MikeHopley]

Actually, I might stop using the javascript to generate the extra markup, because it sometimes fails (page refresh cures it).

Either that, or I'll make it run again after a delay and check.

[karinne]

Hmmm ...yeah but the gradient is only at the very bottom as oppose to the OP's gradient starts from the very top and extends all the way down

[MikeHopley]

Originally Posted by karinne

Hmmm ...yeah but the gradient is only at the very bottom as oppose to the OP's gradient starts from the very top and extends all the way down

Picky, picky, picky! Use your imagination!

If you want me to make the gradient stretch with the height, I'm afraid that's asking too much. But you can just use a larger gradient. I don't think a stretchy gradient would look nice, anyway.




Before you complain about the orange title: it would just require one extra <div> to apply the gradient across the whole box.

[MikeHopley]

Note that the gradient can be:

• Fixed to the bottom of the box
• Fixed to the top
• Starting at the box centre
• Starting a fixed distance (in ems or pixels) from the box top.

The latter two require one extra <div> to ensure background colours match at both top and bottom.

If the box is smaller than the gradient image, then some of the gradient will be cut off (at top or bottom). If the box is larger, then some of the box will be shaded with (matching) flat colour.

[blizeH]

That looks awesome, thank you so much, I'll try and get my head around it and do it asap