Question

我是html和css的新手，所以我有一个问题。

我正在搞乱一些东西，但在我的页面上放置一些图像后，我再也无法点击我的链接了。

HTML：

<!DOCTYPE html>
<html>
 <head>
   <link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <title>Rijschool Houben</title>
 </head>
 <body>
   <div id="header"></div>
    <div id="header-pic"><img src="image/test.png"></div>
    <p>
     <div id="nav-bar">
         <ul>
           <li>|<a href="http//www.google.nl">Home</a>|</li>
           <li><a href="contact">Info</a>|</li>
           <li><a href="portfolio">Prijzen</a>|</li>
           <li><a href="over ons">Acties</a>|</li>
           <li><a href="over ons">Machtiging</a>|</li>
           <li><a href="over ons">Theorie</a>|</li>
           <li><a href="over ons">Begeleid rijden</a>|</li>
           <li><a href="over ons">Bromfiets</a>|</li>
           <li><a href="over ons">Contact</a>|</li>
         </ul>
     </div>
   </p>
   <p>
     <div id="icon-main">
         <i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
         <i class="fa fa-paste" style="font-size:18px;"></i><a>raymond@rijschoolhouben.nl</a><br />
         <i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
     </div>
   </p>
   <p>
    <div id="img-1">
      <img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
    </div>
    <div id="img-2">
      <img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
    </div>
    <div id="img-3">
      <img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
    </div>
    <div id="img-4">
      <img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
    </div>
    <div id="img-5">
      <img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
    </div>
    <div id="img-6">
      <img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
    </div>
  </p>
 </body>
</html>

CSS：

div#header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: white;
}

div#header-pic{
  position: fixed;
  height: 50px;
  left: 500px;
}
div#nav-bar{
  position: fixed;
  padding-top: 130px;
  left: 0;
  width: 100%;
  white-space: nowrap;
}

div#nav-bar ul{
  list-style: none;
  text-align: center;
  background-color: #323232;
  padding: 10px 0;
}

div#nav-bar li{
  display: inline;
}

div#nav-bar li a{
  text-decoration: none;
  color: white;
  padding: 14px 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

div#icon-main{
  position: fixed;
  color: #323232;
  padding: 10px;
}

div#icon-main i{
  padding: 5px;
}

div#icon-main a{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

div#img-1 {
  position: fixed;
  left: 0;
  padding-top: 184px;
  width: 100%;
}

div#img-2 {
  position: fixed;
  padding-top: 184px;
  padding-left: 255px;
}

div#img-3 {
  position: fixed;
  padding-top: 184px;
  padding-left: 915px;
}

div#img-4 {
  position: fixed;
  padding-top: 184px;
  padding-left: 585px;
}

div#img-5{
  position: fixed;
  padding-top: 184px;
  padding-left: 1245px;
}

div#img-6 {
  position: fixed;
  padding-top: 184px;
  padding-left: 1575px;
}

我知道代码很糟糕，但我希望有人可以帮助我！这是fiddle。

-Ryan

Answer 1

我看了你的外部代码。请在Stack Overflow中将您的HTML和CSS添加到您的问题中。

从外部HTML中您可以获得以下代码：

<a>046-4524501</a>

哪个不能用作链接。

您有此代码

<a href="http//www.google.nl">Home</a>

这就像你期望的那样有效。

更改此行：

<a>046-4524501</a>

到

<a href="http//www.example.com">046-4524501</a>

href =＆＃34;你希望链接去哪里＆＃34;

所有关于＆＃34; href＆＃34;

的价值

Answer 2

您正在使用padding放置包含图像的div。这就是为什么你不能在菜单中使用链接。 Div区块覆盖您的链接。

尝试使用以下内容：

selector {
   position: absolute; /* or `fixed` like in your css; see below*/
   top: 100px; /* pixels from the top */
   left: 100px; /* pixels from the left */
   /* you can also use `bottom` and `right` */
}

例如：

div#img-3 { /* or just `#img-3`; see below */
  position: absolute;
  top: 184px;
  left: 915px;
}

检查此w3 schools article以获取有关定位的更多信息。

与问题无关：

如果您使用的是CSS的 id 选择器（＃），我建议您不要使用元素选择器（例如div）。所以而不是div#img-3尝试仅使用#img-3。
请尽量避免使用 id 选择器。您可以使用类规则，过了一段时间后，他们会很乐意为您节省大量工作。
如果您使用的是HTML5，请尝试使用semantic elements。
当您不需要时，请避免使用fixed位置（您的网页就是此类网页的示例）。
Paragraphs（p）不得以与div相同的方式使用。这可能会导致语义网站的坏习惯。
不是使用定位（position），而是尝试使用float或不同的display类型（例如inline-block）。只有在真正需要时才使用它。
了解HTML Responsive Web。

Answer 3

我确实注意到你正在做无响应的html，这意味着它不适合移动设备或在较小的浏览器窗口中看起来相同。

你的代码很乱，但你做得还不错。

首先将您放入标题div中标题的所有内容包裹起来
由于位置已固定
删除div之间的所有空<p></p>
在图片上使用浮点数，宽度百分比为100％，再加上容器/ div

如果你需要我，我可以看看我是否可以重做你所有的HTML和CSS，但想想你会更好地为自己试一试。

你可以随时查看那里的HTML5 boilerplate并使用它们来指导你如何构建好的代码。

Answer 4

我看到你正在尝试创建一行图像。而不是使用DIV系统为什么不使用更灵活（更灵敏）的列表结构？

然后你可以使用float:将它们排成一行，使用基本的CSS来为它们提供尺寸。图像将被指定为这些li元素的背景（更好的做法）。

像这样：http://codepen.io/Attrexx/pen/KVvwXP

放置一些图像后无法点击我的链接

4 个答案: