Full background using :cover; adds horizontal scroll - html

I am working on a website which needs a header with full background image & 650 height.
At the moment i am using background-size: cover; property with 100% width.
While, it's working it leaves an awkward horizontal scroll of about 50px on right side. Which is lot more prominent in smaller resolutions.
I tried applying background to body instead of header div too. But same thing happens there as well.
You can see a preview here -
http://nitingarg.com/projects/tfe/

It's actually the padding on your footer that is causing the scrolling. It's 100% with a padding of 40px. So that's the full page width + 40px. Remove the padding or make it "padding: 20px 0px;" and you should be good to go.

I checked your webpage source code, with zoom 100% it have horizontal scroll of about 50px on right side but when you increase the zooming horizontal will increase more & more.
try below css as i solve the same problem for my own website
.header {
min-width:980px;
height:auto;
margin:0 auto;
}
.container {
width:100%;
height:650px;
margin:0 auto;
}
Good luck :)

Related

How to center content in a div in responsive skeleton?

There are similar questions to this but none of them are solving this problem.
I have built my site using a skeleton framework (http://www.getskeleton.com). For some reason, when i try to apply padding or any margin greater than 5px to the content in the main div on the site, the text portion jumps below the image. I've tried using their "offset-by" classes but the same thing happens. I've tried using
margin:0 auto; on all divs in that section but to no avail. I've also tried using text-align:center; but that didn't work either (oddly, this only centers the h1 element in that section but nothing else...).
The other issue I'm having is that I want all the backgrounds to expand to fit the width of the browser window and all the content should remain in the center but that doesn't seem to work well with this layout. If I set the container div's width to 100% it does expand but I end up having to set all the column and offset-by classes to 100% as well and then that messes up the navigation, etc. I want to keep my layout how I have it now but I just want the backgrounds to expand (including footer height) and for all content to be centered.
Here is the screenshot of what it looks like in the browser: http://i.imgur.com/K3LAshv.png
Can anyone please take a look at the code and let me know what I should fix here? I've added my code on JSFiddle:http://jsfiddle.net/z9uVK/
Many thanks in advance!!
The skeleton is confusing the hell out of me, there is just so much going on... so I eliminated all CSS and added a few simple rules demonstrating the techniques I would use to code this behavior from scratch
Since you want the background color bands to extend beyond the container, I am setting the container to 100% and placing extra divs around each of header, main and footer. These have width 100% also. The width of #header, #main, footer is set to 960px by default and reduced with a media query. I have also set the columns and the headshot image to use percents instead of pixels. I also removed a couple inline style rules from the HTML because they were breaking this new code.
http://jsfiddle.net/W7wG3/1/
// part of my css:
.container{width:100%;}
#headerBin{
background-color: white;
border-top: 15px solid #4d4d4d;
}
#header, footer, #main{
width: 960px;
margin:auto;
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
#header, footer, #main{
width: 768px;
margin:auto;
}
}

Aligning a picture to bottom right in browser window

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

Html height buffer zones

So the story is this:
I'm making a website in which the homepage content is consisted of a menu and the clients logo.
But the way I've design it, the content needs to be in the center of the browser window... So across the board, because everyone has different screen heights, everyone who views the website either has too much white space under the footer, or part of the content is cut off.
This is the website: http://thinkinternational.co/
So my idea to fix it was this:
I created a buffer zone above the body, as you can see in the code below, but the problem I've discovered with having a percentage as a div height is that the parent div needs to have a specific height in the first place. Unfortunately, I'm not omniscient, and I can't predict every size of screen for every person who views this website, so I can't give it a specific height, otherwise I might as well have just left it as is in the first place.
Also, at the same time, I need the background to shift down with the body. Just to shake things up.
Any solutions for this issue ??
<div id="main">
<div id="TopBuffer"></div>
<div id="body" class="clearfix">
Content Here
</div>
</div>
body {
background:#0b0b0b url(images/Slices/BackgroundHome.jpg) no-repeat center -150px fixed;
-moz-background-size: inherit;
-o-background-size: inherit;
-webkit-background-size: inherit;
background-size: inherit;
height: 100%; }
main { color:#000; font-family:Arial,Geneva,sans-serif; margin:15px 0;height: 100%; }
TopBuffer { width:100%; height:25%; }
Like you said, to make a height with percentage work, you will need the parent to have a specific height.
So height:100% on body will work once you put it on html too.
(I would also remove the margin and padding from html)
html{
margin: 0;
padding: 0;
height: 100%;
}
And to make your background stretch all the way down, you will need make changes in this line of the CSS:
body{
background:#0b0b0b url(images/Slices/BackgroundHome.jpg) no-repeat center -150px fixed;
}
change the center -150px to center center, to center top or to center bottom depending on which you prefer so you can show the whole image on larger resolutions.
First center is the horizontal position of background, and second one is vertical position.
As for centering your content vertically this is a nice article:
Vertical Centering With CSS
If you can use javascript then use window.outerHeight to get the browser height and set the buffer according to that using javascript or jquery

Making my site fluid

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; }

Centering a Page issue

Ok, lets see if i can explain this. My page content has a width of 960px. It is centered in another div that has a width of 1426px (#siteWrap).
#siteWrap{
margin:0px auto;
width:1426px;
background: url(../images/bg.jpg) no-repeat ;
}
What i need to find out is how to get #siteWrap to center on a page regardless of screen resolutions. Most of my visitors are on a 1024x768 screen resolution. When i test this page on that resolution i am forced to scroll left to right to get to the site content.
Any help would be appreciated.
Just set
width: 100%;
and the margin: 0 auto; should be set on your content div, not on this one.
When a container overflows horizontally, the browsers natural reaction is to dock it to the left side of the screen. I think it should be doing this. To get around it, you can use Javascript to center your container element by calculating the necessary offsets based on screen/viewport resolution.
Try the following:
#sitewrap {
position:absolute;
top:0px;
left:50%;
width:1426px;
margin-left:-713px;
background: url(../images/bg.jpg) no-repeat ;
}
This will be centered but will overflow the browser window.