• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 435
  • Last Modified:

Position image to anchor to text

Please look at http://www.rcmbtech.com/football/def_template.htm

I have an offensive and defensive scheme I would like to display and have the arrow image anchor to the correct defensive position. In the example above, this works fine with the div tags I have created but if you resize or maximize the browser then the image does not stay anchored to the text.

How can I have the image remain on top and stay anchored to the text no matter what I do with the browser window size?

Thanks for your help,
Curtis
0
rcmb
Asked:
rcmb
  • 3
  • 3
  • 2
  • +1
2 Solutions
 
VirusMinusCommented:
i don't see any arrow image or any css positioning being used in the link you've provided
0
 
hurrikanesolutionsCommented:
I don't see an image either?
0
 
rcmbAuthor Commented:
Sorry about that I was working on the page trying to get things to work and removed the arrows to do some other testing. All are back now.

Thanks,
Curtis
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
oceanbeachCommented:
Hello rcmb,

Try adding a wrapping div around the images...

<div style="width: 780px; position: relative; margin:0 auto;">
  <DIV id=left1
style="Z-INDEX: 1; LEFT: 230px; POSITION: absolute; TOP: 190px"><IMG height=97
src="ee6_files/right_arrow.gif" width=97 border=0> </DIV>
  <DIV id=left2
style="Z-INDEX: 1; LEFT: 350px; POSITION: absolute; TOP: 190px"><IMG height=97
src="ee6_files/right_arrow.gif" width=97 border=0> </DIV>
  <DIV id=left3
style="Z-INDEX: 1; LEFT: 445px; POSITION: absolute; TOP: 190px"><IMG height=97
src="ee6_files/right_arrow.gif" width=97 border=0> </DIV>
  <DIV id=left4
style="Z-INDEX: 1; LEFT: 565px; POSITION: absolute; TOP: 190px"><IMG height=97
src="ee6_files/right_arrow.gif" width=97 border=0> </DIV>
</div>

I hope this helps!

oceanbeach
0
 
hurrikanesolutionsCommented:
oceanbeach is particially correct.  You not only have to do what he suggests but you should define the width of the outer div and margin: auto.   Once the arrows are in the main outside div you then adjust the margin-left to move them over rather than using left: and absolute position.  Below you will find the code but you will need to adjust the margins a little bit better to get the arrows to line up correctly.


<head>
<meta http-equiv="Content-Language" content="en-us">
</head>

<div style="width: 780px; margin: auto;">

<div id="left1" style="top: 190;position: absolute; z-index: 1; visibility: show;">
<img src="/football/images/right_arrow.gif" width="97" height="97" border="0">
</div>
<div id="left2" style="top: 190; margin-left: 120px; position: absolute; z-index: 1; visibility: show;">
<img src="/football/images/right_arrow.gif" width="97" height="97" border="0">
</div>
<div id="left3" style="top: 190;  margin-left: 220px; position: absolute; z-index: 1; visibility: show;">
<img src="/football/images/right_arrow.gif" width="97" height="97" border="0">
</div>
<div id="left4" style="top: 190;  margin-left: 320px; position: absolute; z-index: 1; visibility: show;">
<img src="/football/images/right_arrow.gif" width="97" height="97" border="0">
</div>
<table border="0" width="780" cellpadding="0" style="border-collapse: collapse">
<tr>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top" colspan="2">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top" colspan="2">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">
&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">
&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top" colspan="2">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">
&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top" colspan="2">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">
<p align="right">E</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">
<p align="right">T</td>
<td align="center" width="60" height="40" class="defense" valign="top">
&nbsp;</td>
<td align="center" width="60" height="40" class="defense" colspan="2" valign="top">
T</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">
E</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
</tr>
</table>
</div>

<div align="center">
<table border="0" width="780" cellpadding="0" style="border-collapse: collapse">
<tr>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
<td class="offense" align="center" width="60" height="40">
<img border="0" src="images/circle.gif" width="50" height="30"></td>
<td class="offense" align="center" width="60" height="40">
<img border="0" src="images/circle.gif" width="50" height="30"></td>
<td class="offense" align="center" width="60" height="40">
<img border="0" src="images/circle_full.gif" width="50" height="30"></td>
<td class="offense" align="center" width="60" height="40">
<img border="0" src="images/circle.gif" width="50" height="30"></td>
<td class="offense" align="center" width="60" height="40">
<img border="0" src="images/circle.gif" width="50" height="30"></td>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
</tr>
</table>
</div>
0
 
hurrikanesolutionsCommented:
Sorry update... with works in IE and Firefox.

<base href="http://www.rcmbtech.com/football/" />
<head>
<meta http-equiv="Content-Language" content="en-us">
</head>

<div style="text-align: center;  width: 100%;">
<div style="width: 780px; margin: auto;">
<div id="left1" style="top: 190; margin-left: 0px; position: absolute; z-index: 1; visibility: show;">
<img src="/football/images/right_arrow.gif" width="97" height="97" border="0">
</div>
<div id="left2" style="top: 190; margin-left: 120px; position: absolute; z-index: 1; visibility: show;">
<img src="/football/images/right_arrow.gif" width="97" height="97" border="0">
</div>
<div id="left3" style="top: 190;  margin-left: 220px; position: absolute; z-index: 1; visibility: show;">
<img src="/football/images/right_arrow.gif" width="97" height="97" border="0">
</div>
<div id="left4" style="top: 190;  margin-left: 320px; position: absolute; z-index: 1; visibility: show;">
<img src="/football/images/right_arrow.gif" width="97" height="97" border="0">
</div>


<table border="0" width="780" cellpadding="0" style="border-collapse: collapse">
<tr>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top" colspan="2">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top" colspan="2">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">
&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">
&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top" colspan="2">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">
&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top" colspan="2">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">
<p align="right">E</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">
<p align="right">T</td>
<td align="center" width="60" height="40" class="defense" valign="top">
&nbsp;</td>
<td align="center" width="60" height="40" class="defense" colspan="2" valign="top">
T</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">
E</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
<td align="center" width="60" height="40" class="defense" valign="top">&nbsp;</td>
</tr>
</table>
</div>

<div style="margin: auto; width: 780px;">
<table border="0" width="780" cellpadding="0" style="border-collapse: collapse">
<tr>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
<td class="offense" align="center" width="60" height="40">
<img border="0" src="images/circle.gif" width="50" height="30"></td>
<td class="offense" align="center" width="60" height="40">
<img border="0" src="images/circle.gif" width="50" height="30"></td>
<td class="offense" align="center" width="60" height="40">
<img border="0" src="images/circle_full.gif" width="50" height="30"></td>
<td class="offense" align="center" width="60" height="40">
<img border="0" src="images/circle.gif" width="50" height="30"></td>
<td class="offense" align="center" width="60" height="40">
<img border="0" src="images/circle.gif" width="50" height="30"></td>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
<td class="offense" align="center" width="60" height="40">&nbsp;</td>
</tr>
</table>
</div>
</div>
</div>
0
 
rcmbAuthor Commented:
hurrikanesolutions/oceanbeach:

This works great but is there a way I can set an Id tag on the letter (like the letter E) and have the left1 arrow anchor to that. The issue I have is the defense alignment will change frequently and there are about 100 different (50 left and 50 right) alignments so I would have to figure out the position of each letter. Or, do you know of a way I can computer the position of the letter and then set that value on the fly? For instance, if the first E appears at 240px from the left can I then have that set automatically.

Curtis
0
 
oceanbeachCommented:
Hi rcmb,

You could also try changing...
        <TD class=defense vAlign=top align=middle width=60 height=40><P align=right>E</P></TD>

to this...
        <TD class=defense vAlign=top align=middle width=60 height=40><P align=right>E</P><span style="position: relative;"><IMG style="position:absolute; top: -28px;" height=97 src="ee6_files/right_arrow.gif" width=97 border=0></span></TD>

This will make the arrow positioned relative to the location of 'E'.

I hope this helps!

-OB
0
 
rcmbAuthor Commented:
I split the points because oceanbeach started on the right track but hurrikanesolutions had the answer that I actually used.

Oceanbeach your last solution works but the arrow remains behind the other images no matter what I tried.

Thanks to both of you for you time. You can check back later to www.rcmbtech.com/football to the see the final product in use. I should have it fully integrated tomorrow sometime.

Curtis
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.

  • 3
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now