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
Related
I am trying to keep an element horizontally and vertically centered while it grows inside a container, but while also allowing you to scroll and see the rest of the growing element. I made a codepen that demonstrates my problem.
I am using transformX and transformY while also using position:absolute with left and right set to 50% as well. The goal is that when you click the grow button, you should be able to scroll up, down left and right and see the whole image. Currently something with the transform seems to be preventing you from getting back to the top and the far left of the image. Any ideas?
CodePen
EDIT
I am using flexbox instead now, but still have the same problem. Its visible in the updated CodePen.
On my site, I've created a flex box which fills the whole window. It has a width of 100% and a height of 100vh. I've placed a text and a button in the center of it. Now I want to add a footer to the page. If I place the footer under the div (flexbox) It'll only show up if I scroll down a little bit. So can I create another div inside the flexbox which will place it's items in the lower right corner of the page?
Without code it is hard to help but maybe try in the css float:right
While zooming the Web Page the DIV element will not Zoom, but the component placed inside the DIV is zooming and go out side of the DIV. Here I created a test fiddle test fiddle. Please help me to resolve this issue.
Your Div is taking up 50% of available space, irrespective of whats inside. The rest of the space is being left as margin.
For example if you zoom out from 100% (zoom out, not in). You can see that the contents will keep on getting small, but the width of the div will increase.
If you care about zoom-out/zoom-in looks, then use pixels instead of percentage.
Try it out over here: http://jsfiddle.net/fam46/1/
I'm trying to add some decorative flourishes on a page footer with :after pseudo-element.
The problem is that depending on my css code the decorative flourish element(fixed size, uses background image) either gets clipped by the footer or ends up extending the page height and adds vertical scroll bars.
What I need is the decorative element to start at the footer top border(in other words where the page content ends) and clip at page bottom(or if screen space allows, don't clip at all).
I'm able to provide a link to the code later if my question isn't clear enough.
EDIT: In other words, I'd like to know if there is any sane way to prevent vertical scrollbars from appearing when the bottom edge of a specific absolutely positioned element goes over the page bottom.
EDIT2: The site is currently available at http://www.ikimark.fi/ikimark_uusi/site
The decoration in question is the right bottom corner flourish image. I'm editing the site today so the code may change.
Please provide a link to your project and try using position:absolute;z-index:9999;
EDIT:
well I'm still confused about exactly what you are asking for. If you want flourish image not to cover too much space below the contents and fill up the total height of the footer only then please add overflow: hidden; at your wrap div. And if you don't want this then please can you explain?
Try setting an absolute height on the bottom div with overflow-y: hidden as follows:
<div id="footer" style="height: 4em; overflow-y: hidden"></div>
I have a div that is positioned:absolute, this div extends outside the bounds of my site wrapper as it just contains a background image for a slider and doesn't need to be seen all the time. The problem is I cannot work out how to stop this div triggering the scrollbar. I have tried different combinations of overflow and position and cannot work it out.
If you inspect the element with firebug, just place it over the shadow behind the slider and you will see the div in question. You notice the scrollbar kicks in as soon as the browser bounds touches it.
View link
Can anyone let me know how to stop the scrollbar appearing for the shadow div?
Cheers
Nik
It is the size of the DIV. When I inspect it using Chrome, the CSS shows that the container DIV was set to 520px width and the problematic DIV was set to 733px, so it actually exceeds the 980px width center area. Unless you want the shadow to disappear, I suggest moving it a bit to the left and make the div left to it smaller.
You can use the CSS overflow-x:hidden on the body element.
Other more complicated way that comes to mind is using jQuery to detect the size of the window and resize the problematic div according to the window's size.
Firstly, thanks to those that commented.
I have come up with a solution that allows me to keep the layout the same while still adhering to the document width. What I did was create a #wrap2 inside the main wrapper which has a width of 100% (full width of browser window).
#wrap2 {background: url(../css_img/slider-bg.png) no-repeat center 317px; }
The trick to this was making sure the image position was set to center. This means the image would also remain relative to the content when resizing the browser. The way I made the shadow line up behind the slider was to add blank pixels to the left, so the image ended up being about 1200px wide, this pushed shadow part right. Because it's all blank pixels it only added about 1kb. If someone thinks there is a better solution let me know.