Well, I created this:
and the buttons don’t work! the images aren’t inside the buttons…
Please post your actual code instead of a screenshot. Thanks
Welcome to FCC forum. Please post your code here, with three (```)
back ticks in a separate line before and after your code.
@12345667
Please clarify the issue. Buttons not working and images not loading are two unrelated issues.
If this is just about the images not loading, then your path to the images are most likely not correct. But we would need to know your folder/file structure.
The images are loading, but the buttons aren’t working.
<input class="search-bar" type="text" placeholder="Search">
<button class="search-button">
<img src="PHOTOS/icons/search.PNG">
</button>
<button class="microphone-button">
<img src="PHOTOS/icons/microphone.PNG">
</button>
</div>```
Not working how? What is it you expect the buttons to do?
I don’t see how this is related to the buttons “not working”.
Images are placed by default using static position and will be inside their parent container. If you have changed that behavior, that would be a CSS problem, not HTML. So we need to see your CSS.
I mean, when I just erase the image instructions, I can’t see any button. (even though, the image was supposed to be embedded in the button)
Here’s the css code:
height: 40px;
width: 60px;
}
.microphone-button{
height: 40px;
width: 40px;
}
.search-button,
.microphone-button {
padding: 5px; /* Adjust padding as needed */
border: none;
background: none;
}
.search-button img,
.microphone-button img {
width: 20px; /* Adjust image size as needed */
height: 20px; /* Adjust image size as needed */
}
Welcome to the forum @12345667
It looks like part of the css is missing. Can you please post the full css code?
Happy coding
okay, here’s the full relevant css code:
.header {
height: 55px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-section {
align-items: center;
display: flex;
}
.search-button {
height: 40px;
width: 60px;
}
.microphone-button{
height: 40px;
width: 40px;
}
.search-button,
.microphone-button {
padding: 5px; /* Adjust padding as needed */
border: none;
background: none;
}
.search-button img,
.microphone-button img {
width: 20px; /* Adjust image size as needed */
height: 20px; /* Adjust image size as needed */
}
Hi @12345667
Here is a part of the css for the buttons.
Without any image
or text embedded in the button, there will not be anything to display for the element. Try setting a border, instead of the current setting of none.
Also, the width and height for the img elements are 20px.
Maybe use a larger size while you trouble shoot the issue.
Happy coding
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.