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.
Related
I hope what I try is not impossible.
Let me explain first: I have a responsive design which requires a background to be fixed under some situations (media query blocks). The design in question is this one:
http://think-open.at/fileadmin/templates/responsive/content.html
Basically there are two media queries: one for the maximal height and one for the minimal width. If there is enough viewport height there is a scrollbar in the content area and the design height is fixed. But if the viewport is not large enough for showing the predefined height the height-mediaquery removes the scrollbar from the inner div so there won't be two nested scrolling containers (body + div) and sets the content area to height: auto.
There is also a responsive media query if the viewport is too narrow but this works flawless.
Now the problem: When the design switches to the mode where the whole page scrolls (below 830px height) I would like to position the image in the right container "fixed" so it does not scroll out of the viewport. But then the problem arises, that I can't really position the background in regards to the container div as "fixed" positions an background image in regard to the viewport. I have created a CSS fiddle here:
http://dabblet.com/gist/ae5c3598e1465ce0c90e
If you change the width you notice the problem. I would like to have the right border of the image aligned with the right border of the green box.
Is this somehow possible? I have no problem using calc() as there will be a condition in my CMS to use the plain old-school design if an older browser gets detected.
I solved it myself now. Sorry for posting.
The trick was: As my design is centered, I started to try using calc(50% + somepixelvalue). This did the job.
I adjusted the CSS playground:
http://dabblet.com/gist/5b63553f47a81f3bb701
Now the image is always up in line with the right border of the green area. When scaling there is sometimes a 1pixel difference but this doesn't matter as the background will get assigned to some container element which acts as mask.
I am trying to create a sticky footer on a custom WordPress theme. I have looked at many online tutorials with no success.
It does not seem to be working responsively, it sticks, but as soon as I re-size the browser the height increases.
The footer needs to be responsive but also stick to the bottom of the page regardless of content size.
The website in question is:
http://shopexample.co.uk/
Would really appreciate some help on this one.
Thanks :)
The problem is not your footer expanding, it is related to image dimensions and body.
When you resize your browser (smaller), the background-images' size adapts to the viewport's width, not its height. That means that at a certain point, the image doesn't vertically fit the viewport anymore.
Then what is visible is the background-color of your body.custom-background, which is, coincidentally, exactly the same color as your footer's background (background-color: #cccccc;).
You can change the background-color of your body to distinguish it from the footer. You cannot resize the image to full-browser width AND height simultaneously without distortions.
Sticky footers: I noticed your footer & its wrapper are not positioned fixed or relative, which is the common approach for sticky footers. Then position it with the bottom property.
Fixed position:
will stick to bottom
will not scroll
will always be visible
Relative position:
will stick to bottom
will scroll
will only be visible on reaching page bottom
Check the working copy of your fiddle here http://jsfiddle.net/Mohinder/Yj6gu/
Problem was with headerwrap which was not closed where it should be and with body height.
Ok I have a problem where one div's margin doesn't appear to stay relative to the previous div as the browser window re-sizes (height not width). This creates the problem where content overlaps as shown when in a wide browser. The picture bellow shows how in a narrow screen it works fine, however in the second picture you can see how the div has moved up based on the browser being made wider (27 inch imac).
If you go to: http://creativeabyss.co.uk/test/ you can see this effect for your self as you resize the window (You might need a big monitor). I cannot for the life of me figure out what is causing this, so I was wondering if any of you could help? The code should be available at the aforementioned link.
p.s I have set the background of one div to blue which illustrates that it is the size of this div which appears to be causing the issue...
Your problem is the fixed height on #OuterMenu. It is set to 300px, when you resize the browser window, the height of the content inside #OuterMenu decreases, but #OuterMenu is still 300px high, this causes some empty white-space to be displayed before the content which is rendered below it. Getting rid of the fixed height on #OuterMenu will fix this. It breaks on high resolutions because then the content inside #OuterMenu will be too high for its containing div which is only 300px high. In this case it will look like the content below this div is rendering over the top of the content inside #OuterMenu, but in fact it is the 300px height set on #OuterMenu which is limiting the space allowed for #OuterMenu to render its content within.
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
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/