如何以符合标准的方式链接标头？

发布于 2024-08-05 01:23:04 字数 831 浏览 3 评论 0原文

我有一个 HTML 块，如下所示：

<div id="header">
    <h1>title</h1>
    <h2>subtitle</h2>
</div>

我使用 CSS 技术来隐藏所有文本并将其替换为图像。但我想将整个块链接到主页。我无法将其包装在中，因为这不符合标准。那么我该怎么做呢？

我的解决方案；灵感来自城镇新事物

<div id="header">   
    <h1>title</h1>
    <h2>subtitle</h2>
    <a href="index.html">Home</a>
</div>

#header {
    text-indent: -9999px;
    width: 384px;
    height: 76px;
    background: transparent url(../images/header.png) no-repeat;
    margin: 10px;
    position: relative;
}

#header a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

原文

I have a block of HTML that looks like this:

<div id="header">
    <h1>title</h1>
    <h2>subtitle</h2>
</div>

I'm using a CSS technique to hide all that text and replace it with an image. But I want to link the whole block to the homepage. I can't wrap it in <a> because that wouldn't be standards-compliant. So how do I do it?

My solution; inspired by New in town

<div id="header">   
    <h1>title</h1>
    <h2>subtitle</h2>
    <a href="index.html">Home</a>
</div>

#header {
    text-indent: -9999px;
    width: 384px;
    height: 76px;
    background: transparent url(../images/header.png) no-repeat;
    margin: 10px;
    position: relative;
}

#header a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

平生欢 2024-08-12 01:23:04

将链接元素放在标题 div 之外，并使用绝对定位使其覆盖它们。还要添加 z 索引以确保链接接收用户输入。

<style>
    a.header
    {
        position: absolute;
        display: block;
        width: 100%;
        height: 100px;
        z-index: 1;
    }
</style>

<div id="header">
        <h1>title</h1>
        <h2>subtitle</h2>
</div>

<a href="homepage" class="header"></a>

Put a link element outside of the header divs and make it cover them by using the absolute positioning. Also add a z-index to make sure the link receives user input.

<style>
    a.header
    {
        position: absolute;
        display: block;
        width: 100%;
        height: 100px;
        z-index: 1;
    }
</style>

<div id="header">
        <h1>title</h1>
        <h2>subtitle</h2>
</div>

<a href="homepage" class="header"></a>

回复收藏 0 原文