Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

URL for header

Posted on 2014-02-24
13
Medium Priority
?
377 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 60

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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

877 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