I'm making a website with a large image at the top that extends past the far right of the page. The problem is that the browser keeps adding a horizontal scroll bar to allow the user to scroll to the end of this image but I don;t want it to do that.
Is there any way I can tell the browser to treat the image a bit like a background image or to simply stop scrolling after 940px?
http://www.electric-drumkit.com/404.php
There's an example of the page so you can get a better idea of what I mean.
The way to do it here is to:
Add a new div (or other relevant HTML5 tag if you prefer): <div id="wrapper">, containing everything inside body.
Move these rules from body to #wrapper:
margin: 0 auto;
position: relative;
width: 960px;
Add this new CSS:
body {
min-width: 960px;
overflow: hidden;
}
Add this to get horizontal scrolling back when the window is less than 960px wide:
html {
overflow: auto;
}
Here's a live demo so you can quickly see if my answer will have the desired effect.
Tested in Firefox, Chrome, IE8.
Put the image into a div like this:
<div class="image"></div>
And in CSS you can write:
.image {background: url(http://www.electric-drumkit.com/_images/_feat/404.png) bottom right no-repeat; height: 314px;}
In this way, your div will render the image as a background, into a div, and i think there will be no scrolling.
Related
I'm making a website using fullPage.js, On the second page (or equivalently, second section) I want to achieve a very simple layout where I have a header fixed on top of the page displaying an image which should be responsive, or decreases in size as the window shrinks but stays at the top.
Currently, I'm wrapping the image to be displayed in a div. I then scale the div fullscreen using,
.post-header {
background: #22BDA0;
max-width: 100%;
height: auto;
}
The img tag inside of the div has a class header-image which I style as,
.post-header .header-image {
max-width: 100%;
height: auto;
margin: 0;
}
However, I'm not getting the desired result. There is a small space on top of the second page which I can't get rid of. You can see the website I'm making along with the source code HERE. Just scroll down to second page, or click Personal Details on the homepage.
Thanks a lot for the help!
What if you just give height:100%; to .section2-container? Will it solve your issue?
Remove display: table-cell; from .fp-tableCell and the padding disappears. Does this need to have display set to table-cell?
fullPage.js has an option: verticalCentered that can be set to false. This seems like a good solution, since the alternative means always trying to ensure that the content of the containing element is always 100%.
I have a problem, i am making a website for a friend and he wanted a horizontale one page website,
but i have a problem, i want to create it like this that you can scroll the page vertical if the page is longer then the screen, BUT i want the scrollbar IN the div and not over the whole body content.
I created a image quickly what i mean with the scrollbar.
and on this moment if had did it over the whole body all the other pages got the same height if one page was longer then the other one.
Image:
Live example: http://onepage.ringocontent.com/
The live example is how i described it above about that all the pages get the same height if only one page get a overflow with the height.
Adding this to your stylesheet should solve the problem:
<style>
#home, #blog, #info, #contact {
overflow-y: scroll;
height: 500px;
}
#page {
height: auto;
}
</style>
I think what you are looking for here is the overflow property of an element. Particularly overflow-y.
If you apply
overflow-y: auto;
To the #page div then you will get a scroll bar inside of that div if and only if you have content inside of it that overflows the height of the div.
If you are seeing a scroll bar on the right hand side of the page then you have the div #page height set too tall, try reducing the height on that div until that scroll bar goes away.
I am currently building a website for Bearskin Group ....
The site is pretty much done, I am creating it with the GoDaddy online builder....
BUT - I have this stupid horizontal bar scroll coming up that id like to diasble...
I have tried using:
style="overflow-x: hidden"
&
div {
overflow-x:hidden;
overflow-y:hidden;
}
Can anyone help me remove this?
Thanks
Dan
This is because you are using huge width.
#wsb-element-233156931 .wsb-image-inner div {
height: 60px;
overflow: hidden;
position: relative;
width: 2904px; /*remove it*/
}
or
change overflow:auto to overflow:hidden in class wsb-canvas-page-container
Also I noticed you are using image (check below), can't you remove the image or use a background-color to fill the color.
<div class="customStyle"><img style="width:2904px;height:60px;" alt="" src="//nebula.wsimg.com/b7fd20f21ba2c36e5ef9f39ea2613e8e?AccessKeyId=D238BA178C5B0342ADD7&disposition=0&alloworigin=1"></div>
I ran into the same problem. It turned out to be an element that was sticking out with an invisible box. You can define page restrictions but if a shape, text box or element is protruding into the edges it automatically overrides your restrictions and creates more room. Eliminating these should shrink your page back down to normal and eliminate the horizontal scroll.
I'm trying to add a box on a web page that stays on screen at all times. The HTML looks like this:
<div class="mySideBar"> <!-- Some text and other elements --> </div>
The styles being applied look like this:
.mySideBar { position: fixed; width: 20%; height: 80%; overflow-y: scroll; }
That works nicely until I re-size my window then the down button on the scroll bar disappears offscreen and underneath my footer. The Footer HTML looks like this:
<div class="myFooter"> <!-- Some text and other elements --> </div>
The CSS looks like this:
.myFooter { position: fixed; width: 100%; height: 24px; overflow-y: scroll; }
I've tried playing with position relative and a few other things but I can't seem to get it right. It needs to work in IE7 too unfortunately and I'm afraid I can only post obfuscated snippets that display my problem. Is there something I've obviously missed?
I found an answer myself after I went away and came back to it today. Sorry I didn't get back to those that left comments but I couldn't get online. If you use bottom with a value set to 24px, the height of the footer, the overflow scroll bar will stay put.
On this site I have an auto-resizing BG but I wanted a fixed black bar at the bottom of the page.
The site looks fine when the browser is maximized but when you scale the window down and scroll down the black bar almost completely gone and it looks messed up. It is not positioning correctly.
I have tried a few things but can't figure out a solution to this. Does anybody have any ideas how I should go about this? (Maybe I am missing 1 little thing or maybe I need to start over from scratch, either way please help!)
Note: the auto size background is in the html tag and the black bottom bar is in its own separate div tag "#black_bottom"
http://graves-incorporated.com/test_sites/gm_2012/
Just remove height:100% from #black_bottom make the absolute:position div height auto.
You have everything wrapped incorrectly I believe. Why does your <div id="black_bottom> contain everything from your wrapper to your <div id="footer_wrap">?
Ok, so I think I see what you're going for now. If my understanding is correct, you want the gradient background to extend to about 70-73px above the bottom edge of your content box, where it meets the solid gray bar which extends to the bottom of the window, or just below that bottom circular G emblem, whichever is lower. I've accomplished this by removing the #black_bottom element entirely, setting a solid gray background color for the html element to match the color of your bottom bar graphic, and applied the circular gradient background to the body element. I've also removed the explicitly-defined height from #wrapper, and given it a negative margin-bottom to allow the black bar to underlap it. The styles I replaced are listed below. Hopefully this is closer to what you're after:
html {
background: #333;
}
body {
background: url(http://graves-incorporated.com/test_sites/gm_2012/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
}
#wrapper {
width: 960px;
margin: 0 auto -136px;
top: 20px;
position: relative;
}