How to create a link on an empty DIV? - css

Question

I'm using CSS to create a header graphic:
#header {
height:125px;
background:url(/Content/images/header_footer.jpg) -0 0 no-repeat;
}
then:
<div id="header">
<!-- navigation START -->
<ul id="main_navigation">
Is there a way to make the graphic (space above the nav UL) into a clickable link?
thx

Answer 1

I don't think this is a good approach. If you want only the graphic to be a link put in a separate element:
CSS :
#header{
height:125px;
}
#headerImg{
display:block;
height:100px;
background:url(/Content/images/header_footer.jpg) -0 0 no-repeat;
}
HTML :
<div id="header">
<span id="headerImg"></span>
<ul id="main_navigation">

Answer 2

Certainly: add a link tag. CSS is great at adding graphics and visual elements to pages, but if you want the page to do anything (e.g., to link somewhere) that has to be expressed somewhere in the HTML.
A common solution to what you're trying to do is to add an empty <a> tag, styled with a width and height that match the graphic you're using.

Answer 3

The above answers are correct in that you need an anchor tag in your HTML, but how that plays out depends entirely on what the image is that you are linking.
I don't see any reason to ever have an empty anchor tag. That's meaningless. Most likely you are either linking a logo or wordmark or site title or some combination. That should go in your HTML code, even if you plan to replace it with an image.
The first consideration is whether your header image itself is content or design. In the case of logos, it sometimes is content. In the case of site titles or wordmarks I would more often say the image is simply design, and the text is content.
For an image that is content in it's own right:
<div id="header">
<img src="logo.png" alt="My company">
<!-- navigation START -->
<ul id="main_navigation">
For an image that is replacing content:
<div id="header">
<h1>My Company</h1>
<!-- navigation START -->
<ul id="main_navigation">
and style:
#header h1 a {
display: block;
text-indent: -999em;
height: ??px;
background-image: url(path/to/image.png);
}
In either case, you have given semantic meaning to the area used as a link. I can't quite imagine a situation where you would want a meaningless link.

Answer 4

Keep everything the same, move the tags within the div so it validates. Add a class to the tag.
Class then is display:block and then height and width required. Job done, validating complete.

Answer 5

Erm, wouldn't this do it (or have I misunderstood?):
<div id="header">
You'll probably also want to add border:none to your #header

Answer 6

<a href="/whereever.php">
<div id="header">
<!-- navigation START -->
<ul id="main_navigation">
Is that what you wanted?
But I agree that the above answer is a better method

Answer 7

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

Answer 8

You can style your hyperlink attribute directly:
Example:
<a href="<your-link>" target="_blank" style="content: ''; width: 10px; height: 10px; background-image: url('<your-image-path>'); background-repeat: no-repeat; background-size: 10px 10px; display: flex">