Question

I’m currently working on this page and I’m trying to add a link within the lighbox pop-up but when ever I do that It messes up the image display as shown on the page. I want it to show under these words (XHTML | Javascript | Jquery | Design | Logo) when the image pops up. Any ideas. The HTML is as shown below:

    <li><a href="images/huelarge.png" title="XHTML | Javascript | Jquery | Design | Logo<br />
<a href="services.php">Go to site</a>">
        <img src="images/huethumb.jpg" alt="" width="314" height="157" /></a></li>
        <li>

Answer 1

The issue is that your Java (or whatever makes your “A” link) has errors in it’s structure. Therefore, you end up with a tag that looks like

<a servers.php"="> <!--Your Link Text--> </a>gt;"

Because of the poor structure, the gt;” is added to the DOM without being wrapped around any element. Take a look at your structure of that markup wherever you generate it and fix it.

Then, in your CSS:

#sampler ul li{
  //everything else that was default stayed the same, add the next line.
  position:relative;
}

Now, make the anchor absolutely positioned. It’s parent (#sampler ul li) is relative, so it will stick to the scope of that element.

#sampler ul li a{
  position:absolute;
  //set your top and left values
  top: value;
  left: value

}

Now, if you’ve fixed your tags so they now look proper, like such:

<a href="services.php"> <!--Your Link Text--> </a>

Then the element will position absolutely over the LI and work as intended, at that point you can style the anchor element as intended and change the top and left’s until you’ve got it positioned where you like.