Hi

I'm brand new to web design and have learned a lot in the last few days. I have a couple of questions.

I am trying to figure out how to add text to a graphic or shape. For example the tip of the day on www.lifetips.com.

I also like the way www.lifetips.com has a + for some of their categories such as "Sponsers" when you click on it - it opens up to the info. How is this done?

Thanks for your help.

Rochelle Richelieu,

That site is using HTML, CSS, and Javascript to do the accordion effect.

It appears to me that they have created the graphics using a graphics program and added the test to the graphics, but I could easily be wrong.

If you have a graphics program like Photoshop, there are a lot of tutorials on the web. If you don't have a graphics program, GIMP is a free program that will do what you need to do to edit graphics.

Just had a look at the page.

They have rendered some text, but to me this is purely to do with making the font look nice, and not due to techical issues.

To create the rounded text box it can be done in a number of ways, you have to create the rounded graphic in an external program like gimp (Image ready is very good for this), then 'spice' the image into sections. These sections are inserted either as table cell backgrounds or DIV backgrounds (depending on your preference).

The thing to watch out when doing this is to test the finished page in all major browsers as especially with the css route, it can go very wrong between browsers.

Apple, Game (uk computer games retailer) and the BBC use this technique.