Question

我正在使用CSS创建标题图形：

#header {
    height:125px;
    background:url(/Content/images/header_footer.jpg) -0 0 no-repeat;
}

然后：

<div id="header">
    <!-- navigation START -->
    <ul id="main_navigation">

有没有办法让图形（导航UL上方的空间）成为可点击的链接？

THX

Answer 1

当然：添加链接标记。 CSS非常适合向页面添加图形和可视元素，但如果您希望页面执行任何操作（例如，链接到某处），则必须在HTML中的某处表达。

您尝试执行的操作的常见解决方案是添加一个空的<a>标记，其样式的宽度和高度与您正在使用的图形相匹配。

Answer 2

我认为这不是一个好方法。如果您只想将图形作为链接放在单独的元素中：

CSS：

#header{
    height:125px;        
}

#headerImg{
    display:block;
    height:100px;
    background:url(/Content/images/header_footer.jpg) -0 0 no-repeat;
}

HTML：

<div id="header">
    <a href="http://www.stackoverflow.com"><span id="headerImg"></span></a>
    <ul id="main_navigation">

Answer 3

上述答案是正确的，因为您需要在HTML中使用锚标记，但这样做的方式完全取决于您要链接的图像。

我认为没有任何理由拥有空锚标签。那毫无意义。您很可能要么链接徽标或字标或网站标题或某些组合。这应该包含在您的HTML代码中，即使您打算将其替换为图像也是如此。

首先考虑的是您的标题图片本身是内容还是设计。在徽标的情况下，它有时是内容。在网站标题或文字标记的情况下，我经常说图像只是设计，文字是内容。

对于内容独有的图片：

<div id="header">
  <a href="/"><img src="logo.png" alt="My company"></a>
  <!-- navigation START -->
  <ul id="main_navigation">

对于替换内容的图片：

<div id="header">
  <h1><a href="/">My Company</a></h1>
  <!-- navigation START -->
  <ul id="main_navigation">

和风格：

#header h1 a { 
  display: block; 
  text-indent: -999em; 
  height: ??px;
  background-image: url(path/to/image.png);
}

在任何一种情况下，您都为用作链接的区域赋予了语义含义。我无法想象你想要一个毫无意义的链接的情况。

Answer 4

保持所有内容相同，在div中移动标记以使其有效。在标记中添加一个类。

然后是显示：块，然后是所需的高度和宽度。完成工作，验证完成。

Answer 5

呃，不会这样做（或者我误解了吗？）：

<a href="yourpage.html"><div id="header"></a>

您可能还想将border:none添加到您的#header

Answer 6

<a href="/whereever.php">
    <div id="header">
        <!-- navigation START -->
        <ul id="main_navigation">

这就是你想要的吗？

但我同意上述答案是一种更好的方法

Answer 7

只要这样做：

        <div style=" height: 100px; background: url('logo.png')" >
          <a href="/link" style="display: block; width: 100%; height: 100%" />
        </div>

如何在空DIV上创建链接？

7 个答案: