Absolute Positioning Container??

[Geologist1724]

Hey There all of you great programmers at DD.

I am trying to absolutely position a very short amount of text (2 words) in a cell. I don't want it positioned relative to the document window. So of course everybody says I have to position it absolutely relative to a container. The logical container for my layout is the cell the text is in. I'm sure you already know this doesn't work. After much frustration I finally found DD"s jscheuer1 2007 response indicating that most browsers will not allow a td to have relative position.

Ok so half heartedly I tried putting my cell inside a table and positioning the text relative to the table. That doesn't work either. So what elements can be used as containers?

Here is my CSS:

/* This is my container*/
#table {
position: relative;
}

/* Begin Member Companies*/
#company a:link{
position: absolute;
top: 84px;
left: 4px;
font-size: 12px;
font-weight: bold;
color: #094054;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
}

The rest of my #company declarations are exactly like a:link, except hover has a little text decoration.

And here is my HTML:

<!-- Absolute Relative Positioning-->
<div id="table">
<td width="207" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="207" height="120" valign="top" background="images/Right_Top.gif">
<div id="company"><a href="http://www.pcpg.org/pcpg_members.html">Member Companies</a></div>
</td>
</tr>
</table>
</td>
</div>
<!--End Absolute Positioning-->

So if tds can't be relatively positioned, what can I use as a container?

Here is the URL for this page. When I open it in either Firefox or IE7 the text "Member Companies" is parsed relative to the document window.

http://www.harrisburgmarathon.com/Z_...eriment_ab.asp

[jscheuer1]

<td><div style="width:100%;height:100%;position:relative;">
<span style="position:absolute;top:3px;left:10px;">Two Words</span>
</div></td>

[Geologist1724]

John,

Thanks. Any insights into just what I've positioned my text relative to? Once I finally got the text exactly where I wanted it, my coordinates were:

top:21px
left:-121px

Here's my URL:

http://www.harrisburgmarathon.com/Z_...eriment_ab.asp

"Member Companies" top right is the text I've positioned.

[jscheuer1]

What you've done is to create an extra td that you don't really need and positioned relative to it:

	<!-- Absolute Relative Positioning-->			
 	   <td width="207" height="120" valign="top" background="images/Right_Top.gif">
       	  <td>
		     <div style="width:100%;height:100%;position:relative;">
		     <span style="position:absolute;top:21px;left:-202px;">
			    <div id="company"><a href="http://www.pcpg.org/pcpg_members.html">Member Companies</a></div>
    		 </span>
		    </div>
		  </td>
	<!--End Absolute Positioning-->

The one right before it (with the background) closes automatically, even though you haven't supplied the proper closing tag for it. This throws off the expected result of positioning because it is now coming from the left. You also should avoid any extraneous markup, and putting block level elements (like div) inside inline elements (like span).

You don't need the extra td, span or the separate division with the id. You can just position the link. Now the code is valid (for at least some level of HTML), the positioning is intuitive to the visual space, and the style effects of the id=company still operate upon its child link:

 	   <td width="207" height="120" valign="top" background="images/Right_Top.gif">
	<!-- Begin Relative Absolute Positioning -->       	  
		     <div id="company" style="width:100%;height:100%;position:relative;">
			    <a style="position:absolute;top:81px;left:5px;" href="http://www.pcpg.org/pcpg_members.html">Member Companies</a>
		    </div>
	<!-- End Relative Absolute Positioning -->
		  </td>

[Geologist1724]

Thank you very much, that's very helpful.

I have one very elementary question. Much of what I have learned about html code comes from doing things in Dreamweaver design view (WYSIWYG), then looking at the code to see how Dreamweaver has coded what I have done. So I suspect Dreamweaver actually coded the "background" tag you refer to. How should that tag be closed? Should it have </td>:

<td width="207" height="120" valign="top" background="images/Right_Top.gif"></td>

or

<td width="207" height="120" valign="top" background="images/Right_Top.gif" />

[jscheuer1]

Neither actually. Or rather the first method, but this could be misleading in the code I supplied. I have closed it for you in the appropriate place, which is after the contents of the cell (td element):

 	   <td width="207" height="120" valign="top" background="images/Right_Top.gif">
	<!-- Begin Relative Absolute Positioning -->       	  
		     <div id="company" style="width:100%;height:100%;position:relative;">
			    <a style="position:absolute;top:81px;left:5px;" href="http://www.pcpg.org/pcpg_members.html">Member Companies</a>
		    </div>
	<!-- End Relative Absolute Positioning -->
		  </td>

[Geologist1724]

Thanks!