asked on

URL for header

Hello, I'm trying to make my header image a clickable link but right now the code we have in place is referencing a class called header in the css.

<div class="header">
<a style="padding-left: 0px;" target="_blank" class="bannerlinkpub" href="/"></a></div>

This code is referencing a class that does not exist in the CSS file

CSS File:

.header {
background: url("../images/cbgcombanner72.png") no-repeat scroll center top transparent;
height: 100px;
position: relative;
}

What do I need to change to make the header image clickable

Gary

Put the anchor link around the div and set the anchor style to display:block

Ray Paseur

This seems to work fine for me.
http://www.iconoun.com/demo/temp_dancingfighterg.php

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<style type="text/css">
.header {
    height: 100px;
    position: relative;
}
</style>

<title>HTML5 Page in UTF-8 Encoding</title>
</head>
<body>

<div class="header">
          <a style="padding-left: 0px;" target="_blank" class="bannerlinkpub" href="/"><img src="images/blue_button.png" /></a>
</div>

</body>
</html>

Open in new window

DancingFighterG

ASKER

Hmmm, seen the example. It works for me as well so I don't know why mines is not working

Gary

You are using a background image, an anchor tag will have no height or width unless it contains something.

Dave Baldwin

The classical way is to put a blank or invisible GIF of the correct size in the 'a' tag. Most of us have a 'blank.gif' of 1x1 or 2x2 pixels that we use for this.

// current code = no content and nothing to click on.
<a style="padding-left: 0px;" target="_blank" class="bannerlinkpub" href="/"></a>

// blank / invisible image as content to click on.  Change the size to the size of your div.
<a style="padding-left: 0px;" target="_blank" class="bannerlinkpub" href="/"><img src="blank.gif" width="197" height="107" border="0"></a>

Open in new window

DancingFighterG

ASKER

So make a blank.gif and make it the same size as the image?

Dave Baldwin

Yep. Done all the time. Then put the <img> tag in the <a><img></a>. You might make it slightly smaller if it causes layout issues.

Gary

Then you may as well just use the original image as an image and not a background.

DancingFighterG

ASKER

Ace, can you give me an example of what you wanted me to do?

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

Some ambiguities here

This code is referencing a class that does not exist in the CSS file

Followed by the CSS - that contains the header image?
Assuming that the header is defined as in the question i.e.

<div class="header">
          <a style="padding-left: 0px;" target="_blank" class="bannerlinkpub" href="/"></a>
</div>

Open in new window

Then you can modify your css to this (after the .header style add ...)

.header {
    background: url("../images/cbgcombanner72.png") no-repeat scroll center top transparent;
    height: 100px;
    position: relative;
}
.header a {
  display: block;
  width: 100%;
  height: 100px;
}

Open in new window

DancingFighterG

ASKER

Thanks for help on this!!

Ray Paseur

Did you not understand this?
https://www.experts-exchange.com/questions/28373130/URL-for-header.html?anchorAnswerId=39883745#a39883745

Or was there something wrong with it?