Ссылка во всплывающем окне лайтбокса

Question

Я сейчас работаю над этой страницей , и я пытаюсь добавить ссылку во всплывающее окно с лайтбоксом, но когда я делаю это, он портит изображение, как показано на странице.Я хочу, чтобы он отображался под этими словами (XHTML | Javascript | Jquery | Дизайн | Логотип), когда изображение появляется.Есть идеи.HTML-код показан ниже:

    <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

Проблема в том, что ваша Java (или что-то, что делает вашу ссылку "A") имеет ошибки в своей структуре. Таким образом, вы получите тег, который выглядит как

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

Из-за плохой структуры gt; "добавляется в DOM без наложения на какой-либо элемент. Посмотрите на структуру этой разметки, где бы вы ее ни сгенерировали, и исправьте ее.

Тогда в вашем CSS:

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

Теперь сделайте якорь абсолютно позиционированным. Его родитель (#sampler ul li) является относительным, поэтому он будет придерживаться области действия этого элемента.

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

}

Теперь, если вы исправили свои теги, теперь они выглядят правильно, например:

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

Тогда элемент будет располагаться абсолютно над LI и работать так, как задумано, в этот момент вы можете стилизовать элемент привязки так, как задумано, и изменять верхний и левый элементы, пока вы не разместите его там, где вам нравится.