[HTML - HELP] Text Displacement With Custom DIV Tag [HTML - HELP]

Stone-World · Aug 13, 2008

Hi There'

Im rarely post in this section so sorry if I have put the wrong title or something.

Anywho..

Eailer on I was just making a website for something to do. I created the Layout in Paint and sliced it in Photoshop CS3. When I put the layout into Adobe Dreamweaver CS3 and insert a DIV tag (Theres an option that allowes me to draw a custom DIV tag and thats how I insert my div tag) to where I want it the text appears fine in Dreamweaver in the div tag

Stone-World - [HTML - HELP] Text Displacement With Custom DIV Tag [HTML - HELP] - RaGEZONE Forums

And when I save it as a .HTML document and preview it in Internet Explorer and Mozilla Firefox, this happens:-

Please help me so I can make the text appear correct

P.S: Sorry for huge images and sorry for poor detail in the 1st image.

Thanks'
Heres The Source:

Code:

<html>
<style type="text/css">
<!--
#apDiv2 {
	position:absolute;
	left:147px;
	top:133px;
	width:83px;
	height:29px;
	z-index:1;
}
-->
</style>
<head>
<title>Untitled-1</title>
<center>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:2px;
	top:114px;
	width:84px;
	height:31px;
	z-index:1;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Untitled-1) -->
<div id="apDiv2">Home</div>
<div id="apDiv1">
  <div id="text"></div>
</div>
<table id="Table_01" width="894" height="758" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="21">
			<img src="images/index_01.gif" width="893" height="114" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="114" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="images/index_02.gif" width="2" height="644" alt=""></td>
		<td rowspan="3">
			<img src="images/index_03.gif" width="85" height="32" alt=""></td>
		<td colspan="19">
			<img src="images/index_04.gif" width="806" height="2" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="2" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="images/index_05.gif" width="5" height="642" alt=""></td>
		<td>
			<img src="images/index_06.gif" width="85" height="29" alt=""></td>
		<td rowspan="3">
			<img src="images/index_07.gif" width="3" height="642" alt=""></td>
		<td>
			<img src="images/index_08.gif" width="85" height="29" alt=""></td>
		<td rowspan="3">
			<img src="images/index_09.gif" width="4" height="642" alt=""></td>
		<td>
			<img src="images/index_10.gif" width="85" height="29" alt=""></td>
		<td rowspan="3">
			<img src="images/index_11.gif" width="4" height="642" alt=""></td>
		<td>
			<img src="images/index_12.gif" width="85" height="29" alt=""></td>
		<td rowspan="3">
			<img src="images/index_13.gif" width="3" height="642" alt=""></td>
		<td>
			<img src="images/index_14.gif" width="87" height="29" alt=""></td>
		<td rowspan="3">
			<img src="images/index_15.gif" width="3" height="642" alt=""></td>
		<td>
			<img src="images/index_16.gif" width="86" height="29" alt=""></td>
		<td rowspan="3">
			<img src="images/index_17.gif" width="3" height="642" alt=""></td>
		<td>
			<img src="images/index_18.gif" width="86" height="29" alt=""></td>
		<td rowspan="3">
			<img src="images/index_19.gif" width="3" height="642" alt=""></td>
		<td>
			<img src="images/index_20.gif" width="86" height="29" alt=""></td>
		<td rowspan="3">
			<img src="images/index_21.gif" width="3" height="642" alt=""></td>
		<td>
			<img src="images/index_22.gif" width="86" height="29" alt=""></td>
		<td rowspan="3">
			<img src="images/index_23.gif" width="4" height="642" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="29" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_24.gif" width="85" height="613" alt=""></td>
		<td rowspan="2">
			<img src="images/index_25.gif" width="85" height="613" alt=""></td>
		<td rowspan="2">
			<img src="images/index_26.gif" width="85" height="613" alt=""></td>
		<td rowspan="2">
			<img src="images/index_27.gif" width="85" height="613" alt=""></td>
		<td rowspan="2">
			<img src="images/index_28.gif" width="87" height="613" alt=""></td>
		<td rowspan="2">
			<img src="images/index_29.gif" width="86" height="613" alt=""></td>
		<td rowspan="2">
			<img src="images/index_30.gif" width="86" height="613" alt=""></td>
		<td rowspan="2">
			<img src="images/index_31.gif" width="86" height="613" alt=""></td>
		<td rowspan="2">
			<img src="images/index_32.gif" width="86" height="613" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_33.gif" width="85" height="612" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="612" alt=""></td>
	</tr>
</table>
</body></center>
<!-- End ImageReady Slices -->


</html>

-fedexer- · Aug 13, 2008

An apDiv stands for absolutely positioned div, meaning once you draw it, it will stay in the same coordinates. This doesn't help you out at all as when you view it in the browser , your help is displayed, as your browser is a different size from DW, and as you resize your browser, it would 'appear' that the help text moves.

To solve this, you need to have the image in one div, and then embed the text div inside that, this causes the text to be absolutely positioned in relation to the size of the image div.

Code:

<div id="bg-image">
<img src="../imagehere" alt=""/>
<div id="textHelp">HELP</div>
</div>

Umm thats just a quick example, but also you should find that the whole image which is the site layout, is not just in one div, as then you won't have control over a whole lot of things.

Someone else could quite possibly explain this better i guess, but figured i would lend a hand.