超链接表现异常

时间:2014-01-05 18:05:45

标签: html css hyperlink

使用Wordpress和标签我有三个单独的页脚,重要的是有三个单独的页脚模板和样式,因为每个页脚相应地作用于它所在的页面。三分之二的页脚工作得很好但是其中一个因为多种原因而表现得完全不同,例如它添加了不存在的超链接,并且还添加了不同的样式,在这种情况下是紫色,我相信是'访问”。

有谁知道可能导致这种情况的原因是什么?我已粘贴下面的代码..

<ul class="bxslider">
    <li class="photo"><img src="http://chefpaulcrowe.com/img/gallery/full/example-02.jpg"/></li>
    <li class="photo"><img src="http://chefpaulcrowe.com/img/gallery/full/example-01.jpg"/></li>
    <li class="photo"><img src="http://chefpaulcrowe.com/img/gallery/full/example-03.jpg"/></li>
</ul>

<div id="bx-pager-wrapper">
  <div id="bx-pager">
    <a data-slide-index="0" href=""><img src="http://chefpaulcrowe.com/img/gallery/thumb/example-    02.jpg"/>
    <a data-slide-index="1" href=""><img src="http://chefpaulcrowe.com/img/gallery/thumb/example-    01.jpg"/>
    <a data-slide-index="2" href=""><img src="http://chefpaulcrowe.com/img/gallery/thumb/example-    03.jpg"/>
  </div>    

<script type="text/javascript">
  $(document).ready(function(){

$('.bxslider').bxSlider({
  auto: true,
  pagerCustom: '#bx-pager'
});
  });
</script>

<footer id="footer-gallery">
  <div class="wrapper">
    <div class="left">      
      <ul>
        <li>2013 Paul Crowe</li>
        <li>Created by <a href="http://liamhodnett.com">Liam Hodnett</a></li>
      </ul>
    </div>

    <div class="right">
      <ul>
        <li><a href="http://chefpaulcrowe.com/">Home</a></li>
        <li><a href="http://chefpaulcrowe.com/blog/">Blog</a></li>
        <li><a href="http://chefpaulcrowe.com/gallery/">Gallery</a></li>
        <li><a href="http://chefpaulcrowe.com/contact/">Contact</a></li>
      </ul>
    </div>
  </div>
</footer>

</body>
</html>

2 个答案:

答案 0 :(得分:0)

<footer id="footer-gallery"><div id="bx-pager-wrapper"> a似乎将data-slide-index="2"标记应用于footer-gallery。尝试从bx-pager-wrapper div。

中取出bx-pager-wrapper

<强>更新

试试这个,我猜你的JS正在寻找div的ID,但是将它和页脚包装在bx-pager-wrapper中(随意调用它)并从{删除样式} {1}}并将它们添加到此新div:

#example{
    width: 100%;
    height: 142px;
    position: absolute;
    bottom: 0;
    background: url(/img/pager-wrapper.png) repeat-x;
    z-index: 10;
}

现在该页脚依赖于bx-pager-wrapper的样式,但它不能在里面,所以这可能有助于保留样式但不适用于a s

希望第三次充满魅力

好的,请设置example div,添加与bx-pager-wrapper相同的所有样式。接下来,对于bx-pager-wrapper,只留下height: 142pxwidth: 100%,确保您将页脚取出,以便页脚和bx-pager-wrapper是兄弟姐妹,然后从页脚中删除margin-top: 172px;

EXAMPLE

您没有将样式应用于示例,您需要重新排序footerbx-page-wrapper

New Image

答案 1 :(得分:0)

好的,所以我想我现在拥有它,你将不得不做更多的重新排序。首先将删除#example并将这些样式放回bx-pager-wrapper。现在取bx-pager-wrapper并将其放在bx-wrapper内,它应该位于bx-wrapper的关闭标记之前的最右下方。接下来在CSS中将bx-wrapper设置为position: relative。将页脚保留在原位,应该可以正常工作。

修改


同时删除overflow-y: hidden;

上的#gallery

好的,看起来问题是下面的a个标签都没有关闭。这很简单哈哈不幸的是控制台总是将它们显示为关闭所以我没有看到它。您可以将所有内容恢复到最初的状态,然后关闭这些标记

<div id="bx-pager-wrapper">
    <div id="bx-pager">
    <a data-slide-index="0" href=""><img src="http://chefpaulcrowe.com/img/gallery/thumb/example-    02.jpg"/>
    <a data-slide-index="1" href=""><img src="http://chefpaulcrowe.com/img/gallery/thumb/example-    01.jpg"/>
    <a data-slide-index="2" href=""><img src="http://chefpaulcrowe.com/img/gallery/thumb/example-    03.jpg"/>
  </div>