Link to site in question: http://www.christopherwarrington.com/testing_ground
I have a start screen that is set to z-index 100 to make sure it is above all other DIVs. When you click the Enter button, the Start screen slides away.
The Main DIV is set to a z-index of 50.
The problem is that when the Start screen slides away, you can read everything within the Main DIV, but can not necessarily click the links. You can see this in effect at the end of the 3rd paragraph. If you scroll the mouse over the link, the left side will not allow you to click it, but the right side does.
Now, if I change the z-index of the Main DIV to be higher than that of the Start Screen, all links are accessible, but the Start screen slides up and down behind the Main DIV, which is not useful.
I am at a loss. I do not know why when the Start screen slides out of view, why it prevents the links from working. I am sure I am missing something obvious and I appreciate any advise from an extra pair of eyes. Thank you.
The start screen div is covering up the rest of the content so that clicks that appear to be over a link are actually over the start screen, and thus do nothing. Somehow the bottom area of the start div is transparent, so it is covering those links and making them unclickable even though you can't even see it. The easiest way to fix this would probably be getting rid of that transparent part. The easiest way to fix this would be to get rid of that transparent part, which is coming from the div with id="enter_btn_wrapper". The div is currently set to have a height of 500px and a width of 300px, which makes it come down right in the middle of the page over your content. It doesn't cover everything; notice how you can still click links that are farther down the page or far to one side with no problem.
Seeing as all this div does is provide a handle for you to position the actual div with the button as its background 75px about it, you can set its height to 0px and be good to go.
Related
Not sure if this is the appropriate place to ask this, if not, where? It is a code question, but the code is on a website and hard to paste here.
I'm looking at M&S's mobile site, and their slide in menu system to be specific. If you go to http://www.marksandspencer.com in Chrome, open the dev tools and use the device toolbar, it should display as if on a mobile device.
The menu is series of div's inside a nav. The div's are position: absolute;, but somehow the content doesn't get cut off at the bottom, the page expands to the height of the menu, even when it's way past the bottom of the footer.
Obviously positioning an element absolutely takes it out of the normal flow, and so would be cut off at the bottom of the footer.
Can anyone see how they've managed to achieve this..? That is, having their absolutely positioned div's not cut off. I can't see any manual setting of a height property anywhere.
Update
To see the effect, go to the home page, set the viewport width to about 500px, then open the menu, clicking on 'Men' then 'Clothing'. This leads to the menu being higher than the content of the page.
Looking at the div with classes mcp-nav-primary__submenu-container is-active you can see it's position: absolute;.
I'm not asking for someone to write code for me.
I'm asking if anyone can see how M&S have achieved this effect..?
You learn something new every day. Apparently nothing has to be done to achieve this. The window expands by itself. Note however that the height of the body and html does not expand. And if you set overflow: hidden on the body it is cut off as you expected.
See this fiddle: https://jsfiddle.net/uhqtk13a/
I have a div that is sized by placing left:260px to make it stay to the right of the menu bar, as seen in Before. but once the user try to highlight something, it went to the right with 260px extra. It is sized for responsiveness so I use 100% but can't get a right percentage to prevent that from happened. Any idea how can I fix that? Preferably CSS directly, not calc or jquery. thanks
I have a DIV that pops up in a set position via a jQuery function when you mouse over an image, there are quite a few of these vertically (say 1800px in total height)
The problem is that if i go down to the bottom of the page and mousover, the div appears too far up (out of the browser).
How can i get that div to not flow off the op of the page? IE stick to the top, instead of going off>
I think you're wanting to position it relative to the view port and not the page, is that correct?
If so, you need to use position:static on your element.
I'm new here so forgive if anything sound very noobish.
I'm busy making a personal website and have two divs inside a wrapper, a content div and a sidepane div. their height is set on 99% and they overflow on auto. I want the page to not scroll (unless they make the screen smaller) but the divs must scroll.
The Problem: I want to have the bottom text of the divs to fade away so that when you scroll down the div it brings the text to normal. I could use a gradient image or just CSS if someone could lead me in the right direction. I'm struggling with this cause of the overflow. I want to know how one could keep the gradient at an absolute position at the bottom of the div, but now its not really at the bottom of the div if you get what I'm saying? Because the div has overflow on. I want it at the position where the div ends on the screen, but not where the text ends. I tried putting my code in
Here's a pic
If you check the right div, I want the bottom to be faded and as I scroll the gradient stays there at the bottom. (which is not actually the bottom of the div) - also need to be able to resize page and it stays in same position.
The key is background-position: fixed;
I have created a little fiddle for you to see what i mean: Click me
I just hope i understood your problem correctly without any code and just a screenshot ;)
Also for CSS gradients see here
I have created a div with an image inside. When clicked it resizes the div and places a larger image in. The side effect of this seems to be that the wrapper div moves a little to the left.
I have tried a few things but here is the code. Hope you can help.
http://jsfiddle.net/iamjasonlucchesi/3FuJ6/2/
Please make sure you can see the margin between the body and the Wrapper before testing the code.
Also note images dont work as I have not put them in.
The problem is a Horizontal Jump, caused by no scroll bar being displayed in some browsers.
The link below is how to solve it.
http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/