链接互相重叠

当您将鼠标悬停在其上时，本网站上的链接似乎重叠。 div的已经给予了正确的高度，但一旦你将鼠标悬停在链接似乎是捡的165像素链接互相重叠

http://www.dawaf.co.uk/animate/

有没有一种方法来设置高度为93px停止重叠的高度？

#about { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 89px; 
    width: 336px; 
} 
span.title-link { 
    font-size: 6.8em; 
    font-weight: bold; 
    font-family: 'Titillium Web', Arial, sans-serif; 
    text-decoration: none; 
    line-height: 93px; 
    cursor: pointer; 
    opacity: 0; 
} 

span.title-link a { 
    color: #FFF; 
    text-decoration: none; 
} 

span.title-link a:hover { 
    color: #E91F4C; 
} 

#about-red { 
    left: -104px; 
    width: 545px; 
} 

#logo-red { 
    height: 93px; 
    width: 209px; 
    position: absolute; 
    left: 336px; 
} 

/*Echo 
------------------------------------------------------------ */ 
#gallery { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 92px; 
    width: 434px; 
} 

#gallery-echo { 
    left: -202px; 
    width: 714px; 
} 

#logo-echo { 
    height: 93px; 
    width: 280px; 
    position: absolute; 
    left: 434px; 
} 

/*Events 
------------------------------------------------------------ */ 
#contact-events { 
    left: -216px; 
    width: 862px; 
} 

#contact { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 92px; 
    width: 448px; 
} 

#logo-events { 
    height: 93px; 
    width: 414px; 
    position: absolute; 
    left: 448px; 
}

来源

2013-03-27 user1652997

也许你修正了它，但在Google Chrome浏览器中看起来没问题。但是，一点。在菜单中，如果尽量保留适用于a元素的尽可能多的样式，并且很少应用于ul或li，您将获得更多可预测的CSS行为。 – magi182 2013-03-27 18:30:41

如果您在Chrome中使用检查元素，则可以看到a元素重叠。因此，关于“关于”的链接将部分路径重叠到“图库”链接上。 – user1652997 2013-03-27 18:33:17

问题出在span.title-link – user1652997 2013-03-27 18:34:44

内联元件，例如跨度，a链接等忽略 'height' 属性。尝试：

.title-link { 
    display: inline-block; 
}

来源

2013-03-27 18:40:55 rvidal

Yeppers。这里。 – Michael 2013-03-27 18:44:09

谢谢你，工作。 – user1652997 2013-03-27 18:44:21

你会碰到很多更多的工作，如果你是绝对定位的元素和固定大小你的问题加剧，因为你与％/ em单位混合像素。花时间调整你的方法会更好，而不是解决这个问题。

将绝对定位限制为尽可能少的元素。在这种情况下，您希望将导航项目包装在容器中，并绝对放置容器。
不要固定高度;使用font-size以及line-height:SOME_MULTIPLE(i.e. 1.5)和vertical-align:middle（无论元素是内联/内联块/块都可以工作）。
尝试概括你的风格，并通过类将它们应用于多个元素，而不是通过id对各个元素进行风格化。它使您的CSS更易于维护。

理由给你这些技巧和不回答你的问题......

你将有一个更容易的时间越来越最初这个网站一起
你将有较少的工作来改变文本一个导航项目，或添加一个新的导航项目。
我已经看过这种风格与ids和fix-the-position/size-of-everything方法。这是太多余的，僵硬的有用。忘记最佳做法;它违反了基本的CSS和HTML原则，并且使每个人都很困难。打破这个习惯，让这个和所有未来的项目变得更加轻松！

来源

2013-03-27 19:21:10

链接互相重叠

回答

相关问题