By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,656 Members | 968 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,656 IT Pros & Developers. It's quick & easy.

How's hyperlink overlap a image and located at bottom right corner of table cell.

P: 28
Hi, I'm encounter a problem here. I hope somebody able helping me.
i'm put a "log out" hyperlink overlap a image and that particular image is inside a table cell. I also try align the hyperlink on bottom and right at the cell but the problem is occur.

If i set position as absolute then the image and hyperlink will leak out from table. If without the position setting then hyperlink is not overlap the image. Any suggestion?

This is my HTML code
Expand|Select|Wrap|Line Numbers
  1. <TABLE cellSpacing="0" cellPadding="0" width=100% border="1">
  2.     <TBODY>
  3.     <tr height="31">
  4.         <TD width="153"><IMG src="files/a1.gif" height="31" style="display:block;"></TD>
  5.         <TD width="309"><IMG src="files/a2.gif" height="31" style="display:block;"></TD>
  6.         <TD width="146"><IMG src="files/a3.gif" height="31" style="display:block;"></TD>
  7.         <TD><IMG src="files/a4.gif" width=100% height="31" style="display:block;"></TD>
  8.         <TD width="110"><IMG src="files/a4.gif" height="31" style="display:block;"></TD>
  9.     </tr>
  10.     <tr>
  11.         <TD><IMG src="files/b1.gif" style="display:block;"></TD>
  12.         <TD><IMG src="files/b2.gif" style="display:block;"></TD>
  13.         <TD><IMG src="files/b3.gif" style="display:block;"></TD>
  14.         <TD><IMG src="files/b4.gif" width=100% height="48" style="display:block;"></TD>
  15.         <TD style="text-align: right; vertical-align: bottom;">
  16.         <a href="" style="display:block; position: absolute; z-index:2;">Log Out</a>
  17.         <IMG src="files/b5.gif" style="display:block;">
  18.         </TD>
  19.     </tr>
  20.     </TBODY>
  21. </TABLE>
  22.  
May 27 '09 #1
Share this Question
Share on Google+
8 Replies


prabirchoudhury
100+
P: 162
try this block with logout link and image .. put both in a <div>


Expand|Select|Wrap|Line Numbers
  1.  
  2. <div style="background: url(files/b4.gif) no-repeat; float: right;">
  3.             <a href="" style="display:block; ">Log Out</a>
  4.            </div>
  5.  
May 27 '09 #2

omerbutt
100+
P: 638
@webster5u
hi webster
try using this
Expand|Select|Wrap|Line Numbers
  1. <TABLE cellSpacing="0" cellPadding="0" width=100% border="1">
  2.      <TBODY>
  3.      <tr height="31">
  4.          <TD width="153"><IMG src="files/a1.gif" height="31" style="display:block;"></TD>
  5.          <TD width="309"><IMG src="files/a2.gif" height="31" style="display:block;"></TD>
  6.          <TD width="146"><IMG src="files/a3.gif" height="31" style="display:block;"></TD>
  7.          <TD><IMG src="files/a4.gif" width=100% height="31" style="display:block;"></TD>
  8.          <TD width="110"><IMG src="files/a4.gif" height="31" style="display:block;"></TD>
  9.      </tr>
  10.      <tr>
  11.          <TD><IMG src="files/b1.gif" style="display:block;"></TD>
  12.          <TD><IMG src="files/b2.gif" style="display:block;"></TD>
  13.          <TD><IMG src="files/b3.gif" style="display:block;"></TD>
  14.          <TD><IMG src="files/b4.gif" width=100% height="48" style="display:block;"></TD>
  15.          <TD align="center" valign="middle" style="background-image:url(../ajaxpaging/loading.gif); background-repeat:no-repeat; background-position:center;">
  16.          <a href="filename.php">Log Out</a>
  17.          </TD>
  18.      </tr>
  19.      </TBODY>
  20.  </TABLE>
  21.  
May 27 '09 #3

prabirchoudhury
100+
P: 162
still that not gonna work .. did you test this script ? but it is not working for me in any browser.
May 28 '09 #4

omerbutt
100+
P: 638
@prabirchoudhury
its working in all browasers IE and Mozilla specially
May 28 '09 #5

P: 28
Sorry for late reply. I'm busy for the other code yesterday.

Thank for your sharing, I get your idea.
Both of your trying change the background image instead image tag. The script apply in TABLE TD is fine but if it apply in DIV then it bring along idle space between TD and DIV.

Expand|Select|Wrap|Line Numbers
  1.             <TD style="background: url(WEB_CONTEXT/images/b5.gif) no-repeat center; 
  2.                 text-align:center; vertical-align: bottom;">
  3.                   <a href="/webdev/mis/auth/logout.jsp">Log Out</a>
  4.             </TD>
  5.  
May 29 '09 #6

omerbutt
100+
P: 638
@webster5u
sory if i am not getting you but are you trying to replace a td with a div , you have to place the div inside the td , if i am wrong please do explain a lil bit between which td and div there is alot of space
reagrds,
omer aslam
May 29 '09 #7

P: 28
I change TD background image instead of DIV. It is work fine now.

If it is put background image in DIV tag then background image will only covers the DIV tag and TD is show in white. As below illustrate

<TD>
wwwwwwwwwwwwwwwwww
wwwwwwwwwwwwwwwwww
wwwwwww<DIV>bbb</DIV>
wwwwwwwwwwwwwwwwww
</TD>

p/s: w is white and b is blue from image.
May 29 '09 #8

omerbutt
100+
P: 638
hi
look here and which doc type are you using and try assigning same width to both TD nad Div
link
May 29 '09 #9

Post your reply

Sign in to post your reply or Sign up for a free account.