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.
Related
I have a graph that looks like this (yes it needs some styling ):
whole graphic when window is larger
this is a graphic seen in its entirety.
When i make the window smaller, it cuts of the right side of the graphic. I don't want that i want the grapihc to go left to show the right side of the graph when its smaller. does anyone know how to do this?
this happens when resizing windows to mobile
i need it to do this. entire graphic to go to the left
In the link you have provided, the graph resizes. But if you want to show your right side of the graph, fix the width and then use position property along with right: (any)px.
Hope this is what you were talking about :)
I have prepared a demo below. Where .graph is your graph.
Add absolute position with 0 right with 100% width and height.
By default I have set 100% width to the graph.
For smaller screens, specify the proper dimensions in media query and fix the width of graph. Thus it would stick to the right once the screen width exceeds your graph width.
.graphCont{
width: 100%;
height: 200px;
position: relative;
}
.graph{
position: absolute;
right:0;
height:100%;
width:100%;
background: orange;
}
#media screen and (max-width: 500px){
.graph{
width:300px;
}
}
<div class="graphCont">
<div class="graph">
</div>
</div>
I have a page where the content is 1000px wide. About halfway down on this page, I need to have an image displayed that is 600px high and 2000px wide.
This image should always be 600px high, maintain its aspect ratio and whatever can't be fit at the current browser width, should fall off equally on both the right and left (so the image stays centered as the browser window changes).
There will only be the image - nothing on top of it.
I have tried building a div and having the image fall outside of it (beyond the 1000px, but can't make it work. If I break it out of the container it works with:
.wideimage {
background: url(../images/wide.jpg) no-repeat center center;
height:600px;
}
This works but it would be a lot nicer if I could do it within the 1000px container and have the image fall outside to the edge of the browser window.
To have the image fall outside the container and be centered try making it absolute, left 50% and offset the margin by half the width of the image: https://fiddle.jshell.net/7vpmndfo/1/
.wideimage {
position:absolute;
left:50%;
margin-left:-1000px;
}
And in order to prevent horizontal scroll bars on the browser, you would need to have you're page within a wrapper div (if it's not already) with overflow:hidden;
If you have a variety of images and so may not know in advance the width of the image, you can centre the image with the classic "centre anything" css technique:
.wideimage {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}
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 :)
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; }
So i have an image in stuck to the top of my page that repeats all the way across the top. For some reason when I resize the window and then scroll over to the right it stops repeating. The div is the first in the document outside of the wrapper. Any ideas?
#header {
background-image:url('http://daveywhitney.com/img/paperhead.png');
background-repeat: repeat-x;
width: 100%;
height: 145px;
margin:0 0 20px 0;
}
This seems to work fine in FireFox. Check the width of the parent element when you resize the window.
The available benchmarks as set by your code are:-
width - 100% (so full width of the image is taken into consideration)
"background repeat - x" - Image will repeat horizontally
Internally, say the width of the image be 250px & the width of your full browser screen be 1024px. So technically, the image will repeat horizontally at least 5 times, with 4 times in full size & the last one will be shown a little bit.
Now, if you resize the browser or view the same web page in a pop-up window, your browser screen is bound to have its width modified. Let's say that now your browser screen width is 220px. As the image width is greater than the browser screen width (in this particular test case), so the image will not repeat at all, & you will also not be able to see the full image.
It's not that there is any bug, it's just the logical part, which we need to understand.
Hope it helps.
It's hard to tell from the details you have provided but here is a answer that might do the trick. Add the following
#header {
background-image:url('http://daveywhitney.com/img/paperhead.png');
background-repeat: repeat-x;
width: 100%;
height: 145px;
margin:0 0 20px 0;
overflow:hidden;
position:relative}
#wrapper {width:960px;margin:0 auto;position:relative}
You need to add a min-width to be slightly larger than your main content.