Positioning Text and Graphics with Style Sheets

In the terms of use for linkware graphics, artists require that you do not alter their work.

Sometimes you'd like to add a title to a linkware heading. How can you do this without altering the graphic?

One option is to send an e-mail and ask the artist to add your text to the linkware graphic.
Another option is to make a separate graphic with your text on it.
However, there is a way to have your text graphic overlay the linkware graphic without altering it:

--by using a style sheet and the absolute position command. The technique is used on this page:

When I made the title, no matter how I laid out the table, it made the page too wide. So, I used the absolute position to place the title right next to the graphic, slightly overlapping it depending on what screen resolution you use.

Here's the section of table:

<td>
<img alt="spacer" src="clear.gif" width="575" height="270"> <img id="title" src="title.gif" width="160" height="207"><img id="greet" alt="Autumn Greetings" src="autumngreety.gif" width="416" height="256">
</td>

And here's the style that goes with it:

#title {
	position: absolute;
	left: 495px;
	top: 120px;
	width: 160px;
	}

#greet {
	position: absolute;
	left: 120px;
	top: 95px;
	width: 416px;
	}

I'm really pleased how it turned out. You are welcome to look at the source and see the whole code.

It is possible to put the text right on top of the graphic, but I don't think that would look as nice in this case.

Another idea is to make a graphic the same size as the linkware graphic and then place them side by side. An example is on this page:

http://pamelajoy.com/country/marybears.shtml

This page was all done with tables. It takes a little trial and error to get the alignment just like you want it.

The point is that it is not necessary to alter any linkware graphics to make a cool title for a web page.

As one graphic artist put it, "It's never fun for us to have to write and ask you to remove something from your pages."

Computer Home :: Home