[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

URL for header

Posted on 2014-02-24
13
Medium Priority
?
380 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
  • 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 111

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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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 84

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 84

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 2000 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 61

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 111

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
It’s a season to be thankful, and we’re thankful for users like you who engage on site, solve technology problems, and network with others in the industry. What tech are we most thankful for? Keep reading.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

611 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