I am working on a website, at the moment on a sign-up page. Its all perfect, right until i realize some very annoying. I have kinda 2 elements on this page. A sign up div, and an img, for the logo in the top. And it is not even close to fill the whole html page. But it still adds the SCROLL BARS, and i can scroll like 20 px up and down, and from side to side. Very annoying plz help
You want to add margin: 0; to your body.
It's already 100% wide, and the margin pushes the width beyond the space available on screen. This causes a vertical scrollbar, and that, in turn, causes a horizontal scrollbar.
This can be fixed in two ways
Either change the width and height of the body to auto as:
html, body {
width: auto;
height: auto;
background: #11BD83;
}
JsFiddle
Or as suggested by #Per Salbark add margin : 0 to the body
html, body {
width: 100%;
height: 100%;
margin : 0;
background: #11BD83;
}
JsFiddle
Related
I want that if people scroll over the page, the header will keep showing (logo + navigation bar). This is the css code I'm using:
#header_bar
{
margin: 0 auto;
width: 100%;
background-color: #1F1D1E;
height: 80px;
position: fixed;
top:0;
}
But this is what happens now: http://puu.sh/6FiXY.jpg
As you see the header now overlaps the image, how can I fix this? I've tried using margin-bottom / padding-bottom, but margin does nothing while padding makes the background box larger.
How can I fix this?
Supposing your HTML structure looks like
<div id="header_bar">...</div>
<div id="someOtherDiv">...</div>
Add margin-top to the next element after #header_bar
#someOtherDiv {
margin-top:80px; /* 80px because #header_bar is taking up 80px in height. */
}
demo
Since your header has a fixed position all your other elements will not take this into account. You could create a "wrapper" div for all the other content that is positioned 80px from the top. Just adding a margin or moving the element of the most top div might work too as long as it has relative (default) position.
You should be adding a margin to your content tags so that they are not instantly overlapped by the header.
See here: www.jsfiddle.net/cranavvo/5F8EP/
Im trying to markup a picture to show on the bottom right corner of the webpage.
If i set the overall width of the page to 100%
and i set the picture to float right at the bottom it makes the trick perfectly but above
the mentioned picture is a bigger width picture which is around 1600px so when you open the the page in the small window browser then the floated picture is aligned but the scrollbar apears and scrolls to the full width of the page without the floated picture..
body{width:100%;}
thepicture{width: 1289px;
height: 446px;
position:relative;
float:right;}
So the second aproach: to make the body or a wrapper div fix width that is bigger than the upper picture mentioned:
body{min-width:1600px;}
Than looks great until somebody has a bigger screen than 1600px... the float ends at 1600px;
The firs solution needs to be tweaked but i cant figure it out how, some responsive floating would be great jquery maybe?
thanks in forwards
The problem is the pearl:)
Updated
May be this work:
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
min-width: 1648px; /* the width of the longest element */
}
#bottomwrap {
/* replace with your background color */
background: url(path/to/picture) bottom right no-repeat;
width: 100%;
}
Rememer to reset body margin, padding to zero and set body height to 100%
Update:
I have update the solution for your case, modify the HTML structure, you can review here http://jsbin.com/ulatis/1/edit
It sounds like you need to use a background image here. Put the background on a 100% width div and set the background position to right bottom.
div.background{background: url('images/bg.png') no-repeat right bottom; width: 100%}
Try position: fixed; z-index: -1;, it does exactly what you're looking for. Example
I am creating a page that has a background image and the content is within a centered container that runs vertically down the page. Similar to the Yahoo! Answers layout: http://uk.answers.yahoo.com/
If you minimise your browser while on Yahoo! Answers the vertical scrolling just becomes 'longer' and the content all stays on the white container.
However, on mine when I minimise my browser the content towards the bottom of the container overflows and appears on the background image instead. I want the container to expand..
I do not want to use the overflow:auto or any other overflow attributes and I don't like the scroll bars.
Please see below and thank you in advance:
body {
background-image: url('images/ppback.jpg');
padding: 0;
margin: 0;
width:100%;
height:100%;
}
#container {
position: relative;
background: #440077;
width: 770px;
margin:0 auto;
top: 0px;
height: 100%;
opacity: .7;
filter:alpha(opacity=70);
)
Just remove the value height: 100% from #container. This is setting the max height of your container to the same height as the browser window, preventing anything longer than the window from being displayed.
I'm guessing that you added this property so that the entire background will display on the page when there is little page content. To get the effect you're looking for you may have to create a separate div, in a fixed position, and positioned center, with a z index smaller than your main #container.
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.
I'm trying to create a "fluid" website and have in my css file:
page-wrap{
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
In my template for the page, I have my main body of text set to a width of 80% and centered. My intention is that when I make my browser window smaller, it will remove the white space on the left and right side of the body until there is no space around the body. At that point, a horizontal scroll bar appears. I'm not sure if I explained that clearly, but an example would be like stackoverflow.com, with the whitespace on the left and right side of the body being removed when you make the browser window smaller. Unfortunately, with what I have, the space around my main body stays the same while my main body adjusts to the 80% width. So what do I need to do to correct it and achieve my desired results? Do I need a fixed size for this instead of a percent?
That's fairly simple, all you need to do is have a fixed width on your page wrap div with auto margins.
#page-wrap
{
width:780px;
margin:10px auto;
}
Forget the min/max-width.
It's not clear for me.
If you use, for the width 80% of the available window width, it's normal that the bloc resizes to adapt…
You must have a fixed width for the center part.
I use this :
#centerdiv {
position: absolute;
width:950px;
left: 50%;
margin-left:-475px; }