<a class="success" href="javascript:void(0)"></a>
//CSS for setting background for above link
a.success:hover{
//set background image
}
My intent is to change the class of the link on server side based on success/fail and set icon for the link accordingly. But the above CSS is not working as expected.
There is nothing wrong with that css.
However, your link is empty so it will not take up any space meaning that a background image will not be shown.
You will need to put something in the a tag or make it a block level element in order for the element (and the background...) to show.
By the way, I am just assuming that you are not really using the // to comment in your style-sheet as that is not valid. Use /* */ if you want to comment in a style-sheet.
Related
I have a navbar that is set to display an inline-block. When, I added the hover pseudo class to change the color on hover. I want the color of the hover state to take full width/height of area. Right now its just taking enough space to cover the text.
link to my code on codepen
You need to use a CSS reset to disable all the default browser stylings, If you check the demo you put in the first post, by default <ul></ul> have a margin-top: browser-value; and a margin-bottom: browser-value;, by adding a margin: 0; to your <ul></ul> the anchor tags (<a></a>) inside will resize probably, This is a forked version of the codepen demo you had earlier, And i just applied a CSS reset through the CSS panel in codepen, For this specific part I used a normal reset, but if you want to read more about resets and understand how they work the following link will give you a lot of insight.
I am making a webpage with an image at center and i wanted a password field(textbox on the image) like this.
I used Some CSS3 animations in the image so is there's any way that i could place my text box on the image without affecting any css animation??
As he said in the comment sample code would be nice, however you could try using absolute position in your css for the image this will allow overlapping, I cannot give any specific code but it will be similar to what is below.
{
position:absolute;
}
in the above case use :
position:absolute
what it does is simply disassociates the elements from is siblings and can be placed anywhere holding a reference to its parents.
Means if you want to position the element , use left/right of its parent.
The website I'm working on has a list ul with above a 100 (li) bullet points. Each of them links to another html-site.
I would like to show an image preview, whenever you hover over one of the links. The image should slowly slide in from the left.
As each preview image is up to 40kb in size, I actually don't want to preload the images.
What would be the best way to prevent it?
I would like to do this only via CSS, without JS, if possible.
My ideas:
a) default-state: <img>-tag with display:none; hover-state: set it to display:inline . Problem: transition does not work with display :(.
b) simply use a div instead and write a CSS-rule for every li, so that on hover the corresponding background-image with the preview-image is assigned to it.
Does this prevent the preloading of the image?
If you add it as a background image, but only show it on hover the image won't load until the user hovers over whatever has the style. You should be able to set the background image inline instead of outputting the image file as an IMG
You can't do this with just CSS because your browser will load all contents (regardless of display:none). I would recomend javascript or server side like php.
Maby jquery load could be something?
http://api.jquery.com/load/
I am using ExtJS textarea and trying to remove the border and background image for the textarea. I am able to remove the border for the textarea, but unable to remove the default background-image.
The component in fact is not taking the background I have set in fieldStyle. When I inspect the element in firebug after the textarea is rendered, I don't see the background in the style.
var textArea=Ext.create('Ext.form.field.TextArea', {
width:200,
fieldStyle:'border:none;background:#FFF !important;width:120px;'
}
How do I override the background and width only for the field?
Thanks
Remember that, besides adding the "!important" directive, your stylesheet must be the last one to be loaded, the "cascading concept", so your rule would be the one to be read.
after the CSS rules loaded for extjs, yours must come after.
Hope this helps.
change to background-color:#FFF !important.
I want to use iconography in a web UI, while retaining the context language of what clicking on the link will achieve, but possibly not displaying the text and crowding UI space. For example using CRUD screens, I want to display a plus icon for adding an item, a minus icon for deleting, it, a pencil icon for editing it, and a magnifying glass to search for a different item. There are a couple of ways to achieve this.
Render an img element inside of the anchor. The img alt attribute will describe what the icon represents (alt="pencil icon"), and the title attribute will describe the intended consequence (i.e. "Click here to edit this widget").
Render an anchor tag only, and use css to display the image as a background. In this case, the anchor's content should describe the intended consequence, however it needs to be wrapped in a span element so that its display style can be set to none. The anchor should also contain a title attribute matching the content (without a surrounding span of course).
It seems to me like option #2 is easier to implement in an asp.net mvc app. Since the icon is a design concern and not a markup concern, it makes sense to define the image in CSS. It also makes things easier from a code maintenance perspective... changing the img src location would only necessitate changes in the CSS file and no view files. Removing the CSS would cause the application to fall back to full text accessibility too.
What smells funny to me is the part about nesting the link content into a span so that it can have disply: none; set in the css. Another thing is, if I use the :hover selector to swap the image and provide a rollover / rollout effect, the images seem to take longer to swap out than when done with javascript.
Am I missing anything here?
We frequently use option #2, but in a different fashion. Instead of wrapping the anchor content in a span, use CSS to style the anchor as display: block or inline-block, then set its text-indent to -1000em (or similar, just pick a big value). I think you also have to set overflow to hidden.
If you do the background image as a sprite (a single image with both the non-hover and hover states in it) and use :hover to reposition the background, you should avoid the flicker/delay that you might be seeing now. That also results in one less separate request hitting your web server.
Note that this also requires explicitly setting the width and height of the anchor in your CSS to match your icon size.
If the icon conveys information that does not duplicate information already in the document, then it should be a real <img>.
However, the alt attribute should contain an alternative to the image, not a description of it.
alt="Edit this widget"
The title attribute should only be used to provide advisory information (think "optional extras") and you should avoid using implementation specific terminology (such as "Click here").
What smells funny to me is the part about nesting the link content into a span so that it can have disply: none; set in the css
If you do go down the route of putting content in background images and hiding real text, at least negative text-indent it out of sight instead of display: noneing it and making it invisible to screen readers.