I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>
Related
So basically I have zero ability to use CSS or javascript because it's blocked by the site I'm trying to work on from a higher administration level offsite with permissions I can't be granted because we outsource our site's main development so I have limited editing options (idk if anyone has ever worked on a site by dealer.com without working for them but it's... limiting). I can only use a bit of bootstrap and HTML.
I want to make the button have an onmouseover and onmouseout effect but thus far have had zero luck.
Normally I'd do this in CSS and it would be fine but basically any script gets a big angry, "nope you can't, security risk!!! Red flag!!! Abort!!" popup when you save.
<a class="btn btn-default" style="color:white; background-color: var(--color-electric-vivid);" href="/ev-enquiry.htm" target="_blank">Enquire Here</a> I'm relegated to somehow getting a hover effect into this. My options are limited and I'm at a loss.
Do I just give up or does anyone have some sort of brilliant recommendation that will somehow work?
picture of button I'm trying to make pretty
Edit for clarity: I do not have the ability to go into the main head or body of the HTML. I can change the contents of a div from a wordpress style textbox and it does not let me use javascript or CSS. I don't love it but that's my option so I'm looking for a workaround in HTML as that is genuinely the only thing I can use in this case.
It is a very little JS but you can try to do this:
<button href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">Button</button>
This question already has an answer here:
Why are buttons discouraged from navigation?
(1 answer)
Closed last year.
I've been reading up on web accessibility and read that anchor tags should only be used when the user will be taken to another URL without JavaScript. But buttons should be used whenever some other behavior should happen, such as opening a modal.
So I'm wondering if it's okay or expected to have both buttons and anchors in a nav. Something like this:
<nav>
Home Page
About Page
<button>Sign Up</button>
</nav>
Say in this situation the signup button launches a modal or does some other behavior that doesn't take the user to a different URL. Is it okay to have both in the nav? I'm not concerned about styling, I'll make these look consistent, but I'm wondering what's the most correct way to handle something like this?
From an accessibility perspective, using both links and buttons is the semantically correct way to go. The links take you to another page (or somewhere else on the current page) and buttons perform an action. A screen reader user will understand when they hear "link" or "button" in the same <nav> that different actions will happen.
As mentioned in the previous comments, yes, it is completely fine to use both inside your navigation.
If you really want to you can use <a> elements for all, but for the buttons you would include the role="button" attribute which is semantically equivalent to using <button>.
<nav>
Home Page
About Page
<a role="button">Sign Up</a>
</nav>
Yes it's totally fine to use either buttons, anchors or even div inside the navbar however you want you can do it. You just need to be comfortable using css and styling which you say you are. Then you should have no problem. Does that answer your question?
Any flow content elements are allowed in a nav tag, and that includes buttons.
I see these lines of code in some professional developer's project:
<a href="###">
...
</a>
What is the use of three # instead of one?
That's usually written when you want your anchor tag to not change the href. For instance if you want to attach an event on it later on.
It doesn't matter how many # you are using. The href='#' will make the page jump to the top of the page if clicked.
My preferred way is doing <a href="javascript:void(0);". That way the click does absolutely nothing, instead of jumping the page up.
The first thing about "anchor tags"...
This use of ### in particular is to create a links that don't go anywhere, and to do that the href attribute must have a value. Please read the href W3C spec page for more info about that.
Browsers render default styles for elements and will change the default style of an anchor tag that doesn't have the href property. Instead, it will be considered like regular text. It even changes the browser's behavior with regard to the element. The status bar (bottom of the screen) will not be displayed when hovering an anchor without the href property. It is most optimal, then, to use a placeholder href value on an anchor to ensure it is treated as a hyperlink.
I've often seen <a href="#">, and <a href="##"> , a hashtag - # within a hyperlink specifies an html element id to which the window should be scrolled.
href="#some_id" would scroll to an element on the current page such as <div id="some_id">.
href="//example.com/#some_id" would go to example.com and scroll to the id on that page.
href="#" doesn't specify an id name, but does have a corresponding location - the top of the page. Clicking an anchor with href="#" will move the scroll position to the top.
So, when you use <a href="###"> this create a links but it doesn't go anywhere. You can use it from "##","###" and more of hashtag to create a links like a "Hyperlinks" but they take you nowhere.
My Conclusion:
So, what is the use of it?
You use it when you need a hyperlink that doesn't go anywhere. It's just to tell the browsers to change the style to an anchor tag.
Check this JSFiddle demo
As Bhuiyan's answer said, it is a variation on the href="#" trick...
Goal
So, to explain that trick. The trick is to work around the fact that Anchor tags are only rendered as links if they have a target to link to (see this example). The goal is to create a link that looks like a link, but doesn't actually go anywhere.
How it works
The href="#" idiom is taking advantage of the fact that anchors can specify a specific element as a target by using the href="#{other element identifier}]" notation. When you do this the browser will not redirect or reload the page, but instead scroll to that element. So when you specify href="#" you are essentially telling the browser that this is a link, but since there is no valid target element please don't do anything when it is clicked.
Note: It would work just as effectively to say href="#mybogusid" but then you would see #mybogusid appended to the url. Gross.
TL;DR of it all: <a href="###"> is just a way to make the browser render the anchor tag like a link, but not navigate anywhere on click.
I think this is same as Go to link that person just used three "###" instead of one "#". we can use more # if we want.
It was very useful when i had button and js click event. With '#' it scrolled to top every time i pressed the button, but with '###' it stayed in place as needed!
Suppose I have a link <a href="#" title="Hello, World!">. I want to style parts of the title tooltip attribute. For example, I want to have the Hello part be bold. I'm not trying to style both Hello and World, just the Hello part.
I have tried putting HTML tags inside of the attribute, but they appear to have no effect (if I enter <a href="#" title="<b>Hello,</b> World!">, the title text prints out <b>Hello,</b> World!, which is not what I want. I have made a JSFiddle demo of what happens.
Is it possible to do this using pure CSS?
Also, I have seen this, but it's not what I wanted. It's close, however.
You can't put HTML in the attribute title, it's not a valid code but I beleive you can use hint.css library: http://kushagragour.in/lab/hint/. Completely css-based and easy-to-use:
Your link
I think the only way for you to achieve what you want is to make a div with the style you want, hide it, and on hover - show it.
Probably a silly questions, but I'd like to have a hyperlink withing another hyperlink, much like a
<a href="#somewhere">
This is the hyperlink,
and this is the other one
</a>
Aside from that it's not compliant and all, is there a way of doing this?
*Edit: the outer hyperlink is used by a carousel, and won't take the browser somewhere.
Lets think about this. What is the browser suppose to do?
Go to the first hyperlink, or the second one, or both?
If you want the first one, then the second hyperlink is not required.
If you want the second one, then close the first one before and reopen if necessary after closing the second.
If both then write some Javascript to get it to open a new window. for the second hyperlink before loading the first hyperlink.
Anchor tags, just like inline or block level elements, layer up on top of each other when nested such that attributes can be set for different subsets of information or visual space within them. This may be useful if you have a large anchor element functioning as a large button, but want to insert a link to a different location within that button.
Have you tried implementing it? See this jsFiddle proving that nested inline elements work, both with span and anchor tags. Note that the nested element overrides the clickable area subset within the parent element, just as you'd expect it to if you were listening for a hover event.
Disclaimer: While technically this can be done, that doesn't mean that it should be done. Nesting links in particular can result in user confusion and be misleading about what content is pointing to what locations.
You can't nest it, but you can do something I did below..
<a href="somewhere">
This is the hyperlink,</a>
and this is the other one
May be you solution:
<form action="http://myhomepage.ru/" method="get">
second link within
<button>first link</button>
</form>