0

好的，我有一张图片，当您单击时，您会转到某个网址（直接链接或类似的东西）而且我在它下面有一个带有文本的框，由于某种原因，该图片不可点击，而带有文本的框下面是无法复制的（文本当然不是框），

图像很好且可点击，直到我用 CSS 定位它然后它不起作用，下面的文本框也用 CSS 定位但我不知道为什么这会使其不可点击和不可复制这是 css 到图像和文本框

    }
#left{
width:120px;
height:auto;
float:left;
margin-top:10px;
margin-left:150px;
}

这是图像和文本框的 HTML 代码

    <div id="left"> <a href="user.php" target="_blank" align="right"><img src="img/acc.png"></a></div>
<br><br><br><br><br><br>
<div id="boxes">
<div id="left">
<div id="box-top-green">Users & Ranks</div>
<div id="box-centro">
                    <p>MxS II Tankz (Leader)
                    </p>MxS II Tacks (Co Leader)
                    <p> MxS II xTech (Tech) 
                    </p> MxS II --- 
                    <p> MxS II --- 
                    </p> MxS II --- 
                    <p> MxS II --- 
                    </p>MxS II --- 
                    <p> MxS II --- 
                    </p> MxS II --- 
                    <p> MxS II ---
</div>
<div id="box-abajo"></div>





</div>

谁能帮忙

整个代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MxS Offical Website</title>
<link href="./css/index.css" rel="stylesheet" type="text/css" />
<link href="./css/box.css" rel="stylesheet" type="text/css" />
</head>


<body>
<div id="nav">
<a href="http://www.youtube.com">xTech</a>
<div class="menu">utubeuser</div>
<div class="menu">utubeuser</div>
<div class="menu">utubeuser</div>
<div class="menu">utubeuser</div>
<div class="menu">utubeuser</div>
</div>


<div id="header"><div style="position:absolute; top:46px; left:50px">
<br><br>


<a href="https://www.facebook.com/pages/Mxs-Clan/474428962653273?ref=hl" target="_blank" align="right"><img src="http://www.niftybuttons.com/3d/facebook.png"></a><a href="http://www.youtube.com/" target="_blank" align="left"><img src="http://www.niftybuttons.com/3d/youtube.png"></a>


<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>



<div id="right">
<div id="box_top_green">MxS - Be Apart Of The Experiance</div>

<div id="box_centro">MxS (MircoXGaming, is a "sniping clan we play various call of duty games 
Such As <br> MW2, Black ops 1 & Black ops 2 and more <br> We are currently explanding over both console 
<br> Xbox 360, And Playstation 3, Some of our clan members have even pre - ordered PS4 And XBOX One 
But Lets get down to the point, If you want to be apart of the "Clan" there a a few step you have to go through
<br> First you need to go to the try out page, You should find the link in the red bar above
<br> And on the try out page further instructions will be there, Thanks -MxS xTech<br></div>


<div id="box_abajo"></div>
<div id="box_top_green">MxS - A Elite Sniping Clan - MicroXGaming</div>

<div id="box_centro"><object width="640" height="360">
  <param name="movie" value="https://www.youtube.com/v/ppTnSl7Fi7Q?version=3"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowScriptAccess" value="always"></param>
  <embed src="https://www.youtube.com/v/ppTnSl7Fi7Q?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></embed>
</object></div>
<div id="box_abajo"></div>
</div>
</div>



<br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<div id="left"> <a href="user.php" target="_blank" align="right"><img src="img/acc.png"></a></div>
<br><br><br><br><br><br>
<div id="boxes">
<div id="left">
<div id="box-top-green">Users & Ranks</div>
<div id="box-centro">
                    <p>MxS II Tankz (Leader)
                    </p>MxS II Tacks (Co Leader)
                    <p> MxS II xTech (Tech) 
                    </p> MxS II --- 
                    <p> MxS II --- 
                    </p> MxS II --- 
                    <p> MxS II --- 
                    </p>MxS II --- 
                    <p> MxS II --- 
                    </p> MxS II --- 
                    <p> MxS II ---
</div>
<div id="box-abajo"></div>





</div>



<br><br><br><br>

</head>
<body>

<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>



<div id="footer">Site Made By xTech - Zac<div style="width:300px; float:right;">All rights to there respective owners</div></div>


</body>

盒子.css

#boxes{
width:100%;
height:auto;
margin:auto;
margin-top:35px;
}
#left{
width:120px;
height:auto;
float:left;
margin-top:10px;
margin-left:150px;
}
#right{
width:600px;
height:auto;
float:left;
margin-top:-238px;
margin-left:510px;
}
#box-top-green{
background-image:url(../img/box-top-green.png);
width:307px;
height:28px;
margin:auto;
float:left;
font-family:Volter; font-size:9px; color:#FFFFFF; text-transform:uppercase;
text-shadow: 1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
padding-left:18px; padding-top:22px;
margin-top:10px;
}
#box-top-yellow{
background-image:url(../img/box-top-yellow.png);
width:307px;
height:28px;
margin:auto;
float:left;
font-family:Volter; font-size:9px; color:#FFFFFF; text-transform:uppercase;
text-shadow: 1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
padding-left:18px; padding-top:22px;
margin-top:10px;
}
#box-top-violet{
background-image:url(../img/box-top-violet.png);
width:307px;
height:28px;
margin:auto;
float:left;
font-family:Volter; font-size:9px; color:#FFFFFF; text-transform:uppercase;
text-shadow: 1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
padding-left:18px; padding-top:22px;
margin-top:10px;
}
#box-centro{
background-image:url(../img/box-centro.png);
width:315px;
height:auto;
margin:auto;
float:left;
overflow:auto;
padding-left:5px;
padding-right:5px;
}
#box-abajo{
background-image:url(../img/box-abajo.png);
width:325px;
height:6px;
margin:auto;
float:left;
}
#box_top_violet{
background-image:url(../img/box_top_violet.png);
width:645px;
height:28px;
margin:auto;
float:left;
font-family:Volter; font-size:9px; color:#FFFFFF; text-transform:uppercase;
text-shadow: 1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
padding-left:18px; padding-top:22px;
margin-top:10px;
}
#box_top_green{
background-image:url(../img/box_top_green.png);
width:645px;
height:28px;
margin:auto;
float:left;
font-family:Volter; font-size:9px; color:#FFFFFF; text-transform:uppercase;
text-shadow: 1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
padding-left:18px; padding-top:22px;
margin-top:10px;
}
#box_centro{
background-image:url(../img/box_centro.png);
width:653px;
height:4000;
margin:auto;
float:left;
overflow:auto;
padding-left:5px;
padding-right:5px;
}
#box_abajo{
background-image:url(../img/box_abajo.png);
width:663px;
height:6px;
margin:auto;
float:left;
}

索引.css

body{
margin-top:0;
margin:auto;
background-image:url(../img/bg.png);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
@font-face {
    font-family:Volter;
    src: url(./volter.ttf);
}

.menu{ display: inline;}
.menu{padding:8px 8px 14px 6px; color: #FFF; text-decoration: none; font-family:Volter; font-size:9px; text-shadow: 0px -1px #000000, 0px 0px #000000, 0px 0px #000000;}

#header{
background-image:url(../img/banner.png);
width:100%;
height:89px;
margin:auto;
}
#nav{
background-image:url(../img/nav.png);
width:97.6%;
height:20px;
margin:auto;
font-family:Volter;
color:#000000;
padding-top:10px;
padding-left:30px;
}
#footer{
background-image:url(../img/footer.png);
width:3336;
height:27px;
margin:auto;
font-family:Volter; font-size:9px; color:#FFFFFF; text-transform:uppercase;
text-shadow: 1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
padding-left:8px; padding-top:8px;
}

我为您创建了一个小提琴，以帮助其他人可视化问题。我已将图像 URL 更改为公开的内容。如果您觉得需要，请随时编辑此小提琴。埃里克·莫兰德。

http://jsfiddle.net/z7RhQ/

4

3 回答 3

1

我觉得问题出在您的#left div 与#header div 的第一个孩子重叠的事实。第一个孩子（我们称之为 TheDiv）是绝对定位的，顶部为 46 像素，左侧为 50 像素。它包含一个 600 像素宽、585 像素高且左边距为 510 像素的 div (#right)。因此，布局引擎将 TheDiv 的大小设置为 1110px (600 + 510) x 710px (585 + looooot of <br>)。

由于绝对定位，它与位于这个 1110 x 710 像素的巨大矩形内的任何东西重叠。

不幸的是，我相信您的布局存在严重缺陷。

于 2013-08-10T09:05:40.107 回答
1

您在该文本上有一个绝对定位的 div。

#header>div有这个CSS。

position:absolute; top:46px; left:50px

它应该是。

position:absolute; top:46px; left:560px

它有一个#right左边距为 510 像素的子 ( )。那应该是0。

演示

于 2013-08-10T09:06:49.697 回答
0

好吧，也许我已经找到了解决这个问题的方法。

我已经更改了 HTML 结构，所以我在图像上放置了一个链接（带有文本），它没有链接。

图像位于使用 css 添加的内容 div 的后面background-image:...;

这是 HTML 结构：

<div class="text">
   <a href="#">Text copy here</a>
</div>

和CSS：

.text {
border:1px solid black;
width:300px;
height:200px;
display:table;
background-image:url(http://www.starcoppe.it/images/grafica-immagine-b.jpg);
background-size:300px 200px;
}

.text a{
content:'';
display:table-cell;
margin:0 auto;
vertical-align:middle;
text-align:center;
text-decoration:none;
color:black;
}

无论如何观看演示。

于 2013-08-10T08:58:11.027 回答