I have a header DIV which is 1400px wide and contains a background image which must always stay centered.
I have a site that needs to be 960px wide.
When I resize the browser (shrink it), I don't want any horizontal scrollbars until we hit 960px, but the larger width on the header/background is causing this.
Is it possible to stop all horizontal scrollbars on resize until 960px AND keep the background image in the header div centered??
Any help appreciated! Some code I set up here here for a quick test...
http://jsfiddle.net/gVuvk
The background image has a width of 1400px. I need the scrollbars to start at 960px - NOT 1400px. Is this possible?
change #header width from fixed pixels to 100%
Demo: http://jsfiddle.net/wNSTD/3/
Try fiddling with min-width, if that does not work, use margins, css auto-margins can be useful here. So, make the structure like this:
<style>
.center_image
{
margin: auto auto; // or you can modify the x or y seperately
background-image:url("somesite.jpg");
}
</style>
<div class="outer">
<div class="center_image">
Set the width of header to 100% and center the background image.
background: url(http://fade.com.au/test/bg-image.jpg) no-repeat center center;
width: 100%;
Demo: http://jsfiddle.net/post_erasmus/Hn6Zb/1/
Related
I have a div that needs to be full screen width inside a parent div that has a limited with. Simplified, it's something like:
HTML:
<div class="container">
<div class="banner">
</div>
</div>
CSS:
.container {
width: 1170px;
margin: auto;
}
.banner {
width: 100vw;
margin-left: calc( 50% - 50vw);
}
which works fine, except for one thing: The scrollbar on the page covers some of the content in the child div, because 100vw appearantly includes the scrollbar width. So is there a way around this so I can set the width to (100vw - scrollbar width), or perhaps a completely different way to achieve what I want to do with pure CSS?
Try to use % where you can. vw is a percent of the viewport width including the scrollbar and % is a percent of the wrapper object, where the body is not rendered inside the scrollbar.
Don't use a fixed width (px) container. It's bad practice and will not render well on mobile screens. See Responsive Web Design for more.
Don't use vw for containers (or banners). It has weird effects on the scrollbar.
Finally, I don't understand why you want something to be at 300vw or 3x the width of the viewport, but sure. If you designed your page right with responsive web design and avoided setting any wrapper's dimensions with px, then it shouldn't be hard to know what that width of the containing div is. For example, if the wrapper (containing div) is at 30% of the viewport and you want your banner to be 300% of the viewport, then you want 1000% for your banner to span the width of three screens.
You could set the scrollbar width and subtract it from the container's width using 'pure CSS'.
You could give width to the scroll bar in webkit-browsers using:
body::-webkit-scrollbar {
width: scrollbarwidthpx;
}
and set the content width as:
width: calc(100vw - scrollbarwidthpx);
You could make use of this article regarding customizing scrollbar
I'm using bootstrap and the img-responsive class. I'm trying to place an image in the middle of a div and it works perfectly. However, for some screen sizes, I'd like the div/image to be a certain minimum height. However, when I set min-height the image stretches vertically to meet this height, but the width does not, so the image is distorted.
CSS
img#main-im14 {
min-height: 500px;
width: 100%;
}
HTML:
<div class="header-content-inner">
<img id="main-im14" src="img/image.png" class="img-responsive">
</div>
How can I fix this?
use width: auto; instead. Your current css is telling the browser to size the image to 100% of its container width AND stretch it to 500px tall as well, hence the distortion.
I have a footer on a webpage that has another div with some content in it (that content is centered withing the footer container). The footer is set to stretch the entire width, while the content div inside is set to 960px and has a margin auto to center it.:
Html:
<footer>
<div class="footer-inner">Content</div>
</footer>
css:
footer {float: left; min-width: 100%; background-color: #000;}
footer-inner {width: 960px; margin: 0px auto;}
The footer does span when full size, but when I resize the browser and side scroll it no longer stretches across full width, but gets cut off:
Screenshot: http://cl.ly/image/1r2T2h3K3Z1A/o
site: http://southland.dcsam.com
Any help is appreciated. I'm searched and read and searched and read, and now defer to you fine folk. ;)
Something is causing your page to stretch to a minimum of 1160px (I'm not sure exactly what it is and don't have time to figure it out, but my best guess is that it's somewhere in your nav or slider). So with a width or min-width of 100%, it only stretches across the window (the same is true of your other 100% color bars like nav). When the window is less than 1160px, your footer will also be less than 1160px. If you change your css to what I have below, it will always stretch the full width of the site:
footer {
width: 100%;
min-width: 1160px;
}
is anyone know how a background image is being cut off due to smaller size of window. Please have a look to this site. http://nfldata.com. Try to make the window smaller than 900px width. Then scroll to the right side. You will find the background image is not there. But for the footer, it appears. What CSS code that causes this problem?
I think you are looking at the background on the content-wrapper div as shown below. Since the width of that element is set to 100%, and the center-block div has a fixed width of 1000px, if you collapse the window to a width that is less than the 1000px the content wrapper will not display and the background will effectively disappear.
HTML Element...
<div id="content-wrapper">
<div class="center-block">
....
</div>
</div>
Relevant CSS:
#content-wrapper {
margin: 0 auto;
width: 100%;
background-image: url(/images/content-background.png);
background-position: center top;
background-repeat: repeat-y;
}
#content-wrapper .center-block {
width: 1000px;
}
With regards to the header, you will see that it has a declaration of
#header {
width : 100%
...
}
This will set the width of the element to with width of the parent container - in this case it is the active window (in your case is 900px or less). However, since there are other elements on the page which specify a width of 1000px or more, the content inside of those divs appears beyond that.
You could have the page expand by setting the width of body to 1000px (or whatever the maximum width of the page is) in which case, the header would expand to 100% of that size. Or, you could surround the whole content with a relatively positioned , and then the 100% directive would indicate 100% of the width of the surrounding div and not just the window.
I want a top margin for my webpage of say 100px when the window is maximised, but if the user resizes the window to shrink it I want this margin to shrink. The margin should have a minimum size of say 10px and should shrink in proportion to the window height.
An example if what I am trying to emulate is http://www.bing.com/
How would I go about implementing this in CSS? I'm stuggling with min-height, min-width, height and width at the moment.
Thanks.
Without seeing some code, it's difficult to give a great suggestion. But, you can style the html and body to be 100% height which should actually conform to the height of the viewable portion of the browser:
html, body{ margin:0; padding:0; height:100%; }
From there, you can add a div directly into the body and give that a height that is a percentage:
#push{ height: 15%; }
Your body html would look something like:
<body>
<div id="push"></div>
<div>
asdf asdf
</div>
</body>
When the body height changes, so will the push height. You may need to tweak that number to get it to your liking. You can also give the push a min-height, but that is not supported in IE6. Also, that 100% html / body could give you trouble later depending on how you're doing your footer and things, so beware and good luck.