Project link:
http://50.87.144.37/~projtest/team/design/AHG/brochure/#28
The dark grey stripe at the bottom is an anchor tag, I can't seem to figure as to why it is not clickable. The css is very simple. The parent class is posRel and the anchor tag is efgLink3 and 'bg-img' is the image over which a tag is arriving.
Html:
<div class="container posRel">
<a class="efgLink3" target="_blank" href="http://www.efginternational.com/"></a>
<img class="bg-img" src="pages/preview/cover-back.jpg" style="height: 587px; width: 415px;">
<img class="bg-img zoom-large" src="pages/preview/cover-zoomed-back.jpg" style="height: 587px; width: 415px;">
</div>
Css:
.posRel{
min-height: 100%;
position: relative;
}
.efgLink3 {
background: none repeat scroll 0 0 #333;
display: block;
height: 70px;
left: 0;
position: absolute;
top: 79%;
width: 100%;
z-index: 11;
}
.bg-img {
left: 0;
margin-top: 10px;
max-width: 100% !important;
position: absolute;
top: 0;
z-index: 10;
}
Problem is in your HTML:
<a href="http://www.efginternational.com/" target="_blank" class="efgLink3"/>
Your anchor is empty, so there's nothing to click on.
<img src="pages/preview/cover-back.jpg" class="bg-img"/>
<img src="pages/preview/cover-zoomed-back.jpg" class="bg-img zoom-large"/>
Presumably one or both of these belongs inside the anchor.
Found the issue, 'pointer-events' was set to none, thanks to all for looking up.
Related
Im trying to put a link button to amazon on a picture but not only is it not working its making my website all wonky
.review-page-lander > img {
width: 100%;
max-width: 1169px;
margin: 0 auto;
}
img.buy-from-button{
height: 35px;
width: 150px;
top: 35px;
float:left;
position: relative;
z-index: 1;
}
<div class="lander-image">
<a href="#">
<img class="buy-from-button" src="http://oathtohealth.com/wp-content/uploads/2016/05/Amazon.png" alt="buy at amazon">
</a>
<img src="amazon-item.jpg">
</div>
As i mentioned in my comment, difficult to answer without more info
First off, using .review-page-lander > img wont work as the > means immediate child, http://www.w3schools.com/cssref/css_selectors.asp
To find what else not working, use F12+inspect in chrome (or similar in other browsers) to find what css being applied
https://developers.google.com/web/tools/chrome-devtools/
https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
I would suggest to keep your product image above your buy button and make buy button float right relatively with bottom: 40px;
.lander-image>img {
width: 100%;
max-width: 1169px;
margin: 0 auto;
}
img.buy-from-button {
height: 35px;
width: 150px;
float: right;
position: relative;
z-index: 1;
bottom: 40px;
}
<div class="lander-image">
<img src="http://placehold.it/250x300">
<a href="#">
<img class="buy-from-button" src="http://oathtohealth.com/wp-content/uploads/2016/05/Amazon.png" alt="buy at amazon">
</a>
</div>
I've the following problem
If I put a clickable image in my header, you can't click on it. (or common link, both don't work)
When I try re-positioning the image, outside the header - it works.
But when it's still in the header you can't click on it.
header {
position: relative;
width: 100%;
height: 80px;
background-color: #454d58;
margin: 0 auto 0 auto;
z-index: -10;
min-width: 100%;
}
li {
position: absolute;
top: 25px;
}
<body>
<header>
<ul>
<li>
<a href="#">
LINK
</a>
</li>
</ul>
</header>
</body>
you a have a negative z-index on your header, change it to a positive one or remove it.
negative z-index gets lower in the stacked context order, so you wont be able to click on it
header {
position: relative;
width: 100%;
height: 80px;
background-color: #454d58;
margin: 0 auto;
z-index: 1; /*whatever you need - want here - or just remove it */
min-width: 100%;
}
li {
position: absolute;
top: 25px;
}
<body>
<header>
<ul>
<li>
<a href="#">
LINK
</a>
</li>
</ul>
</header>
</body>
Not sure why you are saying that:
z-index: -10;
Why you need z-index there? You are just putting the link behind the header that's why you can't click it. Try changing it to 1 or remove it.
By default all the elements of the html are set to z-index: 0;.
So, the body of the HTML is also at the z-index:0;.
And when you are setting z-index:-10 it is putting the header behind the body itself. and hence it is not clickable including its child elements i.e link
Change z-index: -10; to z-index: 0;
header {
position: relative;
width: 100%;
height: 80px;
background-color: #454d58;
margin: 0 auto 0 auto;
z-index: 0;
min-width: 100%;
}
li {
position: absolute;
top: 25px;
}
<body>
<header>
<ul>
<li>
<a href="#">
LINK
</a>
</li>
</ul>
</header>
</body>
I have a slideshow on my main homepage, and on the bottom of it, it's showing text.
I'd like the text, when hovered over, to change color to red, and to be able to be clicked, redirecting to a given link.
My code is as follows:
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 450px; overflow: hidden;">
<div data-p="218.75">
<img data-u="image" src="images/slides/slide1.jpg" />
<div style="position:absolute;top:370px;left:379px;width:500px;height:70px;z-index:0;font-family:Comic Sans MS;font-size:72px;color:#000000;line-height:70px;text-align:center;">Rationale</div>
</div>
Any help will be greatly appreciated!
You can basically wrap any HTML element in the <a> tag. It then becomes clickable, and you can style it accordingly.
Alternatively, you can use the following CSS to make an element look like a link:
#myElement:hover {
cursor:pointer;
}
You can then handle the on click with javascript. I hope that helps!
I have this picture:
and I want this picture:
to be over the picture so I get this "dot-effect".
I also have to repeat the picture so it fits the other one. I managed to have them both in the same place but never to have the second one repeated over the first one.
Please help. I googled this for the past 2 days and couldn't figure it out.
You can use multiple background images
.avatar {
width: 180px;
height: 180px;
background-image: url(http://i.stack.imgur.com/G9pqm.png), url(http://i.stack.imgur.com/DSToa.png);
background-repeat: repeat, none;
}
<div class="avatar"></div>
or alternatively, an actual image in the HTML and a pseudo-element overlay.
.avatar {
width: 180px;
height: 180px;
position: relative;
}
.avatar::after {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(http://i.stack.imgur.com/G9pqm.png) repeat;
}
<div class="avatar">
<img src="http://i.stack.imgur.com/DSToa.png" alt="" />
</div>
Use first image as main background, than use position: absolute and background image on another element to place doted image over first one. Why background image for overlay? It's because you can set background-repeat attribute for background (default to repeat x and y).
.wrapper {
float: left;
position: relative;
}
.overlay {
background: url("http://i.stack.imgur.com/G9pqm.png") repeat;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
<div class="wrapper">
<img src="http://i.stack.imgur.com/DSToa.png" />
<div class="overlay"></div>
</div>
Not sure how to word the title, I am trying to make a image a link, the image has the hover "attribute" not sure how to word the question..
Below is my code:
HTML
<div style="position: relative; left: 0; top: 0; bottom: 100px;">
<img src="pic\980_pcb.jpg" style="width:908.2px;height:398.05px position: relative; top: 0; left: 0;" />
<span class="imgswap">
<a id="imgswap" href="#GPU"></a>
</span>
</div>
CSS
span.imgswap {
background - image: url("pic/gpu_replace.jpg") no - repeat;
height: 167 px;
width: 163 px;
position: absolute;
top: 132.5 px;
left: 286.5 px;
background - repeat: no - repeat;
display: block;
}
span.imgswap: hover {
background: url("pic/gpu_replace.jpg") no - repeat;
}
Simply put your span.imgswap inside <a> tags (instead of vice-versa). So the HTML should look like this:
<a id="imgswap" href="#GPU"><span class="imgswap"></span></a>
Just warp your tag around the tag and that image will become a link.
Example
http://codepen.io/anon/pen/vENbRM
<a class="link" href="#">
<img class="textimg" src="http://blackicemedia.com/presentations/2013-02-hires/img/awesome_tiger.svg" />
</a>
img.textimg {
height: 175px;
width: 175px;
}
img.textimg:hover {
background: black;
}