PDA

View Full Version : Making a bg that grows?


dreamweaverntn
02-25-2009, 02:35 PM
I want to do this:
Make a white rounded rectangle in Illustrator or PS.
Insert into DW as a bg in a div and insert text over it.
BUT..the bg grows with the text.
I've seen that done, I think, but how?
I know I can just insert text in Illustrator and save as an image and insert that new image in DW, but I've seen templates that grow with the text.
How does one do that?

Corrosive
02-25-2009, 03:24 PM
I want to do this:
Make a white rounded rectangle in Illustrator or PS.
Insert into DW as a bg in a div and insert text over it.
BUT..the bg grows with the text.
I've seen that done, I think, but how?
I know I can just insert text in Illustrator and save as an image and insert that new image in DW, but I've seen templates that grow with the text.
How does one do that?

If you don't set a specific height on a div it will grow with the text you add. Is that what you mean??

dreamweaverntn
02-25-2009, 03:40 PM
Well, ok..yea..that's what I meant.:-D
Actually, it wasn't specified, so, once I deleted all of the text, it shrunk nicely.
BUT the bottom edges are square where the bottom rounded edges are cutoff of the image when it shrinks. The top rounded edges look normal. until you insert text or spaces get the bottom edge of the image to show.

Corrosive
02-25-2009, 03:45 PM
Well, ok..yea..that's what I meant.:-D
Actually, it wasn't specified, so, once I deleted all of the text, it shrunk nicely.
BUT the bottom edges are square where the bottom rounded edges are cutoff of the image when it shrinks. The top rounded edges look normal. until you insert text or spaces get the bottom edge of the image to show.

Just read your e-mail and understand where you are coming from now. You need to use relative positioning on your divs and then have your rounded corners as graphics top and bottom to give the impression of one div/rectangle but you will be using three :)

dreamweaverntn
02-25-2009, 04:15 PM
WOW! Ok..
now..lemee dig myself a deeper hole
I've got the images sliced, saved for web.
If I use CSS, I only get one image as a bg
If I insert as image, all 3, nothing can be typed on top of that. (err..I don't think)
How do I insert all 3 slices as a bg for a div?
Positioning is set to relative.
In case nobody has told you today, u rock.8)

Corrosive
02-25-2009, 04:24 PM
WOW! Ok..
now..lemee dig myself a deeper hole
I've got the images sliced, saved for web.
If I use CSS, I only get one image as a bg
If I insert as image, all 3, nothing can be typed on top of that. (err..I don't think)
How do I insert all 3 slices as a bg for a div?
Positioning is set to relative.
In case nobody has told you today, u rock.8)

There's a trick to this. Top div insert the image. middle div (where the content goes) have a repeating background image to make the body of the box (you can type over this) and then insert your bottom image in another div. Looks like a whole box when viewed.

Have a look here...

clearwater-it.co.uk

The boxes are built this way.

dreamweaverntn
02-25-2009, 04:31 PM
Top div insert the image. middle div (where the content goes) have a repeating background image to make the body of the box (you can type over this) and then insert your bottom image in another div.
errr..I don't understand this. "top" div insert, middle and bottom.
I got the middle part down. But how do I "top" and "bottom" insert those slices in one div?
OMG...this is real life coding isn't it!??:cry:
Not just using DW css panel?
Tank...I need an exit.

Corrosive
02-25-2009, 04:32 PM
OMG...this is real life coding isn't it!??:cry:
Not just using DW css panel?


Yes, 'fraid so.