?
Solved

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

Posted on 2011-05-08
14
Medium Priority
?
459 Views
Last Modified: 2012-05-11
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!
0
Comment
Question by:cindysei
  • 7
  • 6
14 Comments
 
LVL 16

Expert Comment

by:glenn_1984
ID: 35716583
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
 

Author Comment

by:cindysei
ID: 35716634
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
 

Author Comment

by:cindysei
ID: 35716649
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35717081
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
 

Author Comment

by:cindysei
ID: 35717503
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35717561
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
 

Author Comment

by:cindysei
ID: 35717621
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35717640
Before anything else, fix your center tags :)
0
 

Author Comment

by:cindysei
ID: 35717655
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
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 2000 total points
ID: 35717660
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
 

Author Comment

by:cindysei
ID: 35717683
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35717696
>> 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
 

Author Comment

by:cindysei
ID: 35723296
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35723313
Look more carefully at my code:

style="background-image: url(yourbackground_image.gif);
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question