It's an easy question and I've done it several times before, but for some reason, it's not working this time. I have an image and when a user hovers it, a description should show.
HTML:
<div class="description custom">
<a class="description_help_text" href="">
<img src="../../misc/help.png">
<span>Bla bla bla.</span>
</a>
</div>
CSS:
div.description a.description_help_text span {
display: none;
}
div.description a.description_help_text a:hover span {
display: block;
}
But for some reason, it's not working. I'm guessing some kind of stupid syntax I'm overlooking right now.
And a second question, is it possible to use a a-tag without linking it? So a user can click on it as much as he wants, but with no actions from the browser?
I think the latter CSS block should be
div.description a.description_help_text:hover span {
display: block;
}
For the links without action I recommend using
link
Your CSS should work fine, so my guess is that you have a parent class somewhere which is affecting it. Try looking through the ascendent styles in Firebug.
Re. your second question, you can supply no href value to an anchor element, but this may still cause the page to jump when the link is clicked, and IIRC it is not valid HTML. An alternative is to link to javascript:void(0);, although this is rather ugly IMO.
The only way to fully prevent any link behaviour is to create a link handler for the element in javascript and place event.preventDefault(); within it.
This seems to work for me: http://jsfiddle.net/qVK6f/
to answer your second question at least, try:
click
Related
In Blazor razor page if I place an HTML anchor such as
My Text
the text doesn't show until the mouse is moved over it.
I have worked around this by making it a Button.
Is there any solution to this or or better linkage component to use?
I cannot reproduce this in a new project.
The behaviour seems to suggest this might be a CSS problem. To confirm this, try giving your a an id and set a specific style
#tester {
visibility: visible;
display: inline-block;
color: white;
background-color: red;
font-size: 1rem;
}
Then
<a id="tester" href="http://example.com">My Text</a>
When you run the app you should now hopefully see the link. Right-click it, and select "Inspect Element", then look down the CSS rules for that element for anything that has a strike-through font (meaning it has been overridden by a more specific rule).
One of these should be something hiding your element. Once you've found the culprit, kill it :)
Why is the icon still visible even with display: none?
.toc.item {
display: none;
}
<a class="toc item"><i class="sidebar icon"></i></a>
In addition to #GCyrillus I want to suggest right clicking the icon and choose "inspect element" in the browser. Look for your code. If it's striked through something else is overwriting your code. Search for a display that's not striked through to see what is messing it up. If you can't find your code the css file is not properly linked.
If you're having trouble overriding the code that's overriding yours in the first place, you might want to add !important to your code.
display: none !important;
The code provided here works. (you can see that by clicking run snippet)
My guess is you have not posted the full contents of your .css file and that you have another css entry contradicting what you are doing here.
Nothing wrong with your code. Check if your CSS is correctly linked to your document or if another rule is overriding it.
Currently working with a website, and I'm running into a weird issue. The code at fault is this:
The style sheet behind the <ul>, <b>, and <li> tags looks like so:
ul.secretariat {
list-style-type: none;
font-style: italic;
font-size: 12pt;
text-align: center;
}
li {
margin-bottom: 25px;
}
<ul class="secretariat">
<li><b>Item one</b> Faculty Advisor</li>
<li><b>Item two</b> Secretary-General</li>
...
</ul>
I am well aware that the majority of those don't affect the text; I included them to show that the CSS isn't the culprit (I don't think so, anyway. I'm no expert on HTML, someone just asked me for a favor). The issue I'm having is that in the webpage, the first item in the list has a background color that I can't get rid of. If I inspect element, I find something even stranger; a style has appeared in the <li>! I don't know where it's coming from. I've Ctrl+F'ed ever file in the site and can't find that text anywhere. Overwriting with style = "background: none" doesn't seem to do anything, (I don't know if that's valid, I can't find much documentation for creating an empty background) so I would really appreciate any help I could get on this small but annoying issue.
In order to find the code that is messing with your elements style attribute, you can:
Select the element in chrome dev tools
Toggle Break on Attribute Modification
Refresh the page
Execution will pause in the violating code
Since your question is very broad it is very difficult to see where the change is taking place, however this JQuery should fix the issue, add it to the bottom of the page, right before the closing </body> tag, see fiddle http://jsfiddle.net/c5moax9h/1/
<script>
$(document).ready(function() {
$('.secretariat > li').each(function() {
$(this).css('background-color', 'inherit');
});
});
</script>
So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.
Edit: closing anchor fixed. This issue exists when testing on the following browsers:
Google Chrome
Firefox 3.5
Safari
Works with no problems on IE 8
I'v a really weird problem here. In short, take a look at the following html:
<a href="login_page.html" class="img">
<span class="img_holder">
<img src="images/columnists/mike_zeisberger248.jpg" onerror="this.src='default.jpg'"/>
</span>
<span class="btn">track him</span></a>
Here's the img_holder css class:
.img_holder{
border: 1px solid #c8c8c8;
display:block;
background:#fff;
height: 100px
}
and the img class:
.img{
_margin:0 12px 12px 0;
}
Now, the problem is that clicking the image nested inside the anchor tag doesn't take you to its href link (thought, the href link shows in the status bar when hovering over the image, and opens perfectly fine when opening in new tab).
Any ideas?
Some browsers have issues with anchors that are display: inline (the default) containing elements that are display: block.
Add display: block to the ruleset with the .img selector.
Also see http://validator.w3.org/ — it makes a good first pass to find the low hanging fruit of QA issues. Your sample code seems to have some errors that it would pick up.
Well, there area few obvious problems that spring out; one is the / before your onerror, and the second is that the <a> in question doesn't seem to be closed.
Apart from that, there doesn't seem to be any obvious reasons why it wouldn't work; perhaps a more complete post of source code is in order?