Forum Moderators: open

Message Too Old, No Replies

Macromedia Fireworks question

         

dak142

2:13 am on May 1, 2004 (gmt 0)

10+ Year Member



I want to create an image with text in it, that will go on top of a table. It will be sort of like a 1/2 of a button to get the rounded corner effect.

My problem is, how do I create it where it will fill a table at 100%. I want it to expand and contract with the table for different resolutions and different screen sizes. I also want the text to not get distorted when this happens? Anyone know how to do this?

Regards,
David

limbo

12:46 pm on May 1, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Sounds like you are trying to create an area of text within a box with rounded corners that will remain liquid. An 'old chestnut' :)

You can't do this specific task in Fireworks. But you can create the corners and edges for the container that will hold you text.

A good tip is to try and keep all your text as text, not images. Use CSS to style it so you can apply the typography that will make it look as keen to the eye as an image. This way SE's will have better luck reading your links and will make the site faster and more accessible because you are avoiding the use of gif's - which only add aestheic value.

Once you have your 4 corners and 4 edges of the box you can position them in tabular html (easier for the uninitiated) or using CSS. This way the images can be reused on any page too - so browser cache will load them faster if you re-use the box detail.

So in effect you have created 8 small GIF's.

- topleft (corner)
- top
- topright (corner)
- left
- right
- bottomleft (corner)
- bottom
- bottomleft (corner)

You then place these so they fall in the table - applying % sizes to the horizontal and vertical cells so they stretch - the top, left, right and bottom gifs can be placed to repeat in these containers(cells) then you table or div will resize according to your content.

Seems a bit drawn out for one design element but is simple once you grasp it.

Alternatively apply border: property to div's and forget the rounded edges ;)

Ta

Limbo