I'm trying to get rid of the scrollbar for this website. The problem is, there is a scrollbar even though there is no visible content on the bottom. I tried body/html margin:0 but it didnt work. Any idea what I'm doing wrong?
There are two scrollbars, i need the main one (on the right) to behave normally, show only when it is actually needed.
I dont want to use overflow:hidden, because on smaller devices i need the scrollbar.
It could be due to the sizing of your background image. Try resizing it.
Related
This is an example of the effect I'm trying to acheive only without using images.
I want to create these screens that take up the entire screen like in the example. But instead of using background images to keep the content position, I'd like to use any HTML content within these screens. I'd also like to eventually ad a parallax effect similar to this.
So let's break it down. I got these background images on these screen elements. The background is fixed so it stays in the same position when you scroll. When you scroll down, the element moves out of view and another comes into view. It gives this effect as though the scrolling is causing a cover to slide up and reveal another screen. I want to keep this effect only without using background images. So I'll need some way to have some content remain fixed and have a contain hide it when it overflows an element that isn't fixed. But, as far as I know, there's no way to do this with CSS alone, am I wrong?
Like I said above, it would be interesting to have the content not remain exactly fixed, but instead slightly move it as you scroll giving it a slightly parallax effect. In order to do that tho, I'll need to use JavaScript. But, that's a bit out of the scope of my question, but I'd like to keep this in mind when coming up with the solution.
Thanks for all help in advance!
This will sound very "noob", but I'm new to HTML/javascript/php, and so far I've been having a blast discovering new stuff. Right now though, I'm having a minor problem.
I'm trying to make a UI with lots of buttons (it's a matrix of buttons, 5x24). When the browser is maximized, it's all good, the buttons are where they're supposed to be. But when the browser is adjusted so that it becomes narrower (width becomes smaller), the buttons try to remain visible by moving on top of each other.
I want to know how to make it so that a horizontal scroll bar automatically appears.
I've tried putting everything in a <body> tag and putting style="width:100%;overflow:scroll;" but the buttons still do what they do, and that is, ending up on top of each other when they're supposed to be side by side...
Thank you very much!!!
The problem is, width: 100% means the full width of the parent element. Give your container the necessary width (in px, not %) to accomodate all your buttons. Than put that in a div with overflow: auto, and it should work.
I found a strange bug in Firefox. I've tested it in Chrome too, but didn't happened..
I'm using a background object. It's a div with fixed position and 1920*1050 sized. I need this, because I want my site compatible with every resolutions. Smaller resolution hide the big part of the background, but full HD users can see the whole background.
If I use absolute position for this div, my browser give me horizontal scrolling ability. I can hide it with hidden overflow, but I can't disable the scrolling ability. With fixed position the browsers doesn't "see" the whole object, and it's equal to disabled horizontal scrolling.
If anybody have any other solutions I would be very grateful for it.
The problem with this solution, is this:
You can see the difference between the two. It's the same text styling, but no anti-aliasing on fixed one. With smaller font-size it's really annoying.
Anybody met this bug in the past? How could I fix it, or any other solution for background image?
Update
Okay, I deleted the div, and added background for my body tag, with fixed attribute, and happens the same...
background-attachment: fixed; < Causes the same problem
Not quite sure what your background is supposed to be doing. But if you need a proportionally scaling background that fits all browser window sizes, you can use thisplugin and a reasonably high resolution JPG with preload on.
Remove any box-shadow property from the parent element. This worked for me.
Been struggling with this for at least a couple hours now. Tried searching around but no solution seems to be working. So anyways, I have a template that I'm working on, and the issue that I'm having is that the sidebar on the left just will not stretch all the way down! If the window is maximized, it looks totally fine. Once you resize the window though it breaks, leaving a large gap between the sidebar and the footer. It also breaks if the content goes down the page any more than it currently does...
See for yourself here: http://bakedcraft.ca/laboratory/testsites/crock/template.html
and the css: http://bakedcraft.ca/laboratory/testsites/crock/css/default.css
Any ideas?
Add position:relative to your .main class
right now your side bar is 100% height of the window, not the main container. by adding position:relative to the sidebar's parent, when the sidebar is 100% height, it becomes 100% of the main div.
Sorry, this isn't really an answer but it's not letting me write a comment...
I looked at your code in firebug (firefox + web developer add-on) and it's showing a box constraint of 467px height I tried to quickly find where this 467px are coming from but can't see it with quick look (it's 4 AM). It's inheriting that height from somewhere, most likely from a combination of other size constraints of related elements. With all the positioning you have going on, in may be hard to locate.
One suggestion I have is if you plan on making a fluid layout you should work with em's rather than straight pixels. As I said, this isn't an answer but I did notice the size constraint of your sidebar. If this problem is still open in the morning I'll see if I can get a better look at it for you.
Alright I was running your problem through my head and I think I figured it out. Forgive me cuz I'm typing this on my phone and can't use firebug to verify if I'm right or not but the constraint I noticed earlier of 467px is n't inherited from another container it's being constained by the text in the sidebar div. If u were to add more text the box will grow with it. I believe what u may want to do is make a child conatiner within the side bar div. Your main sidebar div will only house your grey background color grey. Create a child div within the sidebar div and put your text and images into those. Make sure on the parent div you make it's height 100%. The height of the elements inside the child div shouldn't need height specifications since they will be inherited from the parent sidebar div. Hope this makes sense.
You can do the fix mentioned earlier with using jquery but remember if someone shuts of their JavaScript then your issue remains and your page will break. You should try to find and fix the root cause not use a bandaid that can be taken off.
I have a fixed-width content area using margin:0 auto to keep it centered and a repeating background that fills the whole page. Nothing should cause the browser to use a horizontal scrollbar, unless the browser is less than browser is less than the fixed-width content. In IE however, a horizontal scrollbar is present and allows me to scroll slightly to the right which displays a 'gap' that appears to be the width of the vertical scrollbar. Curious as to why this is happening.
I have searched far and wide and found people with similar problems, but most discussion is regarding tables or other specific elements causing the problem that are not present on my page.
See link for example, open in IE8 and scroll right. Any help is appreciated.
http://finchsbrasserie.com/test_new_site/
Why don't you set the div css propety as overflow-x:hidden