I have a problem with an overlay.
My code is here: jsfiddle
The main problem is in line 59 of the CSS I think.
max-height:auto;
If so, the content just flows over the overlay. If I set the height to a specific one like
max-heigt:250px;
everything is fine and the overlay keeps a size and the scrollbar appears. Even set it to 100% doesn't help.
How is it possible to set the size relative to its parent div? With width it works fine this way, but not for the height. I tried with several classes and answers I found here, but either I have to fix the size or the content flows over the overlay. I want to use a relative size so it works with the most desktop resolutions, and don't fix the size. Any solutions that will work?
Might not be exactly what you want but if you specify a specific height on both elements it seems to work fine. I suggest you just rename max-height to height:
CSS
.overlay {
...
height: 80%;
...
}
#OverlayContent {
...
height: calc(100% - 20px); /* subtract padding or use box-sizing */
...
}
See jsFiddle
Adding overflow-y: scroll; to the .overlay class will give you a scroll bar and clip the text outside of the container
Related
Is there a way to prevent scrollbar from pushing content, or the entire page to the left with pure css?
I mean no hacks or anything.
I tried two javascript solutions:
1) Set body to overflow hidden, store the body.offsetWidth in a variable, then overflow visible and then subtract that offsetWidth with the current body.offsetWidth and apply the difference to the right margin.
2) Calculate the offsetWidth and apply it on the wrapper div on every resize.
What didnt work:
1) Position absolute.
2) Floating everything to the left was a bad idea.
3) Leaving the scrollbar visible (Looks bad).
4) Overflow-y hidden makes things user unfriendly.
There are a lot of ways to go around this issue though normally you won't mind a little push to the left:
Give overflow-y: scroll to body and make sure always there is a scrollbar.
Make use of the fact that viewport width includes the scrollbar while percentages do not account for it:
a. Giving width: 100vw to body element, or
b. Giving margin-left: calc(100vw - 100%) to the html element so that scrollbar or not, you have a fixed area to work on.
There is even a deprecated overflow: overlay property that draws over the page instead of shifting it to the left.
Just give your body a width of 100vw like this:
body{
width: 100vw;
}
Even though all the answers above are correct, I stumbled upon this issue and I had to come up with another solution.
Since my content width takes up the whole page and it has some properties to justify in the center, it was being pushed to the left and these options didn't prevent it from happening.
What fixed the problem for me was to add a padding of the size of the scroll when the scroll is added on hover.
I tested on Chrome and Edge. It's not a perfect fix but it is enough for what I need right now.
.scrollable {
width: 100%;
height: 91vh;
overflow: hidden;
padding: 0px !important;
}
.scrollable:hover {
width: 100%;
height: 91vh;
overflow-y: auto;
padding-left: 16.8px !important;
}
Unfortunately there is no other way to prevent your problem.
Just use
body {
overflow:hidden;
}
As an alternative, I recommend you to use a Framework for custom scroll bars. Or disable the scrollbar as shown in the above snippet and emulate it with an absolute positioned and some JS.
Of course you will have to consider calculating the height of the page and the offset of the scrollbar thumb.
I hope that helps.
To disable the horizontal scrollbar, you can use overflow-x, so it won't affect your vertical scroll:
body {
overflow-x: hidden;
}
Just set overflow-x to hidden on the element that has the scrollbar (usually this would be the body or the immediate children of it).
I had the same problem on my nextjs app which already had overflow-x set to hidden on the body. The below solution worked for me
#__next{
overflow-x: hidden;
}
I want to create a page with vertically centered content (I'm using this method). I need to use two different page backgrounds. One is assigned to html tag and the other one to the body tag (it doesn't matter if I'll create div's instead). The first one is a background picture (full width & height of the view port, fixed, no-repeat) and the other one is just a pattern, intended to overlay the picture (repeat). I tried to use CSS3's multiple backgrounds for this case, but it didn't worked as I intended.
The problem is that when the content exceeds the view port, the body's background covers only the height of the view port. The solution for this is quite simple:
body { min-height: 100%; }
But it comes with a serious drawback. If I set the min-height value while the content doesn't exceed the view port, it won't be vertically centered.
I created a fiddle to help you better understand my problem. Don't mind the JavaScript as it does not play any role in this case. I used 1x1 px background images as an example.
Try to toggle the content's height while the body's height is set to 100% and scroll down. You will see what I'm talking about. You can fix that by toggling the body's height, but as soon as you toggle the content's height back to auto it won't be centered vertically any more.
I want the body's background to cover the full page height and have the content positioned in the middle no matter if the content fits in the view port or not. I've tried to achieve that for several hours and I failed, so maybe some of you know something that I don't and could help me with that.
Here is what I came up with:JSFiddle
I avoided your problem by making the .block div the size of your screen by fixed positioning. After this I used the .block div to scroll the elements inside. Hope this solves your problem ;).
.block {/*made .block fullscreen size so you cannot scroll the page anymore, but scroll this div instead*/
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
overflow-y: auto;
If you don not need < IE9 support, you can use transforms to do that.
http://jsfiddle.net/0tgvrw3k/1/
Basically you don't need the .block and make the vertical alignment using top, left, and transform. You need position: fixed;, as position: absolute; will make the viewport scroll.
Please do not forget to prefix the transform with -webkit-, -moz-, -ms- and -o-
At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy
I have set up some background div's to theme a blog I am making. I am using 3 colors for the heading, a grey background, and I am wanting to add a texture to the background. I have the semi transparent image I want to tile, but I am not sure of the best way to have this work. I do NOT want position: fixed; on the div containing the image, so that it will move as you scroll.
Example code:
http://jsfiddle.net/YPXmT/
Is there a way to achieve this while not having scroll bars? (Note, I don't want to get rid of scrollbars, as content may require scrolling.)
Going from your example fiddle, you were most of the way there. All you have to do is make your backgroundTexture div height and width 100% instead of the static pixel values you used:
#backtexture {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
background : url('http://static.tumblr.com/wyzt2fm/Hq8mhgfry/hp_asset_diagonalline.png');
}
MORE SIMPLE UPDATE:
Simplicity is best most times.
All you should need to do is add:
body{
position: relative
}
Don't bother making the container div and rearranging the elements as below, just making the body's position relative should fix this for you.
UPDATE: (Use update above, keeping this for posterity)
As per the comments below, with the code above any content that makes the window scroll beyond the visible space will not include the background. This is because the div is set to position: absolute and height/width: 100%. The div is getting sized to the size of the viewable space, but any content that extends beyond that will cause the background div to look like it has stopped. To fix this problem you just need to tweak your HTML and CSS a little bit more. Instead of the CSS above use:
#backtexture {
width: 100%;
height: 100%;
background : url('http://static.tumblr.com/wyzt2fm/Hq8mhgfry/hp_asset_diagonalline.png');
}
Notice we removed the position:absolute and overflow:hidden. Next we change the HTML so that the background isn't just an empty div placed on the page, but instead used as a container for all other elements on the page:
<div id="backtexture">
<div id="redtop"></div>
<div id="orangetop"></div>
<div id="yellowtop"></div>
<div id="wrapper">
</div>
And that should do it.
Forked fiddle: http://jsfiddle.net/digthedoug/pVxSq/
Today I came across a very nasty problem, I need to make the front-end layout for a website and it has a certain design element on the page that puzzled (even) me.
Now I am not exactly unfamiliar with html, css positioning, making layouts etc, so please don't make 'guesses' as to how I could solve it. I want a working example.
Here is a jsfiddle with my code and problem:
http://jsfiddle.net/sg3s/A9vzA/ http://jsfiddle.net/sg3s/A9vzA/15/
What is currently happening;
The #container has a min-height of 100% (red background) width of 970px. This is the width the page must have as a minimum. The #top (lightbrown background) div is irrelevant for the problem but part of the design.
The problem lies in #header (purple background) which currently has a width of 1022px (too wide for 1024px resolution + a scrollbar, even with a maximized window) and a negative left margin to keep it centered on the container, which is what needs to happen. When the width of the screen width falls below 1022px a horizontal scrollbar apears as the thinnest element on the page is 1022px wide. (its behaviour is the same with position absolute and a negative left offset)
What I want to have happening;
I want the 'overflow' of #header over #container to dissapear into the sides and only get a scroll bar as the viewport gets below 970px wide. (If someone can rephrase this )
Let me be a little bit clearer on this:
The 100% height layout needs to stay and be compatible with IE7+
The header needs to be centered over the container, this is the reason it is inside it in my example but be my guest to take it out if that solves the problem.
My example looks and acts correct as long as the viewport is large enough to accomedate the header.
The trick is to make it look and act the same while the sides of header overflow into the sides of the viewport when the viewport is too slim to fit that header.
Updated the example to make the change / centring a bit more obvious.
If possible I want the layout to support all the way down to IE6 though IE7+ will be fine. The final page will prompt to install Chrome Frame anyway. And ofcourse don't forget about Chrome, FF 3.5+.. (Opera?). Use of JS will not be acceptable, unless you can convince me that there is absolutely no other way, but jQuery will be present on the page.
Thank you for at least trying! (Challenge yourself! :D)
This code worked for me in FF/Chrome/Safari/Opera. Can't test in IE because I'm on Mac now, but must work in IE 7+
Example: http://jsfiddle.net/XVraD/3/
Base idea is to wrap #header in another container with "width: 100%; min-width: 970px;" and place in outside of #container, so it will do all the overflow to you.
EDIT 2: Solution that works in IE6: http://jsfiddle.net/XVraD/9/
EDIT 3: This version is fixed to have height 100% in modern browsers and old IE's: http://jsfiddle.net/XVraD/9/
It is a hard one, the only real solution I can come up with is this that you use Media queries like this:
#media all and (min-width: 970px) {
body, html {
overflow-x: hidden;
}
}
It is not supported by old browsers, there you would need a Javascript!
As far as I can tell, the best solution would be to restructure your HTML to put your header outside of the container.
<div class="outer">
<div class="header">
...
</div>
<div class="container">
...
</div>
</div>
CSS:
.outer { ... }
.header {
max-width: 1022px;
min-width: 970px;
margin: 0 auto; }
.container {
width: 970px;
margin: 0 auto; }
Demo: http://jsfiddle.net/Wexcode/tJXHF/
http://jsfiddle.net/QrVJJ/
#header is positioned outside and above (with z-index) #top. It also gets margin: 0 auto; and the background is positioned top center with min-width:970px and max-width:1022px.
#header {
margin: 0 auto;
z-index:5;
min-width: 970px;
max-width: 1022px;
height: 201px;
background: #390419;
overflow:hidden;
background: transparent url(http://4.bp.blogspot.com/_rScBRKlTdoE/TC6rNWAyD9I/AAAAAAABOTo/BWkJH9ymovo/s1600/IMG_9692.jpg) no-repeat top center;
}
How about setting the header to have a min-width of 970px and a max-width of 1022px? There are ie hacks to make min and max width work. This would make make scrollbars appear after the viewport shrinks to below 970 and as you stretch the viewport the header would grow up until 1022 after which it would stay 1022.
Having this one in Chrome.
http://jsfiddle.net/A9vzA/10/
Put an inner div inside the #header
The header has position relative and no float and with 970px
The inner div has position fixed and width 1022px and margin 0 -26px
--edit
but doesnot work in IE7
--edit
this works in IE7, too http://jsfiddle.net/A9vzA/11/ just add another inner div
The first inner div is position fixed and width 100% and text-align center
The second inner div is margin 0 auto and width 1022px
Can anyone test it in IE6
--edit
nope doesnot work if you got content in your #container. position fixed is no option
Is this what you're after:
http://jsfiddle.net/HbxTQ/8/
Fullscreen:
http://jsfiddle.net/HbxTQ/8/embedded/result/
(I've not yet made it cross-browser, only tested it in Chrome. What to ensure I have the idea right first.)
sg3s, you sound like a tough customer but I thought I'd throw my hat in the ring. None of us understands exactly what you need so please post the flattened design.
My assumption is that you need one or two layers with adjustable width behind a fixed 960px content container. Using float on adjustable width containers is going to make it nearly impossible to do what you want. Instead, use postion: absolute for a container holder (a.k.a. wrapper) and position: relative for the inner content containers. No Javascript is necessary.
My recommendation is removing #header from the primary #content container and separating the background image from the #header so they can be rendered and positioned independently.
http://jsfiddle.net/dylanvalade/ZcejP/