I have a portfolio site here:
http://mrliger.com/index2.php
I have an issue whenever I hover of the menu li elements on the left side. The hover state changes the background color of the li to a darker grey but at the same time covers the arrow just to the right of the menu item. I'd like the arrow to always be visible. I've tried using z-index but no joy. Any suggestions?
The z-index property only works on positioned elements (position:absolute, position:relative, or position:fixed). This simple CSS should work for you:
.topnavi {
position: relative;
z-index: 1;
}
OR:
.arrow-up {
position: relative;
z-index: 1;
}
Note: For future questions, it's better if you add the code here instead provide a link.
Related
I am trying to construct a chunk of code that is an image and a text caption, which is a single anchor. the image is an image tag and the text is in a DIV tag.
When the anchor is hovered, the image+text box has a border appear, and the text div transitions between text to then show the background image (using opacity 1 to 0)
USING CSS ONLY
My issue is that I can't seem to find the best CSS to write this code, what I have is:
HTML:
<div class="outerCCBox">
<a href="*url*" >
<img src="images/logo/clarityTeeth.png" alt="">
<div class="clarityUnderBox">
<div class="clarityBox">
Clarity Makeup
</div>
</div>
</a>
</div>
The "clarityUnderBox is a presized box containing the background image that appears when the covering text fades out on hovering over the anchor tag.
CSS:
.clarityUnderBox {
width:256px !important;
height:86px !important;
background:url('../../images/logo/Clarity-C-320.png') no-repeat;
background-size:contain;
}
.clarityBox {
width:100% !important;
height:100% !important;
background-color: #000;
opacity:1;
color:#f0f0f0;
transition: color 0.4s linear,opacity 0.6s;
}
All CSS is simplified for this question (fonts, transition -types- etc removed).
The issue I am having appears to be with the next piece of code, the "hover" element:
.outerCCBox a:hover > .clarityUnderBox .clarityBox {
opacity:0;
color:transparent;
}
EDITED CSS:
originally
.outerCCBox a:hover .clarityUnderBox .clarityBox {
opacity:0;
color:transparent;
}
which behaves in the same way, as with the ">" selector.
The issue is that the hover works fine when hovering over the anchor element but when moving away, the .clarityBox class doesn't return to it's pre-hover state.
1) How do I make this return to it's pre hover state?
1b) Do I need to make a separate ~ a:not-on-hover CSS declaration?
2) How can I tidy up and make the "hover" CSS line more specific? - the way I've done it above works, but I'm sure there's a better syntax to it. I have tried things like using "*" and ">" selectors with limited success (combined with some rearrangement of class orders in the HTML)
Thanks for your guidance.
EDIT:
As requested, a fuller fiddle is here:
http://jsfiddle.net/gwrrezys/9/
But this fiddle doesn't show the image above the text, but it does replicate the general issue with the hover not updating / or not returning to its original state.
cheers
SOLUTION:
As suggested in comments by Martin, making the anchor a block element fixed this issue, I have retained the issue in the jsFiddle for reference and can be found by repeatedly hovering and then hovering off the anchor area.
Your actual problem is with the hovered parent (your anchor element) not having a width set.
If you make the anchor a block element it will fix the "leaking" content issue. by either
making the anchor display: block with set width and height
or making the parent fit the content by making it display: inline-block
DEMO
General to displaying children on hovered parents:
As soon as you extend a child of a :hover element over the whole screen (100% width and height) the parent will stay in the hovered state as long as you are hovering over the child.
To get around that you need to break the child out of its parents flow ... for example by making it's position: fixed (or position: absolute if the parent has no position: relative).
For example by using something like this on the child - and the z-index: -1; here makes sure it moves behind the parent:
position: fixed;
width: 100%;
height: 100%;
top:0;
left: 0;
z-index: -1;
DEMO
Or (depending on what area exactly you wan to cover with the child) you can alternatively extend the child only over a particular hover area (e.g. its parent) ... here you would then use position:absolute on the child and position: relative on the parent (to make sure you keep the child in the parents flow).
DEMO
A quick read on positioning elements: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
On this page http://londonsitedesign.co.uk/code/basic.html I am trying to place an image above a full screen slideshow, but behind my header. The image is a white gradient. I have given the image the style z-index: 0 which places it in front of the background, however it covers the header. How can it sit between the header and the background?
I noticed that the menu in the header is onto of the image but the rest of the elements in the head section are behind the white gradient image. Why is there this difference in the layering of elements?
thanks for any advice.
Angela
You need to add position:relative to your #header (and any other elements with a z-index but no position specified):
#header {
height: 157px;
background-color: #FFF;
z-index: 5;
position: relative;
}
This should do what you want:
.container_24 {position: relative; z-index: 10;}
It will also stop the fade over the footer, which I wouldn't think you'd want, either.
i want my div of menu to appear on the top left of the div for my header image. The backgrounds used for the menu blocks are transparent and translucent and i want that the image of the header should be visible under through translucent and transparent backgrounds.. How can i do it using css??
the class for div of menu is divmenu and for header is divmainimg
div.divmainimg {
position: relative;
}
div.divmenu {
position: absolute;
top: 0;
left: 0;
}
Consider changing the class names to mainimg and menu, respectively.
Set position: relative; on the parent object of your menus that you want them to be positioned relative to, and set position: absolute; on the menu divs. Often you can get away without specifying the exact position - if the divs appear in the DOM where you want them to be visually. E.g. this could be enough:
body {
position: relative;
}
div.menu {
position: absolute;
}
Edit: Forget about z-index for now - it is rarely needed.
HTH
try to use absolute position, and set a high z-index for the div you want over others..
You could also now Just simply put the div you want to be over the other div inside the div you want to be under for example:
pretend your div class="a" is the one you want on top, Then div class="b" you want on bottom.
that would put A on top then B under it.
I believe what you are wanting is z-index. Rather than explaining it here, just do a Google search for it. It is simple to understand.
I'm struggling with getting a background image on this page and a drop shadow to show on top of my tab.... [URL_REMOVED]
The left tab should be "below" the white content area, thus the shadow effect should be on top of the tab. The second issue is that I'm using CSS to apply a gradient background, I also want to have a background image as well and it's not working. Can anyone help me figure out why?
You have to add postion:relative to #main and #side. z-index works only on positioned(absolute/relative) elements.
#main {
…
position: relative;
z-index: 2;
}
#side {
…
position: relative;
z-index: 1;
}
Here's the idea: I have a div element, #content_wrapper, which encompasses three floated divs, #left_column, #nav, and #content. Here's the styles on the #content_wrapper:
#content_wrapper {
float:left;
background: url("images/bg-tan.jpg") repeat-y left center;
position:relative;
}
However, in Internet Explorer 7 the #content_wrapper seems to steal the cursor from the child elements. Whenever I hover over the #content_wrapper, the cursor always switches to a beam and I'm unable to click on any of the links or text inside the div. Thoughts?
Update: I've tried the following fixes, none of which have worked.
Applying fixed width to all elements, including parent and top level children
Apply position: relative to all elements and then z-index
Using !important on all the above properties in case
Adding the "zoom" property to parent and child divs
Adding the "overflow" property to the parent div
#content_wrapper { position: relative; z-index: -1; width: 1010px; }
EDIT: You are setting the z-index of #content_wrapper to -1. This is why it's happening. Get rid of it or set it to a positive value.
Try
#content_wrapper {
zoom: 1
}