Home/ Questions/Q 7564731
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T13:58:15+00:00

The scenario is that I want to insert a number, which is placed in

  • 0

The scenario is that I want to insert a number, which is placed in a <div>, over an image(z-index of image= -1).I have an image inside my anchor tag. I’ve found out the Top and Left positions of the anchor tag (id = PersonalInfo), then I’ve set the position of the <div> to fit in the center of the image.But the number shows somewhere on the extreme right of the browser window, and a little below the image. How do I get it in the proper position.
Also, I want to know how to get the top and left co-ordinates of any element with respect to the browser window’s borders (not including the toolbar at the top).

 <a href='#' id='PersonalInfo' class='links' disabled='disabled' name='1' ><img src='../Images/COBreadCrumb/disabled.gif'></a>

The Jquery code I wrote for it is this:

var number = $("#PersonalInfo").attr("name");
          var tag1 = "<font style='Verdana' size='3'>";
          var tag2 = "</font>";
          var content = tag1 + number + tag2;
          $("#" + number).html(content);
          var LinkTop = $("#PersonalInfo").offset().top;
          var LinkHeight = $("#PersonalInfo").height();
          var NumberTop = LinkTop + (LinkHeight / 2);
          var NumberLeft = $("#PersonalInfo").offset().left + ($("#PersonalInfo").width() / 2);
          $("#" + number).offset({top:NumberTop,left:NumberLeft});

 The div tag:

<div id="1"></div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Becase Richard beat me to the punch, and as bazmegakapa points out, the table-cell trick is fail in IE7, here’s another solution:

    <!doctype html>
<html>
<head>
<title>Center</title>
<style>
#meme {
  background: url(http://thechive.files.wordpress.com/2010/12/funny-cat-faces-8.jpg?w=500&h=374);

  /* same size as background image */
  width: 500px;
  height: 374px;

  /* #meme-text will be positioned relative to this */
  position: relative;
}

#meme-text {
  /* The height of this element will be approximate 60px too,
   * assuming the content will fit on one line.
   */
  font-size: 60px;

  /* Center vertically <- This is the tricky part. */
  position: absolute;
  top: 157px;  /* #meme height / 2 - height of this element */

  /* Center horizontally */
  text-align: center;
  width: 100%;

  /* Make this example look pretty. */
  color: white;
  font-family: Impact, sans-serif;
}
</style>
</head>
<body>

<div id="meme">
  <div id="meme-text">I NOM YOUR FACE</div>
</div>

</body>
</html>
    • 0