I have to create a hovering effect wherein when a tab is hovered the entire background of the tab should be White. But as can be seen in below SS, , hovering affect is getting applied only to the text part.
I have also attached the CSS from Chrome Web developer.
HTML code generating that tab is ,
<li>
<a class="last_menu" href="#"></a>
</li>
I have tried adjusting with padding element. But, text is also moving with it. I want text to be at center and only hovering to be expanded to occupy whole tab space.
Install Web Developer Toolbar Go to CSS > Display Style Information or <ALT+SHIFT+Y>(it's the wand in the toolbar). Hover your mouse over the element in question to get a detailed picture of how it's being rendered. Study this. Make it your friend.
Try applying a class to the list item itself, then under the hover pseudoselector for that specify a white background.
Related
I may not have described the issue accurately with the title, but it's easier to explain here:
I have a button that has an icon image contained within it. I need to get rid of the grey box around that icon and keep the icon itself, along with the button functionality. I assigned the button a second class called "nogray", and in my styling sheet I set opacity to 0.
However, this got rid of the entire button, along with the little orange trash bin icon, which I need to be visible. Essentially, I need the button to function the same way, just with the orange icon and no grey box. In this screenie, you can see the buttons at the top of each bulletin note.
Here is the button code in the bulletin notes view:
<button class ="remove-card nogray" id="#item.BulletinId" type="button"><i
class="fa fa-trash"></i></button>
And here is the css for the button:
i.fa.fa-trash::before {
content: "\f1f8";
}
.remove-card.nogray {
opacity:0;
}
(i.fa.fa-trash::before targets the trash icon, and .remove-card.nogray targets the outer gray area. However, I suspect that the latter is targetting the entire button because setting the opacity to 0 affects both gray area and icon.
How would I tweak the button code so that the opacity is 0 only for the grey, and not the icon? I've tried changing the order of the code element by element, but a lot of it is guesswork because this is a team effort and I did not personally write the button code. I'd also like to apologize in advance if this is an impossible question to answer; if there's some detail you need to know, please tell me and I will edit this to include it.
Thank you very much for any suggestions!
I realized I was targeting the wrong lines of code in my css. There was an ActionLink that a teammate commented out, and I assigned the classes from that to my original button code and was able to target the button that way instead.
I am working on an application which implements a list filled with anchor tags into a list of clickable tabs by wrapping it and the content for each tab in a container. Here is the list, for reference. This code outputs the following image. The second image is an example of what happens in Chrome after I click on a non-default tab (i.e. Loans).
I believe Chrome is generating this blue border as some sort of active effect for the anchor tag, as it is removed if i press any keys or click at all. The blue border also does not appear in Internet Explorer 10. I have not tested other browsers.
Is there any way to prevent this border from appearing in the first place?? I am almost sure it is generated by the webkit somehow but am not well-versed in it, nor know much about docs for it.
<ul>
<li>Borrowers</li>
<li>Loans</li>
<li>Funding Sources</li>
<li>Users</li>
</ul>
Images Illustrating Before and After Click
That border is displayed to show focus. Add the following css snippet to remove the focus outline from all of your elements.
*:focus {outline: 0;}
If you don't want to eliminate the focus outline for all elements but rather just your tab list add the following.
li:focus{outline: 0;}
Made a quick fiddle as an example.
See sample with focus outline and sample without focus outline
I have an image and i need to use that as the breadcrumb background image. I tried but doesnt seem to be coming correctly. I have created a fiddle for this. Can somebody please help me what I am doing wrong. I am not supposed to change the html since teh same file is being used in other applications also. Only the css, I can change.
HTML
<div id="itemDisplay">
<span id="step1" class="step_on" title="Home">Home</span>
<span id="step2" class="step_off" title="Vehicle">Vehicle</span>
<span id="step3" class="step_off" title="Vans & Trucks">Vans & Trucks</span>
<span id="step4" class="step_off" title="Vanagon">Vanagon</span>
</div>
I have attached an image how the actual breadcrumb should look like
In my fiddle the alignment of the text is not correct except for the first text. The text should be aligned towards left. Also the last breadcrumb is not correct.
When the user is in the first page, only the first breadcrumb text should be bold, when he navigates to second page, only the second should be bold
http://jsfiddle.net/Dbudt/5/
Please advice
Updated demo
I've added .active class so you can use it on span on the page you need.
I've also fixed the padding for span.step_off
UPDATE
I fix the background-position for the last element.
based off code in my prior question: CSS radius and hover fill entire area
how do i get the tab that is selected to have the same background color of the visible box below? the rest of the tabs i want to remain the default color. this way the user knows which tab is selected very easily.
i see the ui-state-default ui-corner-top ui-tabs-selected ui-state-active classes but can't get the css right to make it work.
help?
Do you want to highlight a tab on hover? I moved your background color into your class .ui-state-default and added a pseudo statement.
Here is a working Live Demo. Is this you want?
This is a CSS-Question.
In this fiddle you can see a button.
It has got two span-elements inside. One with float:left; the other with float:right;.
The style is a normal button-style.
When clicking that button on the iPhone or hover it in a Browser the style gets lost.
This is because I changed the background-color.
Is there a way to change the background-color without losing the whole button-style?
EDIT:
Here are the two images: The first button is a normal button-element. The second button is a button where I changed the background-color ... this is what it looks like when I'm hovering over a button.
I think I understand what you mean. It looks like the rounded corner is gone when hovering, while a border is added. I'm afraid there's not a easy way to get what exactly you want, as the behavior & appearance of Button is controled by system.
Maybe you can try to replace it with a div, which you have full control of the style (chaning the style via JS when hovering).
All's working fine for me. However floating-right elements should always be placed before floating-left elements. Don't know if it will change anything.