Solved

URL for header

Posted on 2014-02-24
13
359 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 108

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
 
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 82

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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 82

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 51

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 108

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Both Easy and Powerful How easy is PHP? http://lmgtfy.com?q=how+easy+is+php (http://lmgtfy.com?q=how+easy+is+php)  Very easy.  It has been described as "a programming language even my grandmother can use." How powerful is PHP?  http://en.wikiped…
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
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 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 …

746 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now