How to create a link on an empty DIV?

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

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 2

Erm, wouldn't this do it (or have I misunderstood?):

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

You'll probably also want to add border:none to your #header

Answer 3

I don't think this is a good approach. If you want only the graphic to be a link put in a separate element:

#header {
    height:125px;

}

#headerImg
{
    display:block;
    height:100px;
    background:url(/Content/images/header_footer.jpg) -0 0 no-repeat;
}
<div id="header">
    <a href="http://www.stackoverflow.com"&gt;&lt;span id="headerImg"></span></a>
    <ul id="main_navigation">

Answer 4

<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 5

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">
  <a href="/"><img src="logo.png" alt="My company"></a>
  <!-- navigation START -->
  <ul id="main_navigation">

For an image that is replacing content:

<div id="header">
  <h1><a href="/">My Company</a></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.