I put a box-shadow under a main content part. This works fine. However when scrolling, the main content is hidden behind the top parts (which have the same width as the main content parts) but the drop shadow is not. Is it somehow possible to show the shado only at thos parts where the element with the box-shadow is visible?
For illustration, here is an image
Even tho there is Code missing, I would suggest stretching the overlapping element over the window width. As the shadow is obviously not set to inset, and therefore rendered outside of the container boundaries.
Related
I have a div that has the "overflow" property set to "overlay". I have modified the scrollbar track to be transparent.
I'm able to view the background elements of the web page just fine, however, I'm encountering an issue when viewing elements inside of the div with the scrollbar. When an element goes behind the scrollbar, it doesn't render the part of the element that goes behind the scrollbar. This would make sense for a scrollbar that's not transparent (why bother wasting time rendering something that will just be covered?). However, because the scrollbar track is transparent, it should make sense to still be able to see the elements behind it.
I am re-building my website with DIVs, I want a DIV's height to adapt to the height of the browser, I can easily do that by positioning the DIV as absolute and then using "bottom-padding:0", however I need my DIV to be positioned as "relative" and therefore I can't get this result. This is my website (work in progress):
http://www.antoniofx.com/test/
As you notice, the RED box goes below the footer, I want the red box (a div) to stop where the footer is (even if I resize the browser) so that the content inside the red box will end when the browser end and then scroll if there is more content, instead of just pass the footer and going below it. I have researched this but couldn't find any solution. Thanks!
I have a tricky CSS situation which I can't seem to solve.
I'd like the top portion of the body background to be one color (white), and then fill with another color (blue) from a certain position downward (below a footer in my case), and ensure that this color always fills (bleeds) to the bottom edge of of the browser window, regardless of window size.
I tried using a small blue bitmap, specifying the starting position via background-position, then applying background-repeat: repeat-y, but it fills in both directions.
I also thought of creating a long div but this affects the canvas size -- browser adds scroll bars, mobile will render the entire size -- no good.
Any ideas? (I'm not looking for a sticky footer) Thanks!
You should just add the background property in your footer instead.
Then you add some huge padding-bottom and add a negative margin-bottom of the same amount.
Just make sure you have an outter div with overflow: hidden;
FIDDLE
I have an overlay that I created with a width of 700px and height of 500px.
The contents of it will be quite long though and so the user will have to be able to scroll up/down within the overlay.
Could I get a suggestion on how to set this up taking into consideration the fact that scroll bars vary in width in each browser?
For example if I add 15px of padding-right to the overlay wrapper, it displays great in Firefox.
The contents will fit perfectly within the div and a horizontal bar will not appear.
However in another browser, the vertical scroll bar may be 20px wide, this would cause the contents to be forced to scroll horizontally, or, if I disable overflow-x, they would be cut off by 5px on the right.
How can I get it so that, no matter the browser, when the vertical scroll bar appears, the width of the overlay wrapper adjusts so that its contents can be displayed perfectly with no horizontal scroll bar?
Overflow property sounds like what you need: overflow:scroll;? But I guess I'm not sure what your concern of the different width of scrollbars is. How is it setup that this is variable?
Or a different look at your problem, put the div with your overlay wrapper inside another div and have the new div have the scroll property, thus making it so the first directly has nothing to do with scroll bars. Ex: [link]
EDIT: Looking at example you provided, do you want something like this? Trick is like I said above putting div around everything, but instead not giving it a width and having it display:inline-block; (display) so it fits the child (but the scroll wheel stays outside of the child).
EDIT 2: Note if you need it to center on screen, you must have another parent div surrounding the inline-block, and have the inline-block text-align:center;. (example)
use max-width and jquery scrollbar plugin jscrollpane.
You can define the scrollbar width and styles for each browser, if the need it.
http://jscrollpane.kelvinluck.com/
I am designing a page on www.bookmyshirt.co.cc/hair/city.html
In main div it has two div:
1) block_header
2)main_out
but main_out is not showing grey background to all of its content rather it shows only grey background to some height i want that grey background to all of its content.
and also at bottom that button also merge with above content.
any suggestion is welcome.
main-content1 is in position absolute.. that's why main-content cant set the proper height.
Remove the position absolute an you'll see the grey background
EDIT:
your problem is that you set the heights for different divs but the content of your divs are bigger than the height you gave them (e.g .main-content, .deals) if you have a dynamic content or if you dont know the height of the div, just remove that property in the css.
To solve the problem of the register button, remove the height on .deals