...

View Full Version : How to place text on to a picture. html



effpeetee
06-02-2007, 03:24 PM
What is the proper way to put a text caption on the picture (using html) .

I seem to have a blind spot here. The DIV will do it, but I have been told that I should not do it that way.

Any help gladly received.

effpeetee

This page to be found at, and code below.

http://www.exitfegs.co.uk/SteveandPhilb.html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

body {
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
color: white;
font-weight: bold;
width:100%;
}

h4
{
font-sixe:1em;
text-align: center;
}
</style>

<title>Steven and Philip.</title>

</head>
<body>
<A href="steve.html"><IMG style="Z-INDEX: 100; LEFT: 92px; POSITION: absolute; TOP: -2px" height=600 src="SteveandPhil.jpg" width=800 ></A>

<div style="Z-INDEX: 101; LEFT: 258px; WIDTH: 549px; POSITION: auto;">
<center><span class="t14aw"><p><h4>But a nice photo.</h4></p></span></center>
</div>

</body>
</html>

kosstr12
06-02-2007, 03:41 PM
Couldn't you use absolute positioning, sure its CSS but its quite simple

effpeetee
06-02-2007, 04:05 PM
Couldn't you use absolute positioning, sure its CSS but its quite simple
I'm still struggling with CSS. I'll give it a whirl and see what transpires.
Should give the purists a laugh if nothing else. Watch this space.

http://www.exitfegs.co.uk/SteveandPhilb.html

effpeetee

ddanatzko
06-02-2007, 04:15 PM
How much text are you looking to apply? Are you planning on changing the text? You could always pull it into an image editing software. Less coding involved and you have more control on the text formatting that you do with CSS.

effpeetee
06-02-2007, 04:29 PM
How much text are you looking to apply? Are you planning on changing the text? You could always pull it into an image editing software. Less coding involved and you have more control on the text formatting that you do with CSS.
ddanatzko,

It's only a descriptive phrase or so; but I have over 120 pages to use the procedure on.

CSS is obviously the way to go in the circumstances. I am still with the 'L' plates with CSS I'm afraid, but I will get there in the end.

I can put the text where I want to using:-

div style="Z-INDEX: 101; LEFT: 258px; WIDTH: 549px; POSITION: absolute; TOP: 584px; HEIGHT: 50px">
<center><span class="t14aw"><p style="COLOR: #ffffff; BACKGROUND-COLOR: #00364a">Ybut a nice photo.</p></span></center>
</div>

But is it a bit pedestrian and one ot two of the high level coders have suggested that I use another way.


Thank you for your input. Everything helps.

effpeetee

ddanatzko
06-02-2007, 04:38 PM
If you're going to be adding text to that many photos, it's not very practical to edit each one. Definitely easier with CSS and positioning. If you capture the CSS in a style sheet, you won't have to use inline formatting and you can save yourself some key strokes.

http://www.w3schools.com has a great tutorial on CSS (as well as others)

Arbitrator
06-03-2007, 10:28 AM
See an example document (http://www.jsgp.us/demos/CF115428.html) that I made using one of your photos. Thatís an example of how you would code your documents. If something doesnít make sense, let me know.

Iíve noticed that you carefully position each caption over the image; if you begin to find individual positioning of the captions tedious, then I would either position them above or below the image or in one of the four corners over the image. If you place it in one of the four corners, I would also give the caption text a background color, so that the text is readable regardless of what the colors of a given image are.

By the way, do note that, in my demo, viewers will miss out on a minor special effect if their browser does not support the :before pseudo‐element and the text-decoration: blink declaration. Internet Explorer is one such browser. The effect is not essential to the page.

effpeetee
06-03-2007, 11:34 AM
Thank you Arbitrator,

I will use this code if you don't mind.

Although, so far, I have not managed to use it locally.

I have another thread on similar lines running at the moment. It is to use a style sheet for control of the text on the pages.

Unfortunately, my css is not up to it, so your input is very welcome.

Kind regards,

effpeetee



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum