Buttons must have discernible text: Element has no title attribute - html

I was creating a website and I find some problems - so one of this problem is that shown in the picture this the real problem is that button isn't an html element - I don't have those buttons in my html; it's from owl-carousel.
How do I get them or how can I fix the problem and thanks
To be clear I didn't try anything because i don't know how to get to them

Give the button a 'title' attribute and it will disappear. I think it is necessary for accessibility reasons, possibly to explain the purpose of a button. For example, if a button was supposed to logout a user, a screen reader could describe that to them clearly.

Related

Positioning and changing button appearance

I'm lost. I have no idea what I'm doing, so please forgive me if I write something stupid or don't understand your answers.
My goal is to have a modal box showing after clicking a button. That's the easy part and I accomplished that already, so yay me.
Basically, I'm using this code:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2
Now, what I don't know how to do:
1) How do I change the appearance of the button? Can I change it to an image?
The only thing I could do is place an image IN the button (looks weird), but not replacing it.
2) How do I change the position of the button?
I would like to have few buttons on the left side of the screen (not website but screen). So I would need to adjust them to be on the left side, and I would also need to change the height of all the buttons.
Now, I changed the appearance and the position of the button when trying something else (a slideout), so I know it's possible. But the codes are different and I don't know how to "merge" them. The lines that work in the first one don't work in the another.
And I have absolutely no idea in what language it is. I know that it uses this createElement thing to create this button, but I don't know how to change anything about it. I went through the whole w3school and many topics on this site but I don't know how to use this knowledge - so maybe you could help me out. Thank you!
If you want to use an image to open the modal, you should not use the button tag. Just attach your event to an img.
using the example code, replace:
<button id="myBtn">Open Modal</button>
with
<img id="myImg"></img>
and attch the click event to "myImg"
var img = document.getElementById("myImg");
img.onclick = function() {
modal.style.display = "block";
}
Repositioning is going to be a little more difficult to answer without seeing your full code. W3Schools has a good intro to CSS for beginners so I would start there.
Replace button to code similar to this id="myBtn" is important
<img id="myBtn" src="image url">
And check
https://www.w3schools.com/css/default.asp
Css is used to design the html elements
it have some property like
height, background-image , position , float , flex etc
which can help you to achieve your goals.

Link not working (but displaying as followable) img is the selector, shown in a list, with an on hover effect

As the title states I'm having a bit of trouble with an element on my 'work in progress' website.
I currently have an unordered list which provides square sections (with a different image and link in each) On a hover, the image changes opacity and the background color changes also.
The problem I'm facing is that while the cosmetic effects are all working fine, the link is not working on click. (However, the link does display in the bottom of my browser as 'followable' and right clicking allows for following the link through the options there.
The link for the element is http://www.techcom.co.nz/#myclients
and currently the only element with an attached link is the img for steam. (Column 2, Row 2)
Any help anyone can offer would be greatly appreciated.
Regards
Add the following code to your images...use javascript
example
<img src="" alt="" onclick='window.location="URL HERE"'>
please remember not to get the quote marks mixed because it will not work otherwise and looking at your source you have no URL the images should be going to apart from #
I don't understand exactly what's the problem.
The links on "my work" section are not working because the links to "#" (none) try to give them real url.

Non-clickable placeholder needed

I am building a site for a client that will eventually need button links and need to be clickable. For now, though, I would just like a placeholder anchor tag for future use, but I DON'T want it to be clickable. Is there a way to do this? Below, the 'small red button' is a clickable link, but doesn't go anywhere. I just don't want to confuse the client when they see the mockup and the link doesn't work.
What’s <strong>New</strong>
Thanks! And sorry if this is a newbie question.
EDIT: It worked like this, as suggested:
<a class="small-red-button">What’s <strong>New</strong></a>
Thanks everyone!
Take the href attribute out. It is what makes an anchor element into a link.
What’s <strong>New</strong>
it's still a clickable anchor but it as no efect (ie. does't change your adress to www.site.com/#)

How to Hide the Native Mouseover a Title Element?

I have designed a table whereby I want to display tooltips when hover over an item.
This is what I mean.
http://i.stack.imgur.com/snSMC.png
However, the problem I am now having is that the title displays twice! Once using the style I created and once as the default browser behavior with the <a title=""> element...
How can I solve this?
Edit: I have now attached an image, so you can see what I am talking about.
You can make your own and store the title attribute's data in there and then use the new attribute to display that data and yes remove the title attribute.
Ok so let's explain it, I see you have used the title property's text of those tabs hyperlinks to show that popup. I am suggesting you to make another property, it could be named anything like data-popup, then remove your title attribute and then change your script and make the use of the data-popup property.
Sorry for ""attribute"" :P.

Div ID uses properties from the one above it

The problem that i'm having is that I've specified some rollover buttons, and some div id's to control my image positions. however when i make a new div called Text and put some in, this also seems to trigger my rollover buttons? like its using code from the div above it, even though I've used the <div> tags:
http://jsfiddle.net/bq5MR/2/
Your example doesn't display the images.
You haven't closed your <a> tags which may result in the effect area being larger than you expect.
http://validator.w3.org/ - a free HTML validator which can help pinpoint invalid HTML and potential issues.
You're not closing your second 'a' tag. Try closing it and see if that fixes the problem.