I have a simple horizontal menu which has <li> elements of different widths, when a user hovers over I would like to use the attached image to designate the hover, however I cannot work out the best way to do this.
the Image...
Can anyone post any code and suggest what I might need to do here.
Thanks
You would simply use the a:hover selector in your css, and add a background image. However, be aware, that stretching this image only works in modern browsers (IE9, Chrome, FF) that support CSS3.
This is how you make a menu;
http://jsfiddle.net/sg3s/49T6w/1/
When you style a menu it is important to make the anchors (a tags) display:block. That makes sure you have full power over their look and dimensions. Als if you use the anchors to make the menu it is backward compatible with older browsers that don't support :hover on block level elements (but do on anchors even if you make them a block since they're originally inline).
The background image is easy, just add it in the :hover class of the anchor. Gl
Related
I have been checking my website across different browsers. I am aware of the ability/need to use browser specific CSS.
Is there a reason (other than the obvious) as to why the .sidebar appears in the middle of the profile page in Chrome but not in Firefox? I haven't set it to display on Chrome intentionally and I don't want it to display.
If so, is the best course of action to use webkit in my CSS?
The URL is:
Profile page
The reason the sidebar appears at the centre of the page is because you have the property position: fixed; on .sidebar. You can remove that and Bootstrap will use its own styling.
EDIT: It's recommended that you don't add margins or custom widths on elements using Bootstrap grid-system. You should add those in the child element instead.
I am working on a drop down menu that I want to make completely with CSS. Within the link I will not only have text that needs to change when hovered over, but also an image. Changing the color of the text is easy. However I am not sure how to swap the images on the hover...
Here is what I want the result to look like:
Where the arrows will be small images that will switch when the link is hovered over. How do I do this using CSS?
http://www.w3schools.com/css/css_image_sprites.asp
Check Image Sprites - Hover Effect section.
Set the image as a background image to a div (with a set width and height), and you can change that value with css.
Ideally put both graphics into one image, so that you can just shift the background position and you don't get any flicker during the transition (Google "css image sprites").
I believe you'd need to use javascript to change the src of an embedded image.
You could also have two images and use display:block and display:none to show/hide them as appropriate, but I don't think that would be the best approach.
Use CSS background: url()... on an element you deem most applicable. Here is documentation and a walkthrough: https://developer.mozilla.org/en-US/docs/Web/CSS/background.
On a side-note, you may want to consider using a sprite as well, https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites
I am trying to create an element with either :before or :after and position it at the bottom of its parent, halfway out of the element, to hide the box shadow there. This seems to work, except for IE.
Demonstration: http://jsfiddle.net/XV6pT/
The white border from :before should overlay the bottom border and its box-shadow. However, in Internet Explorer, the parts of the element below the bottom boundary of the button are not displayed.
There is no filter or similar which would set something to hidden (according to How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?). The CSS is copied as-is.
The general aim (maybe someone has a better idea) is, that below the button, there is a dropdown navigation, that should look like the dropdown and the button are "one part", so there should not be any border or box shadow between the button and the dropdown.
It seems that the problem occurs in IE9 and IE10. Switching from absolute to relative positioning also didn't help.
Any hints?
Take a look at this: Creating a CSS3 box-shadow on all sides but one
It involves a bit more html, but IE and pseudo-elements can drive you nuts. That answer also includes a shadow for the menu "baseline" but without deeply looking into it, I think it can be safely removed.
Good luck!
How can I add a simple hover to a div that will be compatible with FF, IE7+ and chrome?
All I need is a simple text hover, and I am pretty sure that you can set it as a property of an HTML element but I cant seem to find it anywhere.
You're probably looking for the title attribute. This generally renders like a tooltip.
By default, only the text of links is clickable in IE 6. I’d like to make the entire area inside the link (i.e. including padding) clickable as well.
I also need this area to be transparent, as the link covers half of a photo. Adding a background color makes the padding area clickable, but defeats the object, as the link is hidden.
I could have sworn there was a way to do this.
display: inline-block; usually works for me.
display: inline-block is the correct answer, as Kobi says. There is no div or transparent div behind it, just the link element. When the inline-block attribute is applied to it, any padding (and I think line-height) becomes as if it were part of the link.
I remember having come across the same problem but my recollection is hazy about the proper workaround (and if there even was one).
Can you try giving the link a background-color: transparent or a transparent background image? That might work.
If nothing else helps, give the surrounding element a Javascript onclick attribute, and cursor: pointer to simulate link functionality at least for those with JavaScript.