I'm having an issue making my image clickable. It is a cart style photo with a little number bubble that tells you how many items you have in the cart. The div is clickable but the photo itself is not.
Here is my code:
<a routerLink="/cart">
<img class="cart" src="../../../assets/canoe detail.png" alt="Canoe Cart">
<div *ngIf="quantity" class="quantity">{{quantity}}</div>
</a>
I have also tried adding a click event to the image with a function just logs ("clicking") and I have also tried adding "routerLink='/cart'" to the image tag as well, but neither of these worked.
What am I missing?
Thank you in advance!!
Your code seems fine, should work
<a class="brand-logo" routerLink="/login">
<img src="assets/img/logo-svg.svg" />
</a>
Try removing the other div and check, but should work even with it. This works for me
Add this CSS for a
a{display:inline-block}
Solved! Even though it was visible, it was behind the navbar so changing the z-index fixed it.
a {
z-index: 5;
}
Related
My buttons structure is as stranded as it can be:
<a class="button">click me</a>
They work just fine on click.
But, on touch devices, you can get them to work by tapping at the areas around the text inside the button. When you tab in the center "click me" it just does not work.
It is baffling me and I have not been able to find out why.
You can try it live by going to https://plutio.com from your touch device and try to tab on the Get Started button.
It won't work unless you tab around the button text.
Things I tried:
line height
user-select
box-sizing
appearance
pointer-events to none
I got it please use below code:
.button:after, .button:before{
display:none
}
I am trying to make an input file with an image. I've got a working solution with div inside the blocked label. File uploads and a rounded preview comes. But this is solved via background. Looks like responsive and I am happy.
But validator told me that it's not proper to put div inside a label tag.
So i tried to put an image tag instead of div..
and it doesn't work properly.
http://jsfiddle.net/dkweb/mtsy33k1/9/
<div class="photo_container">
<label for="file_photo_id">
<img class="preview" src="http://javascript.ru/img/ws_2.png">
<!-- <img class="preview" src="https://im0-tub-ru.yandex.net/i?id=3b1992e3e1e8d68d24c678ffc749d2f5&n=33&h=170">
and this doesnt work -->
</label>
<input type="file" name="file_photo" id="file_photo_id" />
</div>
- uncomment the sec img and you'll see.
It depends on resolution of the image. I can't hold it a circled always.
Will you advise on this issue?
They grey area must stay not available for clicking - just a circle with an image inside.
Thanks in advance.
I'm pretty new and still very wet behind the ears when it comes to css styling.
I have a class already defined .logo but I would like to create a second class "just for the logo image and background" from the Header template below"
<div id="container">
<a name="top" id="top"></a>
<div id="header">
**<div class="logo"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></div>**
<div class="menu">
<ul>
<li><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</li>
<li><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</li>
<li><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</li>
</ul>
</div>
I'm not sure how to take just the logo part and create a new class from the bolded part of the header code highlighted above. Thanks for any suggestions guys.
edit for update
Thanks for the responses so far guys. I think the problem is I don't really know how to describe the problem sufficiently.
Allow me to try and get a grip on explaining my actual situation.
I have two Divs which both have a drop shadow, by using padding I have allowed (deliberatly) them to overlap each other which looks great as it allow the image in one of the divs to slightly overlap the other div giving a 3d effect.
That works great so far except that due to both divs having a drop shadow, where the shadow overlaps there is a darker portion.
I've highlighted in the image the divs (which have css attached to them) and the darker portion where the drop shadows overlap.
I've tried using overflow: hidden but I'm not sure where I'm going with it if I'm perfectly honest.
image here
Thanks again guys, and I hope this makes a bit more sense... I think most of the time I'm confusing myself :)
As far as I understood you, you could just reference the image directly with this selector in your css:
.logo img
If that's not what you want please add more details to your question.
You can actually select every kind of HTML-Element you want just by calling it by its tag. e.g. .logo a or .menu ul li
I am having a problem with some links I have made in Dreamweaver; I have made these links by putting the web address onto the link field in Dreamweaver.
But when I preview in browser the whole image does not turn into a link, only the bottom part of it does. So when I hover my mouse over the image, only at the very bottom of the image it turns into a hand.
The code for the page is here http://jsfiddle.net/BGpu8/ and the links with this problem are at the bottom of the page - Facebook, Twitter etc.
Any ideas on why this is happening would be much appreciated! Thank you in advance!
It should really be marked up like this:
<div id="fb"> <p><a href="http://www.facebook.com/group.php?gid=232587661141"><img src="graphics/social graphics/facebook.gif" width="31" height="31" alt="Facebook Logo" />
Find Us <br />on Facebook</a></p></div>
Put inline elements like anchors and images inside block level elements like paragraphs. In the DreamWeaver generated code it had the anchor in there twice and other wonkiness. If you have time you should take some of the other posters advice and try to learn by hand.
please check if you missed to provide "display:block;" css property to your anchor tag.
try to code like this,
<div class="fbIcon"> </div>
and corresponding CSS as:
.fbIcon{
background:url(ur image url);
height:xx px;
width: xx px;
}
.fbIcon a{
display:block;
}
Now it shud work!
I want to have an anchor with a specific height and width.
There is no text on it since it's meant to be put in front of a certain area of the page.
Here is the code:
It's working fine in everything but IE6 and IE7. If I add a border, I can see that the anchor has the correct size, but if I try to click it, only the top part will be clickable.
I don't know why it's doing this. I tried adding a onclick even with an alert, and the same thing, it's impossible to click on the bottom part of the anchor.
It's really weird, did this happen to anyone before? Anything will help.
another way of handling this issue is a little "hack/workaround", when the block element got a background-color everything is fine, as you aspect it. make use of something like this:
a {
..
background-color: white;
opacity: 0;
filter: alpha(opacity=0);
..
}
In previous versions of IE, its not possible to register the onclick event on block level elements themselves. Instead, IE applies the onclick to the text or inline elements inside the block.
I've found that putting a transparent image inside the anchor that is the same size as the full anchor will register the onclick.
<a href="/" style="width:370px;height:80px;display:block;position:absolute;">
<img src="Transparent.gif" style="width: 370px; height: 80px"/>
</a>
Since this link is absolutely positioned it sounds to me like there is another block partially overlapping it thus hiding half of it from the click event.
Any image placed in the anchor background, and then positioned out of sight will fix your problem for IE6 and IE7. You need not have an image the full size of the anchor as suggested.
This means you can use a sprite or other image that is already being loaded on the page to save another call to your server.
<a style="position:absolute; z-index:2; background:url(/images/your-sprite.gif) -9999px no-repeat;" href="#">Your anchor</a>
it could be that this is a z-index issue with another div/span/etc.