I would like to use an icon as a drobdown button on my navbar, but I am new to html and stuff, so I do not know where my snipplet fails:
<button type= "image" class="dropbtn" onclick="myFunction()">
<img src="someimage.png" title="Some title">
</button>
In your case the issue is most likely with the source of the image. Check the path (where your image is located) and link it correctly.
Example: src="../folder/folder/image.png"
You can also add the image as a background with CSS like this:
.dropbtn {
background: url("");
}
I think the problem is that you are using the button.
Try this:
<a href="" class="dropbtn" onclick="myFunction()">
<img src="someimage.png" title="Some title">
</a>
Related
And by not working, I don't mean that they don't load the page they're connected to. I mean the browser apparently doesn't even see them. Clicking does nothing, no change to the cursor on hover, right-clicking gives no options for "Open link" or "Open link in new tab". It's like they're not even there.
I've tried this in multiple browsers and on multiple devices. Same problem.
The links are written like so:
<div className={`${styles.listItem} ${styles.spotify}`}>
<a
className={styles.link}
href="https://open.spotify.com/artist/01MMcY0GSuDXOTUhyt4ung?si=YIgtCiw5SR26TejkA7dOcg&utm_source=copy-link&nd=1"
target="_blank"
/>
</div>
The only thing I could think to do was wrap the in the tags instead of the reverse. That only breaks it further. The icon won't even show up that way. I've tried inspecting the icons with dev tools, and the tags with the correct hrefs are there.
Here is the most recent version of the site. The problem is with the social media icons in the Contact section at the bottom of the page.
https://kmac-website-g8cm3chxl-a-shotwell.vercel.app/
And here is the code for the entire component:
import React from "react";
import styles from './Social.module.css'
const Social = () => {
return (
<div className={styles.main}>
<h1 className={styles.banner}>REACH OUT.</h1>
<div className={styles.socialContainer}>
<div className={styles.listContainer}>
<div className={`${styles.listItem} ${styles.spotify}`}>
<a
className={styles.link}
href="https://open.spotify.com/artist/01MMcY0GSuDXOTUhyt4ung?si=YIgtCiw5SR26TejkA7dOcg&utm_source=copy-link&nd=1"
target="_blank"
/>
</div>
<div className={`${styles.listItem} ${styles.facebook}`}>
<a
className={styles.link}
href="https://www.facebook.com/MixITMac"
target="_blank"
/>
</div>
<div className={`${styles.listItem} ${styles.instagram}`}>
<a
className={styles.link}
href="https://www.instagram.com/kmacxkmc/"
target="_blank"
/>
</div>
<div className={`${styles.listItem} ${styles.twitter}`}>
<a
className={styles.link}
href="https://twitter.com/KTHAMC1"
target="_blank"
/>
</div>
</div>
</div>
</div>
);
};
export default Social
Any help would be appreciated. Thanks.
I figured it out. The problem was that the links had no text, and the CSS was not set to take up 100% of the space of the containing div. So there was nothing to click on.
.link {
display: block;
height: 100%;
width: 100%;
}
This fixed the problem. I must have deleted the relevant CSS in a past version and wasn't aware of the problem until now. Thanks anyway, guys. Hope someone learns from my mistake.
I want to add image button inside an input button which has url.action method
<input type="button" class="btn btn-primary" value="View Chart" onclick="location.href='#Url.Action("Multigraph", "Home")'"/>
Actually i want to do this
On click of the image i will be able to go to the specific view
I have also looked into this link
Any help will be appreciated
You could style the input button with css.
.btn--graph {
width: 110px;
height: 93px;
background-image: url('http://i.stack.imgur.com/jCvdY.jpg');
}
<input type="button" class="btn btn-primary btn--graph" onclick="location.href='#Url.Action("Multigraph", "Home")'"/>
However if this button is actually a link to another webpage. It would semantically be more correct to use an anchor link.
<a href="#Url.Action("Multigraph", "Home")">
<img src="http://i.stack.imgur.com/jCvdY.jpg" alt="View Chart">
</a>
I have a button inside a link, how can I make it so that clicking on the button will not cause a redirect, but clicking outside the button will.
<a href="http://google.com" class="block">
<button>Don't redirect on click</button>
</a>
Is it possible to do with css only?
See here:
https://jsfiddle.net/d4mr7mm6/
This will provide what you are looking for. However, you will need to style the disabled button to accommodate the aesthetics. As said before in a previous post, this is not recommended.
<a href="http://google.com" class="block">
<button type="button" disabled>Click Me!</button>
</a>
https://jsfiddle.net/d4mr7mm6/1/
Just add a class inside you'r button with the following attributes :
<a href="http://google.com" class="block">
<button class="no-redirect">Don't redirect on click</button>
</a>
.no-redirect{
pointer-events: none;
cursor: default;
}
see : Disable link using css
Also, it's illegal to nest interactive element inside an anchor.
It isn't a good html structure, but if you want to stay with this structure I think this will work:
<a href="http://google.com" class="block" onclick="event.preventDefault();">
<button>Don't redirect on click</button>
</a>
Similar answers here:
preventDefault inside onclick attribute of a tag
preventDefault() on an <a> tag
I am trying to incorporate ZocialCSS buttons in my site but the color of the background changes automatically to white when I insert them instead of retaining the rest of the buttons default color.
<div className="form-group">
<div className="col-sm-offset-2 zocial facebook">
<button class="zocial facebook">
Sign in with Facebook
</button>
</div>
</div>
I works in JSFiddle: http://jsfiddle.net/Bc6Et/, but in my computer, the class part is ignored, so I just get a plain HTML button.
Here is a picture of what it looks like when I write the zocial facebook within the className part:
Everyone is saying I should use class instead of className, but it gets ignored wherever I substitute it. Does anyone know why?
Additional comments
I am using React.
I have a index.html file that calls a js file, containing a render function with the above HTML code in it.
ANSWER
Incluiding className within button worked perfectly:
<div className="form-group">
<div className="col-sm-offset-2">
<button className="zocial facebook">
Log in with Facebook
</button>
</div>
</div>
You need your CSS to affect the <button> within your <div>.
Also, it should be class instead of className
<div class="zocial facebook">
<button>Log in with Facebook</button>
</div>
CSS:
.zocial.facebook button {
background-color: #somecolor
}
Or simply put the same class to the button as well as the div:
<div class="zocial facebook">
<button class="zocial facebook">Log in with Facebook</button>
</div>
First you should use "class=" not "className="
If background color is still imported after correcting, you can do the following:
you can override css by adding element styles
<div class="zocial facebook" style="background: none">
or
<div class="zocial facebook" style="background-color: rgba(0, 0, 0, 0);">
you can also rewrite the css for .zocial facebook by targeting it in a style tag
<style>
.zocial facebook {background: none; background-color: rgba(0,0,0 0);}
</style>
ANSWER Incluiding className within button worked perfectly:
<div className="form-group">
<div className="col-sm-offset-2">
<button className="zocial facebook">
Log in with Facebook
</button>
</div>
</div>
It seems like a simple problem but whatever i did i couldn't solve it. I post a link about what i am talking. http://www.olmasigereken.com/demo/?view=listen&artist=ibrahim+ferrer&track=dos+gardenias
If you look at page codes you will see that order of items is red arrow artistname dash(-) trackname twitter and facebook links. However the output is not like that. I want to put everything on one line with correct order which is red image artistname dash trackname twitter and facebook links.
Note: When you click it if you don't see anything please refresh the page.
<li>
<img src="img/track_arrow.gif" alt="" />
<div class="singer">
<?php echo $a[artistname]?>
</div>
-
<div class="song">
<?php echo $a[trackname]?>
</div>
<div class="fav">
<a target="_blank" href="#" /><img src="img/twit.gif" alt="share on twitter" /></a>
<a target="_blank" href="#"> <img src="img/face.gif" alt="share on facebook" /> </a>
</div>
<br />
</li>
The floating left of links inside is causing conflict. If you remove the float: left as seen in the following screenshot, I think you will get what you want...
You need to set some css propertys like
.ikinciSol ul li {
widht: 375px;
}
.fav{
float: right;
}
Hope this may helpful to you.
try this to put each element between li balises and use the css attributewith ul element: list-style-type:none;