This question already has answers here:
Center a div in CSS [closed]
(10 answers)
Closed 4 years ago.
Hi everyone I'm a beginner in HTML, and I need to know how to center an URL inside my web page, for example :
Click Here to Open Google
I tried to use the tag, and the STYLE attribute but it doesn't work.
Can some one help me to make it please ?
You could try in your css file:
a {display:block;text-align:center}
Hope this helps, personally I would add a class name to your a link such as google-link, otherwise this a style will effect all future anchor links :)
So in html file:
Click here to open google
Then in css file:
.google-link {display:block;text-align:center}
In addition your href needs to include a = after it: href="www.google.com"
i think the reason is because your DOM only covers the width of your text link which is "Click Here to Open Google". so centering it with the "center" tag will not give what you want.
Please try this:
<div style='width:100%; text-align:center;'> Click Here to Open Google
Explanation is, you created a "div" element and gave it a 100% width, then specify that anything inside it will be center aligned.
This will solve your problem. Kindly check the codepen link for demo:
https://codepen.io/deepesh316/pen/jQWRYy
For more info about css display block, you can refer w3 schools link:
https://www.w3schools.com/cssref/pr_class_display.asp
You can simply try this solution.
In above, your href should look like below code and then you can use style which will center your link.
<a href:"http://www.google.com" style="text-align:center"> Click Here to Open Google <\a>
Or else you can try
<div text-align="center">your link code here( )......</div>
Related
I want to make a button with the discord logo but when I try to add the anchor tag the text goes down a bit and it becomes uncentered.
Is there a way to fix this or a different way I should be approaching this?
HTML Code:
<li class="nav__btn">
Join our Discord
</li>
Try reading this to see if it could help out.
https://coder-coder.com/how-to-center-button-with-html-css/
I would assume it would work the same way with an image button. Also try experimenting with div tags.
You have mistake in your code here: "button" >< img class.
Better use button tag for this, see example button with icon.
Also, provide some screenshot what exactly do you need.
This question already has answers here:
CSS After Element to insert mailto link?
(5 answers)
Closed 8 years ago.
META: This document was marked as a duplicate, and I was suggested to create another post instead, which is what I did here: How to get hyperlinks inside a "pop-up" term reference on mouse-over, and seperate the HTML term from the "pop-up" reference content. I also, then, realized it was a good idea to formulate the goal of the application better.
As a reflection: I think it can be difficult, especially for unexperienced users, to choose a good trade-off between specificity on the 1 hand, and goal-orientation on the other. My apologies for any trouble. Many thanks for the help.
---
Is it possible to have a hyperlink inside the CSS-syntax {content:"..."}? How would one go about creating such a link?
As an example, here is a piece of code I created, to have a term decription on mouse-hover:
HTML
<br><term id="HPV">HPV</term>
CSS
term{text-decoration:underline; text-decoration-style:dotted; -moz-text-decoration-style:dotted}
term:hover{text-decoration:none; color:#aaaaaa}
term#HPV:hover:after{position:relative; padding: 1px; top:-0.9em; left:-5px; border:1px dotted #aaaaaa; color:black}
term#HPV:hover:after{content:"Human papillomavirus."}
My wondering is about how to get "Human papillomavirus." hyperlinked?
"Content added with the pseudo-element doesn't appear in the DOM, so no you can't. But why do you want to do it with CSS ? It is not styling, the right place seems to be directly on the HTML file." Copied from here
There is no solution for this with css. anything inside content will not be html markup, its only text. so you could probably add an html element on hover which links to another url. for example http://jsfiddle.net/naeemshaikh27/1ysyr0tb/2/
$(function(){
$('#HPV').hover(function(e){
$(this).append('click me');;
},function(){
});
});
This question already has answers here:
Delete destination Url of link on the bottom of browser's page
(2 answers)
Closed 9 years ago.
When you go over a link you'll see a white box with the full link on your left bottom of the browser.
How do you remove this from my website?
Thank you in advance!
That box is inserted by your browser, not the page. You can't remove it, and for good reason -- it's there to help you understand where a link will take you, and anyone wanting to hide that information is up to something dubious.
Just use inline JavaScript:
click here
That's the browser doing that. You can't remove it. It's a good thing too, so the user can see where they're going.
With that said, you can javascript the location to a new page (of course you can style this like a link, if you want).
<span onclick="location.href = 'url';">Click Me!</span>
If you just did this:
click me!
, you'd still get a white box (saying thispage/#) at the bottom because it's still a link. So, if you want to remove that box all together, use the first option.
See Fiddle (Note: This particular example won't work in JSFiddle, but you can still implement it into your own page)
you can remove like using script like:
$("a").attr("href", "#")
or with conditional statement
$("a[href='http://www.google.com/']").attr('href', '#')
This question already has answers here:
Insert a Link Using CSS
(6 answers)
Closed 9 years ago.
Can I add an <a href=""> link to an HTML element using CSS. As I have an image which I want to add a link to a particular page. Can any one help me in doing this?
No. Its not possible to add link through css. But you can use jquery
$('.case').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});
Here the demo: http://jsfiddle.net/r5uWX/1/
You cannot simply add a link using CSS. CSS is used for styling.
You can style your using CSS.
If you want to give a link dynamically to then I will advice you to use jQuery or Javascript.
You can accomplish that very easily using jQuery.
I have done a sample for you. You can refer that.
URL : http://jsfiddle.net/zyk9w/
$('#link').attr('href','http://www.google.com');
This single line will do the trick.
You don't need CSS for this.
<img src="abc"/>
now with link:
<img src="abc"/>
Or with jquery, later on, you can use the wrap property, see these questions answer:
how to add a link to an image using jquery?
This question already has answers here:
Make a div into a link
(30 answers)
Closed 9 years ago.
How do I make an entire DIV a clickable hyperlink. Meaning, I essentially want to do:
<div class="myclass" href="example.com">
<div>...</div>
<table><tr>..</tr></table>
....
</div>
And whenever someone mouse hovers of the myclass DIV, I want the entire DIV it to be a clickable hyperlink.
You can add the onclick for JavaScript into the div.
<div onclick="location.href='newurl.html';"> </div>
EDIT: for new window
<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;"> </div>
You can put an <a> element inside the <div> and set it to display: block and height: 100%.
You just need to specify the cursor as a pointer, not a hand, as pointer is now the standard, so, here's the example page code:
<div onclick="location.href='portable-display-stands.html';" id="smallbox">The content of the div here</div>
and the example CSS:
#smallbox {
cursor: pointer;
}
So the div is now a clickable element using 'onclick' and you've faked the hand cursor with the CSS...job done, works for me!
This is a late answer, but this question appears highly on search results so it's worth answering properly.
Basically, you shouldn't be trying to make a div clickable, but rather make an anchor div-like by giving the <a> tag a display: block CSS attribute.
That way, your HTML remains semantically valid and you can inherit the typical browser behaviours for hyperlinks. It also works even if javascript is disabled / js resources don't load.
Add an onclick to your DIV tag.
http://webdevjunk.com/coding/javascript/3/use-onclick-to-make-entire-div-or-other-html-object-into-a-link/
Why don't you just do this
<div>...</div>
That should work fine and will prompt the "clickable item" cursor change, which the aforementioned solution will not do.
alternative would be javascript and forwarding via the onclick event
<div onclick="window.location.href='somewhere...';">...</div>