I have a div with an anchor tag inside it. I want to set the display of just the "a" tag as none. How would I go about doing it? It looks like-
<div id="upper">
Hide Me!
<p>Not to hide this text </p>
</div>
I tried doing -
#upper a {display:none;}
However this does not work for some reason. What am I doing wrong?
If someone suggests, don't #upper a {display:none !important;} as this introduce more issues in the future than it would sove immediately.
#upper a {display:none;} would work unless there is a more specific rule overriding it somewhere, this can be inspected with firebug or Chrome inspector etc.
Related
I'am making my first site but my css style for links wont work can anybody help my please.
my code you can find out here: http://pastebin.com/eM8FzrWH
Your style is working fine. You are removing the text decoration of a links, then re-adding the underline by wrapping the text in the links with
<u>Something</u>
Your are used tag (which is for underline) within the tag.
Remove tag for your link tag. Now your css working fine.
I was wondering if there is any way for my links not to get underlined/change color when I hover them.
Well <a> tag is used for links. But if you want to have link in a text without the decorations in it i recommend you to use CSS. Add this to your <head> tag.
<style type="text/css">
a.class{
text-decoration:none;
color:#000000;//Your default color
}
</style>
Else try to clarify what you want to do.
Not sure exactly what your issue is, but you can definitely find ways around highlighted text if that's the critical issue here. What I might try, is wrap this code in a <div> tag and give the class to the <div>. It may looks something like this:
<div class="yourClass" id="yourID">
Highlighted Link Text
</div>
And use CSS to deal with the text-decoration.
You should only use the <a> tag if you're looking to link. Otherwise, use something like the <p> (paragraph) tag.
Please have a look at the following JSFiddle: http://jsfiddle.net/33wRk/1
I know that this is not strict HTML, since I have a block <div> inside of an <a>.
As you can see, the <div> inside the <a> gets red if the <a> becomes the active link.
However, it stays red, even after another <a> gets active.
How can multiple <a>'s be :active at the same time?
If the problem comes from the fact that I have invalid HTML, how can I change it to become correct?
It looks like a Chrome bug to me. I can't reproduce it in Firefox.
You can fix it by setting a { display: block; }
since I have a block <div> inside of an <a>.
That's fine in HTML 5, the content model was changed to transparent instead of inline.
I want to set image to anchor tag but it is not working. Can anybody tell me what is wrong?
Note: Don't pay attention to background. It is Asp.Net MVC syntax. But rest assured the image is loaded correctly. Can anybody tell me what am I doing wrong? If I type something in anchor tag it works fine. But I don't want to type anything.
You need to either set the display property to block or inline-block for the link
<a href="#" style="display:block; width:200px;height:100px; ...
Links are inline by default.
Because a link is an inline element, it can't have width and height.
Set this attribute on it:
display: inline-block;
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>