Re: [css-d] Styling Dialog Box HELP!
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/
Re: [css-d] Styling Dialog Box HELP!
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? > >http://www.hollyhopper.com/test/test.html > >I made an image of what the text box is supposed to look like, it's in >blue below my divs. Thanks for any help, I've been working on this >all day! > >It almost looks correct in Firefox, but I can't get the inside divs to >collapse to be the width of the text inside them. But still, it has >to work in both FF and IE... > >Holly Hopper Hi Holly, Some of the tutorials on 'rounded corners' such as this http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm could help with what you're trying to do? Regards Vicki __ 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/
[css-d] Styling Dialog Box HELP!
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? http://www.hollyhopper.com/test/test.html I made an image of what the text box is supposed to look like, it's in blue below my divs. Thanks for any help, I've been working on this all day! It almost looks correct in Firefox, but I can't get the inside divs to collapse to be the width of the text inside them. But still, it has to work in both FF and IE... Holly Hopper __ 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/
