I am trying to make an image map that pops-up different pictures at different places on the map. I want to be able to make a second "pop-up" after the first one on my images, but I have tried various changes to my code and it has yet to be effective. Is what I am trying to do possible in CSS? I feel like it should be, but because I am not aware of any examples of it, I feel uncertain.
I realize that part of the problem is that the "inner" span which indicates my "hello" box is not distinguished from the "span" that goes with the box with the picture. I am not sure how to make these distinct. The Second dot turns from blue to yellow only when it is being hovered over, so I don't know why the "hello!" box does not behave the same way.
Here is my code: http://jsbin.com/AmAqito/3/edit?html,css,output
*Notice the blue dot in the middle.
Thanks!
Try changing your #map li a:hover span selector to #map li a:hover > span. This will target only the span on the level immediately after the anchor tag.
The demo http://jsbin.com/ibAtiNu/1/edit
Related
I need help creating something like this link (http://www.standardchartered.co.in/borrow/)
When the user hovers over the navigation, the grey triangle image will appear. I'm not very sure how to go about doing it. Please help!
The best way to do this is to use a plug-in, possibly for jQuery. There are many drop down menu plugins available. A google search for "jquery drop down menu" will help you. One of the first results for me is:
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
The second one down on that page appears to have the effect you want, but it also depends on how you want the rest of the menu to appear. You will need to do some research and choose one that suits you.
OR, if you just want a grey triangle to appear, without the menu, when you hover over an element, then some css like this is what you want:
li:hover {
background:url('./images/grey_triangle.png') center bottom;
}
Which says, when the li element is hovered, use ./images/grey_triangle.png as the background image and place it in the center at the bottom of the element. You would need to create your own grey triangle, set appropriate padding etc, but that is the basic css you need for the effect.
I'm using a text widget, Black Studio TinyMCE, in WordPress. For some reason, I cannot get the background color to match the background of the header (#192E82). Currently, the header looks like this -- as you can see, there's a white outline surrounding the text area:
And when I Firebug the selection, Firebug shows this:
I can add whatever custom CSS I'd like to. But I'm not sure how to do so. I'm unsure which class I should use a # before, if any, or which class I should use a . before. Ultimately, I'd like to make that white area around the edge to match the background color of the header.
For instance, this doesn't work -- in fact, nothing I've tried works!
#widget-wrap .textwidget {
background-color:#192E82;
}
Does anybody know how I can accomplish getting the white to match the header background? Any guidance would be appreciated!
EDIT: Here's a Fiddle of everything I could find:
http://jsfiddle.net/jasonpaulweber/nvkVT/
Hard to give a precise answer with only the info included, but I would inspect one element at a time, from the <strong> and upwards in the hierarchy, and look for an element with either a white background-color and a padding, or a thick white border. If you do that I'm sure you'll spot it. Once you've identified it just let me know and I'll try and help you targeting it with a CSS selector.
According to the fiddle, the white space is padding of the header-right element
You should set
#header-right {
background-color:#192E82;
}
In order to properly place a bullet image on each navigation li element we normally use the background property to place it.
If however, we wish to, also, add a background change to the list, we should set our anchors inside li to have "display:block;"
Problem:
Once we add "display:block" to our element and we set a background color, our bullet will vanish.
What is the best way to have a menu that will:
Change the background color when the user overs it,
but that doesn't also loose the bullet ?
Update:
Please take into consideration the following code:
http://jsfiddle.net/4PUFa/1/
k. regards
You should not be using the background property for list bullets. You should be using this:
ul { list-style-image: url(path/yourImage.gif); }
which still leaves background for background work.
EDIT: For a right image (per your comment), I can make two possible suggestions, but only one will work for IE7, so I will offer that only:
Put the bullet in the background of the a tag and change the color on the li.
Like so: http://jsfiddle.net/4PUFa/3/
Problem: Once we add "display:block" to our element and we set a background color, our bullet will vanish.
I find this to be false. Look: http://jsfiddle.net/dbugger/4PUFa/
You are probably using twice the shorthand "background", and not know that this the second abckground will invalidate ALL the seeting of the first one.
I think this will be easier to show you than explain, but basically I am trying to create a transition effect on two separate div tags when the user hovers over one of them. Here's an example I just whipped up. It's not perfect, I'm just trying to figure out how to split the robot in half.
http://color-reel.com/growbot.html
currently, the right half will move when you hover over it, but I want both left halves and the right have to open up so it looks like the robot is coming apart.
thanks in advance for your help!
edit: p.s. something small that annoys me that I don't know if it's "fixable" is if div element slides past the user's mouse when the element is being hovered over, it glitches. is there an easy way to fix this?
Maybe if you nest the divs you might be able to target the parent div.
So you get something like this:
#parent:hover #three,
#parent:hover #four {
....
}
I'm trying to style an ordered list that seemed quite simple but apparently is harder than I thought, what I need to do is to separate every item with a white border below, the problem is the the "bullet" or "list number" is not part of the li element so the border gets placed below the text only, here's an image of what I mean:
http://www.diigo.com/item/image/1j40h/5eni
I'm trying to find a way to make the bottom border span across the whole border but I haven't been able to, I though about adding a verticaly repeated background to the ol but if the text takes more than one line it won't work, my last resort was to use a ul without bullets and have the user type the number himself that what it'd be part of the li but this doesn't sound very user friendly :(
Can anyone help me? Thanks in advance!
Use list-style-position CSS property for your ol element:
ol
{
list-style-position: inside;
}
It will make your bullets part of the displayed list item content. This is all in accordance with CSS 2.1 specification ( http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position )