I have made a tabbed menu: http://jsfiddle.net/zWMYp/
However when I add it to my webpage, it does not open the tab content like above: http://jsfiddle.net/vL5VJ/
I am unsure what is interfering with the tabs.
.css-tabs ul.noint11_menu li > div {
z-index: -1;
}
is the culprit. remove it (and add color: #fff) and it will work
http://jsfiddle.net/vM5VJ/2/
two issues here in your code
1) the z-index in the div under the a href have z-index of -1 thus it's behind everything else
2) the color of the text is almost the same as background
i've changed this css class as an example, you can use other methods such as define a css color for the div text;
.css-tabs ul.noint11_menu li:target > div
{
display:block;
z-index:1;
color:white;
}
here is the updated jsfiddle link
http://jsfiddle.net/vM5VJ/3/
my advise is to use google chrome to inspect the element, and incrementally remove or add css to figure out where is the problem. I never liked looking at the whole code to figure out a very focus issue
Related
Hey so I have a bunch of tabs made up of like this:
<li><h6>Tab1</h6></li>
<li><h6>Tab2</h6></li>
<li><h6>Tab3</h6></li>
<li><h6>Tab4</h6></li>
<li><h6>Tab5</h6></li>
<li><h6>Tab6</h6></li>
There are all horizontally aligned with display: table-cell;
The problem is that some of them have text that wraps onto a second line, and the hover state when I mouse over an item isn't going to the full height of the row.
You can see the table I'm refering to on this site here: http://perennial.chkpt.com.au/invest-with-us/
You can add :hover style on li instead of a.
Example: apply this style for the website you provided
li.ui-state-default.ui-corner-top:hover {
background: red;
}
I created a JSFiddle, please view.
fiddle
I am having trouble targeting css on hover function for nested div. In the code example, how I can have the following target a specific div
div id=”nav1″ display div id=”section5″
div id=”nav2″ display div id=”section6″
Currently, parent div id=”nav” displays div id=”section5″
If there is a better method, please let me know.
Thank you
You need to change your HTML structure a little, removing the parent .nav to make #nav1, #nav2, #section5 and #section6 "siblings". Then use the siblings CSS selector to target what you want:
CSS:
#nav1:hover ~ #section5,
#section5:hover {
display: block;
}
#nav2:hover ~ #section6,
#section6:hover {
display: block;
}
FIDDLE: https://jsfiddle.net/lmgonzalves/9965yanr/6/
EDIT:
Add float and anothers properties that .nav had, with some adjusments that you can improve. See the working demo: https://jsfiddle.net/lmgonzalves/9965yanr/8/
So i've got wall of text with links, when hovering over the href it should display a image on the exact same line and always on the left of the full text, so not next to the link itself (meaning background image won't do the trick :( ). I've been tinkering around a bit, but without succes, so hoping you guys can help me out with this one :)
As seen in the second screenshot, "kalender" and "menssana#home" are hrefs and need the same image next to the text. Wether it's javascript or css, any help is appreciated!
Html-example can be found here: http://www.menssanahealth.be/diensten/particulieren/
I would nest a hidden image in the link and create a CSS rule on hover to show the image.
Basically this:
A IMG {
display:none;
}
A:hover IMG {
display:inline;
}
But here is a more fleshed out example using absolute positioning for the image so that it doesn't affect the layout of the link but instead shows up to the left of it.
http://jsfiddle.net/HLKQ3/
You can use CSS :before for this like so
.link:before{
content:'';
width:50px;
height:20px;
background:url('urlToYourFeatherThing.png') no-repeat top left;
position:absolute;
top:0;
left:-20px; // width of image
display:none;
}
.link:hover .link:before{
display:block;
}
Oh, and you may need your .link to be position:relative; so that the leaf is positioned absolutely to the parent.
This has not been tested, if you encounter any problems please let me know.
Good Luck.
#Connor
If you have an span with classname 'leaf' with in the a tag you can write code like below in jquery,
HTML should be like this,
<span class='leaf'> </span><strong>Sauna</strong>
Jquery should be like this,
$("#dienst-content a").hover(
function () {
$(this).find('span.leaf').show();
},
function () {
$(this).find('span.leaf').hide();
}
);
and the CSS,
span.leaf
{
width:50px;
height:20px;
background:url('url-to-leaf-image.png') no-repeat top left;
display: none;
}
Off topic, I have a couple of observations:
the page seems to contain a list of services so using a <ul><li> ... would seem more appropriate markup than <p>-
Some list items have links, others don't it would be more user
friendly to differentiate a list item with a link from a list item
without link -- e.g. use bold text, different color, add an arrow or underline etc
Back on topic:
Using a background image is totally feasible by using a combination of left padding and left negative margin. However if you really don't want to that direction then I would add an extra span within the <a>, and hide it unti the link is hovered.
I've found a solution with jquery :)
You can see it in action here
i've added the following script
<script>
$('<img src="<?php echo get_template_directory_uri(); ?>/images/bloemblaadje.png" class="bloemblaadje"/>').prependTo("#dienst-wrapper a");
</script>
And the css
#dienst-content{
position:relative;
}
.bloemblaadje {
display:none;
position:absolute;
left:0;
margin-left:-60px;
text-align: center;
}
#dienst-content a:hover .bloemblaadje{
display: inline;
}
It might be heavy on a page with alot of links, but this seems the best solution for this design.
Thanks for the many suggestions!
In this fiddle you will fill when i hover on "action" a dropdown is showed.
The problem is when we see the last item it goes below the scroll and it is not seen.
in .scrollable class i have used the position:relative;
.scrollable
{
overflow: auto;
height: 300px;
position:relative;
width:100px;
}
and the child class "drop" has the position:absolute;
i dont want to change the position:relative of .scrollable class and i want the .drop element to comeout of the scrollable on hover and .drop should not be shown below the scroll;
here is the fiddle : http://jsfiddle.net/napper7/XPxsx/15/
THanks in advance!!
here is a working code,i added a bit of js to get the current cursor position
$('.navItem').each(function() {
$(this).hover(function(e) {
$(this).find(".drops").css('left',e.pageX-20);
$(this).find(".drops").css('top',e.pageY);
}, function(e) {});
});
http://jsfiddle.net/XPxsx/43/
.scrollable
{
position:relative;
height:300px;
width:100px;
}
I think your best bet is to drop off the overflow behavior. As far as I know, it is not possible to display nested divs outside their parent when it has an overflow value different from visible. Ever other values clip the outside box content of some sort (either by adding a scrollbar or by hiding completely the content)
I edited a jsfiddle that does what you want but without a scrollbar :
http://jsfiddle.net/XPxsx/42/
And here is some documentation on overflow behavior :
http://www.w3.org/TR/CSS21/visufx.html
Anything out of this, will be using js to display the content in a different place DOM wise.
Also, as a more general opinion : it is good to use sass (i guess from css indentation), but even better to order your selectors in a meaning order, that would be from the most general to the most specific (such as html, then body, then div.. in your case .scrollable, then .actionTools, then .navItem..)
hope that helps
you know this problem. A link is in a container that is set behind a absolute positioned block element above it. In this case the link can't be clicked.
See for instance this example: http://jsfiddle.net/8VE3a/
I'm just curious, is there any way to make the container above not block a click event so that it "hits" the link underneath? The same question with hover? If I hover over the link I still want it's mouse-over state to be triggered!?
Thank you in advance.
Here you are: http://jsfiddle.net/8VE3a/1/
pointer-events: none;
depending on the situation you could change the z-index of your link items so that they appear above the background content:
CSS:
.some-class a{
z-index: 5;
}
.background-div{
z-index: 1;
}