I need to have a page with a responsive layout that has the following elements (see picture):
Legend:
"folds" for the menu means that it just becomes a small button, which unfolds the menu again on click);
When the left menu folds, the content and canvas div need to slide to the left side of the page. When it unfolds, they get pushed to the right again;
The bottom menu 2 is folded by default (you can only see a button). If you click it, then the small menu opens (above the other elements);
The content div is scrollable;
The elements both in content and canvas should be selectable;
Right now I have the following code:
<div id="background">
<div id="menu></div>
<div id="content"></div>
<div id="canvas"></div>
<div>
The position of background is "relative", the menu and canvas are set as "fixed".
The problem right now is that something (background div) is covering all the other elements, so I can't select the elements inside the content div and the canvas div.
I tried setting z-index correctly (lowest for the background, highest for the canvas) – didn't work.
I don't understand what the problem is.
Can somebody help me, please? Maybe you can just tell me from scratch how I should arrange those elements in CSS, so that I get the arrangement I need?
Thank you!
It seems that you have forgotten to set the position attribute for the content div? z-index only works on elements with fixed, absolute or relative position. (the default is static position, so the z-index is not working)
No idea why the other elements are covered. Maybe posting the css as well would help.
Related
On my site : Dev.stevehamber.com
I am trying to get the image "New Page" (currently behind the slider) to be positioned outside it's current DIV, overlapping the top right hand corner, but so that it also moves with the Auto margin of the main content. Can't seem to figure out how, with out it being either behind something or not following the auto margin of the container.
I have also had problems with the :hover attribute. Experimenting with fixed position Divs I have noticed the image/background doesn't change on the bottom right hand corner of the fixed "F", is this something to do with positioning too? :/
I tried Googling this but couldn't explain myself in 1 sentence, so I hope this makes sense. Ha!
Thanks.
In your CSS, add z-index, like this:
img.newpage {
position: absolute;
right: 1px;
z-index: 2;
}
Give the F a high z-index to make it be on top
Put the newpage.png in a div that's on top of the slider div. Put both of those div's inside another div; assign the css auto-margin attributes to this parent div.
So something like
<div id="slider">
<div id="slidercontent"><!-- in here, put the slider -->
</div>
<div id="newpage"><!-- make newpage.png the background image of this-->
</div>
</div>
As for the hover; please explain a bit more thoroughly, it seems to work fine with me. You mean the facebook button right? (its positioned top-left in my FF btw)
I have so much trouble figuring out where my mistake are. I want to build website with some divs on the right to each other...later there should be a horizontal navigation which automatically scroll to the right via anchors.
Anyways...each div has an image in the background and a container with some text. The navigation menu is fixed and is always displayed.
My trouble: Why is the text container not showing up on the first div?
Please see my fiddle on http://jsfiddle.net/pvvFR/
Thank you in advance for reading and if so...for answering
Is this something like that a solution
http://jsfiddle.net/pvvFR/7/
I've put a position absolute on you slider
and i've put your container div out of the slider
EDIT :
Look at this: http://jsfiddle.net/pvvFR/13/
everything is relative
And i've given a height to your slider, and position your container to a negative top
If I did got you right, if you use img to set a background (which I think is not good at all), you should exclude it from the common layer (for example position:absolute), so the content could overlay it. Your problem is not in text, but in image.
try to have each container a unique class and replace with for example and put the image to div background like
background:url('http://www.wiesenhof-online.de/upload/Chicken-Ribs-BBQ-quer.jpg');
http://jsfiddle.net/pvvFR/10/
Well, answer to your question about the REASON behind this happening is that Z-INDEX only works with positioned elements and as you are not positioning your image element that's why 'some text' is buried behind the image and its z-index doesn't take effect.
Check this. http://jsfiddle.net/pvvFR/14/
I want to make a div with position:fixed that will overlap the content, but not clickable, i.e. when you click in that div's area you are clicking on the content under it. So the text under the div could be easily selected. Is there a way to do that?
The solution is to add pointer-events: none; to the CSS of the overlaying div. This will cause any all events to pointer events to ignore the overlaying div.
This is demonstrated here: http://jsfiddle.net/nayish/7hHvL/.
You'll notice that the alert, which is set only for the bottom div, works also when clicking on the overlaying div.
I had the same problem. Basically I have designed sidebar, Left side is fixed and right is scrollable. The left contains links, when I tried to navigate, I found the link was not clickable. I changed z-index: 1 to z-index: 100. Therefore my navs links worked again.
You might have to use a setCapture on the underlying div during the hoverOver of this fixed div and releaseCapture during the hoverOut
var underlyingDiv = document.getElementById ("div1");
var overlyingDiv = document.getElementById ("div2");
overlyingDiv.onHoverOver = "underlyingDiv.setCapture";
overlyingDiv.onHoverOut = "underlyingDiv.releaseCapture";
Whatever is on displayed in front is also what is being clicked on. one way to handle that is to make a transparent graphic for the links that appears over the links and zindex that transparent image in front of the position absolute content. Easy to do if the links are menu buttons with a known size.
Update an example
<a href="#">
<img src="transparent.gif" width="100" height="100" style="position:absolute; zindex:100">
</a>
<div style="width:100px; height:100px">
this is my menu button
</div>
The img position:absolute remains at current screen position over the div menu button. zindex will push it in front of the fixed content. It is easy if you know the space for the link that is covered up.
Had the same problem. But i found a way wich worked for me. You could simply position the fixed element inside of the container wich is overlapping it. As you set position: fixed it does not matter where the element is in the mark-up, because it will still stay on the same place.
I have two relatively positioned areas on my page, the content and the header.
The content has a higher z-index than the header - this is a requirement for the structure of the page.
I've simplified the HTML and CSS to illustrate what I'm trying to do here:
http://cb3.securetree.com/example.html
This presents an issue with dropdown menus that exist in the header because they display underneath the content region even though their z-index is higher.
On the example page, notice how the dropdown menu goes beneath the content region.
Appreciate any assistance in solving this issue.
Relatively positioned elements will display on top of things that are not relatively positioned. You should avoid having to use relative positioning where it's not necessary. If you use floats and margins etc to move things around on the page, you shouldn't have any z-index issues.
I'm trying to add a sidebar to my page. The main body container on the page has a box-shadow, so I want the sidebar to appear as though it's coming out from underneath the container so the shadow will be on top of it. I made my sidebar div a direct child of the body container (which has position: relative), and set it's position to absolute, then positioned it using the top and right position values. I got it in the right place, then applied a negative z-index so that it would be under the body. The problem is, this is making any links that I put in the sidebar unclickable in all but IE9. I don't know how else I can accomplish this without knocking out the links. Any ideas?
I would post a link to a page showing an example, but I'm actively making changes to it, so by the time you clicked it you probably wouldn't see what I'm going for. I'll try to explain better.
The body container is 720px wide and has an auto margin so that it appears centered in the page. It is positioned relative.
The sidebar is a direct child (the first child) of the body container. It has a fixed width, position absolute, padding, etc. and has a top and right position applied, along with a z-index of -100.
Here's a link:
http://reachchallenges.infectionist.com
You can remove the negative z-index and give an inner shadow to the sidebar that is the same as the outer shadow of the .body element.
You´d have to try it to see how it affects the border of the sidebar.
I don't fully understand what effect is desired but maybe this barebones fiddle can give some hints as for how to approach problems of such kind.
jsfiddle
The way to get links to work is to toggle z-index back to a positive number. Your CSS will look like:
.z-index1{
z-index: 1 !important;
}
and your JS should be:
$("#div-on-top").click(function(){
$("#div-on-bottom").toggleClass("margin");
$("#div-on-bottom").toggleClass("z-index1");
});
Clicking on #div-on-top will move it out of the way revealing #div-on-bottom and it will also bring #div-on-bottom to the top, making links clickable.
I also applied shadow to the #div-on-top and it looked ok (to me; see jsfiddle).