Solved

URL for header

Posted on 2014-02-24
13
368 Views
Last Modified: 2014-02-24
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
0
Comment
Question by:DancingFighterG
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
  • +2
13 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39883706
Put the anchor link around the div and set the anchor style to display:block
0
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 39883745
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
 

Author Comment

by:DancingFighterG
ID: 39883757
Hmmm, seen the example. It works for me as well so I don't know why mines is not working
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Gary
ID: 39883771
You are using a background image, an anchor tag will have no height or width unless it contains something.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39883783
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
 

Author Comment

by:DancingFighterG
ID: 39883827
So make a blank.gif and make it the same size as the image?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39883854
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
 
LVL 58

Expert Comment

by:Gary
ID: 39883856
Then you may as well just use the original image as an image and not a background.
0
 

Author Comment

by:DancingFighterG
ID: 39883862
Ace, can you give me an example of what you wanted me to do?
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39883881
<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
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 39883937
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
 

Author Closing Comment

by:DancingFighterG
ID: 39883984
Thanks for help on this!!
0
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 39884012
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

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Checking https returns 301 21 58
form validation - make sure at least 1 checkbox is selected 18 66
Generate PDF from MySQL using PHP 3 54
php subtract from date 2 29
This article discusses four methods for overlaying images in a container on a web page
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question