...

View Full Version : Ways to expand image with text in it?



chowyo123
05-19-2007, 09:28 PM
Hi, i've recently been trying to build a website for a friend and it's been going well, minus one thing.
I have text inside of an image and when I have too much text, the text automatically goes outside of that image. I'd like for the image to stretch with the text so I don't have this problem anymore. Here is an example picture:

Imageshack hosted Test image (http://img115.imageshack.us/my.php?image=testpe0.jpg)

If I put too much text in the paragraph under "Synopsys" the text just flows right over the image rather than the image getting longer. Is there any way to do this? I'm guessing i'll have to cut the image up into a few divs?

koyama
05-19-2007, 09:53 PM
yeah, but the image is not telling us how you have built that page.

We need to see some code. A link would be even better.

chowyo123
05-19-2007, 10:30 PM
I don't have that page built yet... i'm building this website from images given to me. I do have a similar page built which i can give as an example:
members page (http://www.woottracking.com/everchanging/member.html)
It's not complete and the coding is ugly right now, but hopefully it provides a good enough example. If I expand " Eric Edwards
President & Co-Founder " to say something with more characters, such as " Eric Edwards, Mike Jones, Manny Para, & others President & Co-Founder & Members" it'll flow out of the image.

koyama
05-19-2007, 11:06 PM
I do have a similar page built which i can give as an example:
members page (http://www.woottracking.com/everchanging/member.html)
It's not complete and the coding is ugly right now, but hopefully it provides a good enough example. If I expand " Eric Edwards
President & Co-Founder " to say something with more characters, such as " Eric Edwards, Mike Jones, Manny Para, & others President & Co-Founder & Members" it'll flow out of the image.
Currently you have one background image to make up the box: http://www.woottracking.com/everchanging/member.png. For now, don't worry about that horizontal rule in the middle. You can implement it as a border on one of the elements inside the box.

Within CSS 2.1 you can neither stretch a background image nor specify multiple background images for a single element.

To get what you want you will need extra markup. I'm not really sure what's best, but you have a number of options. One option could be to use three nested divs with one background image in each.


#one {
background-image: url(sides_and_middle_800x1.png);
background-repeat: repeat-y;
width: 800px;
}
#two {
background-image: url(top_800x10.png);
background-repeat: no-repeat;
width: 800px;
}
#three {
background-image: url(bottom_800x10.png);
background-position: bottom;
background-repeat: no-repeat;
width: 800px;
}



<div id="one">
<div id="two">
<div id="three">
[content]
</div>
</div>
</div>

The approximate image dimensions are indicated in the filename.

chowyo123
05-20-2007, 12:00 AM
sweet man, I was actually trying out something very similar to that, except instead of 3 images I had 4, but 3 works out tons better. Works like a charm on a test page I did. Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum