Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

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

Newbie Spellweaver
Joined
Dec 16, 2007
Messages
41
Reaction score
0
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:-

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


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>
 
Last edited:
There's no RL just AFK
Loyal Member
Joined
May 2, 2006
Messages
473
Reaction score
6
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.
 
Back
Top