When you say 'styled completely with CSS,' I am going to assume that you can
alter or add to the HTML output. If you can't, it could be somewhat tricky,
but either way, you have to start with a graphic that looks like the speech
baloon you describe. Without being able to alter the html, you'd have to
grab a selector to the container div, give it a fixed size based on your
static-sized speech baloon, and output only some of the text... not sure
actually. I'd try starting with a fixed width and height box, with some
padding-top and padding-left to inset the text, and your transparent png
speechbubble as a single background-image.
Anyway, if you can add to the HTML, do something like this:
(untested code above)
or a table with 3 x 3 rows/cols.
Break up your speech baloon graphic into 9 rectangles, like a tic-tac-toe
board, making the center pure white. Then assign the width and height to
each class above, using each of the 9 images as a background-image per cell
(Photoshop/Fireworks slices are lovely here). Using this approach, your
speech bubble design can be reused in different sizes (w & h of .baloon) on
different pages, different sites, or expand to fit the dynamic content from
the app/db.
Get it working in a blank HTML page first, then you'll know the specific
markup to use within the larger app.
HTH.
On Fri, Mar 21, 2008 at 2:55 PM, Vicki Stebbins <[EMAIL PROTECTED]>
wrote:
> At 08:31 AM 22/03/2008, Holly Hopper wrote:
> >I'm trying to make a comic-like dialog box that has to be styled
> >completely in css. The text inside is going to be a variable and
> >edited by the client, so the box needs to change according to the
> >width of the text inside it, otherwise I'd just make the box a
> >background image. Any ideas?
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
