How do I place text on top of an image in Dreamweaver

I am very inexperienced with web design. I've created an html doc with an images folder using photoshop slice tool. When I open the html doc in dreamweaver I want to be able to place text on top of a selected image - actually 3 text separate text fields on top of the same image. This is the code right now:
<tr>
            <td colspan="9">
                  <img src="images/bottom_text.gif" width="650" height="208" alt=""></td>
      </tr>

Is there an easy way to do this? I want to do this so text is editable and shows up clear on a browser. Thanks!
cindyseiAsked:
Who is Participating?
 
Jason C. LevineNo oneCommented:
Also, while I try to figure this out, here is the background image way to do it:

<tr>
            <td colspan="9">
                  <div style="width:650px; height:208px; background: url(images/bottom_text.gif);">Point Roberts will become a private country club with all the features and amenitites expected of one of the finest private clubs.</div>
                  </td>
      </tr>
0
 
glenn_1984Commented:
In Dreamweaver go to Insert, Layout Objects, AP DIV.

This will put a square box on the screen, either at the top left or bottom.
On the Property Bar it will be call APDIV1.

You can rename it.

You should be able to drag it where you want it to show your text, resize it with the mouse or in the property bar, and enter your text.

If you double click on the AP DIV on the right under CSS...you can make all sorts of adjustments.

If, for some reason, the text does not show in the browser, change the zindex to a higher number than the default, 0.
0
 
cindyseiAuthor Commented:
Thanks for this - right now - the AP DIV is showing up on the page but it's over to the left when I view it in Firefox (even when I've put it where I want it on the page in dreamweaver. And when I start to add font size, font line height etc from Add Properties, all of the other default properties automatically there when I create an AP DIV get crossed out. I need to be able to change the font size, line height etc. and even make it justified text (don't know the CSS for that). Help!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
cindyseiAuthor Commented:
Actually - regarding last comment - if I click directly on Srpy icon - properties don't get crossed out - it's only if I highlight text within Srpy content. - So problem is essentially that the Srpy AP Div is there but it's not staying in the position I place it in Dreamweaver when viewed in Browser. Thanks.
0
 
Jason C. LevineNo oneCommented:
AP divs are a little funky, especially within tables.

Try switching to code view, put the cursor in the table cell where you want the div and THEN invoke it from the menu.

Alternately, make the image the background of the table or cell and then just type normally.
0
 
cindyseiAuthor Commented:
Thanks for this - that's not working either - still shows up in same place - although something I've noticed is that the CSS code that comes in after I place it where I want it is:
left: 31px;
top: 514px;
This is actuallly where it's placing it on the page in the browser - I can visually see that. Thing is, I've centred the entire table on the page and I'm thinking because the CSS code sits above the <center> tag, the CSS code isn't being centred to the table. Is there a way to do that? Sorry, I'm really new to all this. Also, could you provide the code for your alternate solution - ie, making the image of the cell background in case I can't get this AP DIv thing to work. Although I'd like to cause it looks cool. Thanks for your help!
0
 
Jason C. LevineNo oneCommented:
Yeah, the thing about an AP div is the AP part stands for "absolutely positioned" and the left and top properties are what fixes the location.  If you set those to zero and it doesn't snap to the table cell, then I have some more thinking to do.  

When you place an AP div on a page, it takes its reference point from its parent container.  If it is not inside of another div, that parent container is the <body> tag and the 0,0 point is the upper left of the browser window. This means that DW Design View is not really able to render it properly on centered page since the points move around based on the browser width.

I had you place the div inside the table cell because I was curious to see if it would accept the table cell as its parent and obviously it didn't.  Can you post your entire page code here in a
code block

Open in new window

so I can test it and make sure you followed the instructions correctly?
0
 
cindyseiAuthor Commented:
Here is the code for entire page. You'll notice that my AP Div is on top of text that is already embedded in an image. My plan is to delete the text in the image ( I just showed it for layout purposes):

<html>
<head>
<title>prgcc_email</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	width:158px;
	height:115px;
	z-index:1;
	left: 31px;
	top: 514px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.7em;
	text-align: justify;
	line-height: 1.5em;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<!-- Save for Web Slices (prgcc_email.jpg) -->
<table id="Table_01" width="650" height="801" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="9">
			<img src="images/header.jpg" width="650" height="209" alt="PRGCC header"></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/prgcc_email_02.gif" width="650" height="23" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/prgcc_email_03.gif" width="10" height="206" alt=""></td>
		<td colspan="3">
			<img src="images/kenji_pic.jpg" width="192" height="178" alt="Picture of Kenji"></td>
		<td colspan="5">
			<img src="images/side_text.gif" width="448" height="178" alt="Message from Kenji"></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/prgcc_email_06.gif" width="640" height="28" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<div id="apDiv1">Point Roberts will become a private country club with all the features and amenitites expected of one of the finest private clubs.</div>
			<img src="images/bottom_text.gif" width="650" height="208" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/prgcc_email_08.gif" width="31" height="108" alt=""></td>
		<td>
			<img src="images/concept_map.jpg" width="154" height="95" alt="Map of Facility"></td>
		<td colspan="2" rowspan="2">
			<img src="images/prgcc_email_10.gif" width="61" height="108" alt=""></td>
		<td>
			<img src="images/facility_pool.jpg" width="154" height="95" alt="Picture of Pool"></td>
		<td rowspan="2">
			<img src="images/prgcc_email_12.gif" width="63" height="108" alt=""></td>
		<td>
			<img src="images/info_golfpic.jpg" width="154" height="95" alt="Picture of Golf Course"></td>
		<td rowspan="2">
			<img src="images/prgcc_email_14.gif" width="33" height="108" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/prgcc_email_15.gif" width="154" height="13" alt=""></td>
		<td>
			<img src="images/prgcc_email_16.gif" width="154" height="13" alt=""></td>
		<td>
			<img src="images/prgcc_email_17.gif" width="154" height="13" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/prgcc_email_18.gif" width="650" height="46" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="10" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="154" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="17" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="44" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="154" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="63" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="154" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="33" height="1" alt=""></td>
	</tr>
</table><center>&nbsp;<center>
<!-- End Save for Web Slices -->
</body>
</html>

Open in new window

0
 
Jason C. LevineNo oneCommented:
Before anything else, fix your center tags :)
0
 
cindyseiAuthor Commented:
OK, yes - I see that it should be </center> at the end. Thanks for seeing that!. But that didn't fix my AP Div problem.
0
 
cindyseiAuthor Commented:
thanks - stupid question, but  I actually have 3 text fields to place on top of the one image - ie: in 3 columns covering 650 px width. Can I create a separate table with the image as the background and then nest a 3 column table on top? If so, what would the code be? Right now, the image is in a table cell (part of the one large table of the page).
0
 
Jason C. LevineNo oneCommented:
>> Can I create a separate table with the image as the background and then nest a 3
>> column table on top?

Yes.

You can also (for readers who are not using tables) do it with a single container div at full width with the background set and three floated divs inside the container.

>> If so, what would the code be?

Pretty much as you describe it.  No real trickery involved:

<td colspan=9 style="background-image: url(yourbackground_image.gif); background-repeat: no-repeat;">
<table width="100%">
<tr>
<td style="width:33%;">Blah blah blah</td>
<td style="width:33%;">Blah blah blah</td>
<td style="width:33%;">Blah blah blah</td>
</tr>
</table>
</td>

Open in new window

0
 
cindyseiAuthor Commented:
I've put in this code to place text on top of an image using tables as above - the text is showing up fine and in the right place but I've lost my background image. What do I need to change?
<td colspan="5" rowspan="2" style="background-image:images/prgcc_email_notext_06.jpg); background-repeat: no-repeat;"
                  width="448" height="212">
            <table width="95%" align="center">
            <tr>
            <td style="width:95%; text-align: justify;">
              <p>You’ve played the course.
              </p>
              <p> Now own the Club.</p>
              <p> You’ve enjoyed playing Point Roberts. Now I invite you to join me as an owner and member of the NEW Point Roberts Golf and Country Club.
                My plan is to build a legacy for generations to come. It will be a lifestyle experience for your family, and a way to share your own dreams with those you love.
                I look forward to sharing my vision with everyone who is interested in this unique opportunity.
              </p>
            </tr>
</table></td>
      </tr>
0
 
Jason C. LevineNo oneCommented:
Look more carefully at my code:

style="background-image: url(yourbackground_image.gif);
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.