So I am working on a site and I having an issue. The scrollbar seems to extend passed the window. I cant see the bottom arrow even with max res. It is even worse when I resize the window. The main problem with this is that I can see my footer, but for some users with smaller screen resolutions cant. Here is my css:
body {
display:block;
margin:0;
color:black;
width:100%;
height:100%;
overflow:scroll; }
Here are screens of what I am talking about:
full res: fullres
Resized window: resized
Any help is appreciated.
remove the overflow:scroll; from your body and put it on the specific div where you want the scroll to be
So your body css
body
{
display:block;
margin:0;
color:black;
width:100%;
height:100%;
}
Are you using any position absolute or fixed in your code ? i dont see it as a problem just this short code. I would prefer "auto" over "scroll" for overflow property.
Related
I have a menu that slides in from offscreen. There's no horizontal scrollbar showing, but you can still slide the screen manually (in IE and Chrome, not Firefox) and see the offscreen div in the horizontal overflow. Obviously, I really want it hidden.
A simple example (without the javascript to make the offscreen div slide in) can be seen here and below:
<div id="maintext">I'd like the footer to display below, but the offscreen div to the left to not be visible by scrolling.</div>
<div id="footer"></div>
<div id="offscreen"></div>
body{
overflow-x:hidden;
}
#footer{
position:absolute;
top:1000px;
width:100%;
height:10px;
background-color:#000000;
}
#offscreen{
position:absolute;
width:100%;
height:100%;
z-index:1200;
background-color:#000000;
right:-100%;
top:0;
}
How can I ensure the user cannot manually move the page horizontally? overflow-x:hidden on the body (or a wrapper div) doesn't work... Seems to be the vertical scroll that's causing the problem.
This can be solved creating a div wrapper inside of your body and applying overflow-x:hidden; to it.
Check this working fiddle (try to scroll it).
.wrapper {
overflow-x:hidden;
}
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::UPDATE:::::::::::::::::::::::::::::::::::::::::::::::::::::::
I've applied a simple update (via jQuery) of what i'm trying to accomplish here:
http://jsfiddle.net/3mJPy/
$( window ).resize(function() {
$('#gallery li').each(function() {
$(this).width($(this).find('img').width());
});
});
As you can see, this demonstrates the initial request, notice the horizontal scrollbar size adjustment as well, this is perfect as i intend on using this as a horizontal scroller. However, the issue remains now that we can't scale back to large since the containers now have sizes applied to them.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::/ UPDATE::::::::::::::::::::::::::::::::::::::::::::::::::::::::
What I'd like to do is have a <ul> take up a percentage of the page height, so that when a user resizes the browser vertically it's contents (images) will scale. I'd like to keep images proportionate, and pushed to the left.
The problem I'm running into is that when resized vertically, the <li> seem to keep their initial size so that when scaled, there is now a gap between the image and it's container.
Test the fiddle here by grabbing the handle right above where it says "Top Area" and drag it down, you'll see the awkward spacing / gaps between the items. However, if you refresh the page (Run) with the new gaps with the browser remembering where you dragged the frame, everything looks correct.
http://jsfiddle.net/qmUHN/
Before resizing / pulling down frame:
After resizing / pulling down frame:
As per my understanding, I hope this what you are expecting:
body {
overflow-x:scroll;
}
#top {
background:yellow;
color:black;
width:100%;
height:50%;
text-align:center;
text-transform:uppercase;
}
ul#gallery {
margin:0;
height:auto;
background:orange;
display:inline-block;
width:100%;
}
ul#gallery li {
float:left;
display:block;
}
ul#gallery li img {
width:100%;
}
Working Demo
So I have a fluid layout with a min-width on the body of 960px. I have a fixed header, which works as intended, and a right-side nav bar which I want to remain fixed on the vertical scroll... this also works.
However if I resize the window to less than 960px width I would like the right hand nav bar (position:fixed) to stay to the right on the horizontal scroll instead of overlaying the content.
#mainnav {
width:20%;
height:100%;
margin-left:80%;
position:fixed;
}
#mainhead{
position:fixed;
top:0px;
left:0px;
width:100%;
height:46px;
}
#contentcontain{
margin-top:46px;
width:80%;
}
I'm sure I could do it with using JS but I was just wondering if there is a more simple way to it without JS.
Thanks,
Dom
An element with position:fixed is pulled out of the normal flow of document layout and will always sit on top, unless you give it a z-index value.
I'm redesigning my website, and at the moment I'm just blacking out the layout. I have a class that centres everything:
.centre
{
position:absolute;
left:50%;
top:50%;
}
everything is then offset using a margin.
I have a wrapper that gives the min-height and min-width
#wrapper {
position:relative;
left:0px;
top:0px;
min-height:600px;
min-width:600px;
}
The min-width and min-height both do their job but for some reason after this wrapper is applied the website is no longer centered vertically.
You can see the website here: http://testerwebby.tumblr.com/
I'm wondering what's the cause of this, and what's the solution.
Thanks,
Dillon Brannick.
Your problem is that your page's body does not fill the whole browser window vertically. You can check this by using Firebug and hovering your body element - not the whole browser window will get a blue hue.
Try to fix this with the following CSS:
html, body
{
height: 100%;
}
I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.