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
DancingFighterGAsked:
Who is Participating?
 
GaryCommented:
<a style="padding-left: 0px;" target="_blank" class="bannerlinkpub" href="/">
<div class="header"></div>
</a>


Add this css
.bannerlinkpub {
display:block
}


You probably don't want this in your link
target="_blank"
...as it will open a new window
0
 
GaryCommented:
Put the anchor link around the div and set the anchor style to display:block
0
 
Ray PaseurCommented:
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

0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
DancingFighterGAuthor Commented:
Hmmm, seen the example. It works for me as well so I don't know why mines is not working
0
 
GaryCommented:
You are using a background image, an anchor tag will have no height or width unless it contains something.
0
 
Dave BaldwinFixer of ProblemsCommented:
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

0
 
DancingFighterGAuthor Commented:
So make a blank.gif and make it the same size as the image?
0
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
GaryCommented:
Then you may as well just use the original image as an image and not a background.
0
 
DancingFighterGAuthor Commented:
Ace, can you give me an example of what you wanted me to do?
0
 
Julian HansenCommented:
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

0
 
DancingFighterGAuthor Commented:
Thanks for help on this!!
0
 
Ray PaseurCommented:
Did you not understand this?
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_28373130.html#a39883745

Or was there something wrong with it?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.