0

我正在尝试在我的网站上的肖像旁边放置 Twitter 和 Facebook 图像，但为了获得正确的定位，我必须使用 div。问题是，当我向图像添加 div 和指向它的链接时，div 使图像无法被单击并转到链接。我无法摆脱 div，因为这是正确定位图像的唯一方法。我将在下面发布一个带有代码的 JSfiddle。

JSFiddle：http: //jsfiddle.net/HeyItsProdigy/RVUhV/

问题领域：<div id="facebook"><a href="http://www.facebook.com"><img src="fb.png" height="101" width="101" /></a>

4

3 回答 3

0

问题和你描述的不完全一样。问题是您的定位导致您的 Twitter 元素与其他元素重叠，这使得它们无法点击。

不幸的是，没有一个简单的解决方案。我认为你将不得不重新考虑你的整个 CSS 结构，包括消除不推荐使用的<center>标签来解决这个问题。祝你好运。

于 2013-08-09T20:37:57.450 回答
0

很抱歉告诉你，答案是：做一个现代的 HTML 教程！您应该尝试Code Academy，他们为初学者和中级提供直接反馈的互动课程。看来您被一本旧的 HTML 3/4 书困住了，这对您没有任何好处。但是我也为您的链接问题得到了一个直接的答案：这个小提琴，您将图像作为背景图像包含在内，并且通过有效地使用您的类和选择器，如果您想添加一些东西，您必须编写（主要是复制+粘贴）很少的行. 你用这个 CSS 部分做的最多：

.socialmedia a {
    display: block; /* Because the image is probably higher than the text */
    height: 50px; /* you have to set it to block and height 50px to show the image */
    padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
    padding-top: 12px; /* center in the middle of the image */
    padding-bottom: 12px;
    text-decoration: none;
}

示例 g+：CSS：

.g a {
    background: url(logo_g_50x50.png) no-repeat;
}

HTML

<li class="g"><a href="plus.google.com/meeeeee">+1 me on g+</a></li>

并做了！它更易于阅读，甚至更易于维护，以供以后重用或添加

于 2013-08-10T01:16:26.943 回答
0

使用 z 索引：

#twitter {
    position:relative;
    bottom:290px;
    left:168px;
    z-index: 1;
}
#facebook {
    position:relative;
    top:83px;
    right:168px;
    z-index: 5;
}

jsfiddle

但是，不应以这种方式使用这种类型的 CSS 样式。除非使用定位元素，否则很少使用诸如top, left,bottom等规则进行定位。rightabsolute

您应该考虑使用margin和padding以及display用于定位 div 的属性。大部分代码都可以取出来。

于 2013-08-09T20:46:41.877 回答