Member Avatar for CreatorZeus

this is what i ahve so far. maybe its just a crazy idea but i trying to get it to work

<td onclick="this.style.backgroundColor = 'Red';" bgcolor=skyblue width= '58px' height= '72px' align="right">
<a target="iframeswitch" href="index.php"><div style="height:100%;width:100%">yo</div></a>
<a target="iframeswitch2" href="index.php"><div style="margin-right: -100%;"> yo</div></a>
</td>

  • 2 Contributors
  • 1 Reply
  • 229 Views
  • 26 Minutes Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

— overlapping blocks inside a table cell is fine, but the approach with negative margins is fragile and can break click targets. Treat the cell as a positioned container and absolutely position the layers you want to stack. That gives predictable stacking (z-index), full-size clickable areas, and simpler layout.

Example (use CSS classes in production rather than inline styles):

<td style="background:skyblue; width:58px; height:72px; padding:0; position:relative;">

  <!-- top layer: full-size link -->
  <a href="index.php" target="iframeswitch"
     style="position:absolute; top:0; left:0; right:0; bottom:0; display:block; z-index:20; text-align:right; line-height:72px;">
    yo
  </a>

  <!-- visual layer beneath: non-interactive overlay -->
  <a href="index.php" target="iframeswitch2"
     style="position:absolute; top:0; left:0; width:100%; height:100%; display:block; z-index:10; pointer-events:none; opacity:0.9;">
    yo
  </a>

</td>

Notes and troubleshooting

  • Make the cell position:relative so absolutely positioned children layer inside it.
  • Use display:block on anchors so width/height/padding behave as expected inside the cell.
  • Control which layer receives clicks with z-index (higher is on top) and pointer-events:none for overlays that should be purely visual. If both links must be clickable and overlap, avoid pixel-perfect overlap or handle events in JavaScript.
  • Avoid nested anchors (invalid HTML). For accessibility, ensure each interactive layer has a clear label and keyboard focus order.
  • If it still looks wrong, inspect computed styles in DevTools: check padding, box-sizing, and whether the cell's dimensions are what you expect.
  • For layout rather than tabular data, prefer divs with CSS Grid/Flexbox instead of a table — it simplifies overlapping and responsive behavior.

(Responding to : if you need a specific interaction, describe which layer should catch clicks and whether both need to be focusable — that determines the simplest solution.)

Member Avatar for Member #949455

trying to over lap some div's in a cell
this is what i ahve so far. maybe its just a crazy idea but i trying to get it to work

<td onclick="this.style.backgroundColor='Red';" bgcolor=skyblue width='58px' height='72px' align="right">

<a target="iframeswitch" href="index.php">
<div style="height:100%;width:100%">yo</div>
</a>

<a target="iframeswitch2" href="index.php">
<div style="margin-right: -100%;">yo</div>
</a>

</td>

What are you trying do? I don't understand what you are doing?

<a target="_blank|_self|_parent|_top|framename">

Can you explain more what you are trying to do with the table?

It's a bit late now. I gotta go.

Edited by Member #949455 because: grammer
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.