Trying to make 'tab2' move with the nav bar. (when you hover the nav the box moves out with it)
http://jsfiddle.net/Bz5mn/
Help!
#nav
{
min-width: 60px;
width:5%;
height:100%;
background-color: rgba(1,1,1,0.3);
position: absolute;
top: 0;
left: 0;
transition-duration:0.4s;
overflow: hidden;
}
Try the adjacent sibling selector. You can do something like
#nav:hover + #tab2 {
margin-left: 5%;
}
You'd also want to add your transition to the #tab2 declaration so that the animation matches.
Also note that this selector only works in IE 9+
Here's a live demo
Related
I have a CSS class which outputs a line after a title
This works in Safari and Chrome but in Firefox the line is not appearing.
My Code:
.sidebar h2 {
color: #f7f7f7;
width: 100%;
font-size: 24px;
position: relative;
}
.sidebar h2 span {
background-color: #40d1b0;
padding-right: 2px;
}
.sidebar h2::after {
content:"";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.22em;
border-top: 1px solid rgba(0,0,0,0.10);
z-index: -1;
}
<h2><span>Show</span></h2>
The container div has a class of Sidebar
EDIT
JSFiddle as requested
http://jsfiddle.net/jerswell/Lxsmt96k/
The problem is the z-index, put a lower z-index to the sidebar class, so it won't be hidden anymore.
Here is a new fiddle, I have just simply put z-index: -2; to the .sidebar selector.
PS (nitpicking): In CSS3 after is not a pseudo-class but a pseudo-element, and there is a new notation for it: ::after (however the old notation still works)
If we change z-index of .sidebar in minus value, later it can have a problem for layout. Other elements can overlap this element. We should use :
.sidebar h2{position:relative;}
.sidebar h2 span{position:relative;z-index:2;}
.sidebar h2:after{z-index:1;}
I seem to be having a problem with my Wordpress CSS Menu. I am trying to create a dropdown element in the menu, which is conveniently wrapped in a div automatically called "sub-menu".
When normal, the menu looks like this:
However, when I try to access the drop-down menu under "Photography", this happens:
I have tried everything and am unable to get it to correctly show up under Photography. Any help would be much appreciated:
#header li ul.sub-menu {
display:none;
position: absolute;
top: 10px;
left: 50%;
width: auto;
}
#header li:hover ul.sub-menu {
display:block;
}
You need to make sure the container element (#header li) is set to a position as well. I would use relative becasue it will (hopefully) not break other positioning:
#header li {
position: relative;
}
#header li ul.sub-menu {
display:none;
position: absolute;
top: 10px;
left: 50%;
width: auto;
}
header li:hover ul.sub-menu {
display:block;
}
Absolute elements will position itself based on the nearest parent who's position is set explicitly.
I currently have a div called testLine used for displaying a color triangle effect using css:
#testLine {
width: 0;
height: 0;
padding-bottom: 47.5%;
padding-left: 47.5%;
overflow: hidden;
}
#testLine:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -1000px;
border-bottom: 1000px solid transparent;
border-left: 1000px solid #4679BD;
}
This works fine but the issue is the following:
How can I do to have a text over that triangle? I mean, I've tried with z-index but with no success (css it is not my strong point) and I didn't know if it is even possible to write text on it. What can be other possibilities? (I really don't want to use a resource consuming image for the background). I really appreciate any help that can lead me to a solution.
PrintScreen - http://i.imgur.com/dRCKVNO.jpg
edit, html code:
<div id="testLine"></div>
<div id="text">Testing Testing</div>
use position with alignment...something like:
#text {
position: absolute;
/* this will make div fall out of
page flow anad align to viewports dimension*/
top:0;
/* position to top*/
left:20px;
right:0
/*if needed*/
bottom:0
/*if needed*/
}
working demo
Use z-index with a position property, for example:
#testLine {
position: relative;
z-index: 9999;
}
Without position property z-index not work
I have top menu with drop down navigation(sub menu) and drop down comes right side of main menu.
css:
ul.dropdown ul {
width: 220px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
How can change position to left for a last menu because if i hover on last menu, drop-down comes with horizontal scroll because there is no space on right side to display menu?
Please help
ul.dropdown li {
position: relative;
}
ul.dropdown li ul {
position: absolute;
top: 20px; /* assign the correct value of the top line height */
left: 0px;
}
This should work^^ When assigning position:absolute; to an child element of an element with position:relative the absolute positioning is relative to its parent and not to the body.
My fault, somehow overread the last part with "last child".
This could work:
ul.dropdown li:last-of-type ul {
position:absolute;
left:0px;
}
You can use jquery to fix the problem,try this
$(function(){
$(".dropdown:last").css("left","-120px");
})
You should use last-child selector to set right property instead of left:
.dropdown > li:last-child:hover ul {
left: auto;
right: 0;
}
You don't provide a fiddle so I've set up this simple example to demonstrate the principle: http://jsfiddle.net/6eBd2/
I'm making a CSS dropdown navigation and I can't get the dropdown to show up above the content in the div below the navigation div. How do I do this, without positioning both divs absolutely and specifying a z-index? You can see my example here:
http://stage.fourwallsla.com/in-the-neighborhood
You have already used absolute positioning I see, but anyways why not add z-index to it?
#container #top_nav .subnav {
position: absolute;
top: 37px;
width: 100%;
z-index: 1000;
}
That fixes it, you just need to work on a better background color for it now!
You can't do it without z-index specifing or swapping blocks in your markup
Add to your css
#container #nav_container {
z-index: 2;
}
#container #nav_container li a {
background-color: #fff;
}
Giving the "feature" div a negative z-index would also work (tested in Chrome Firebug)
z-index:-1
#container #top_nav .subnav{
z-index: 2;
}
#container #top_nav .subnav li > a{
background: #fff;
}