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.
Related
Kind of a conundrum. I have a div that is full height of browser with a background set as 100% size, and image content, in two inline divs set to vertical-align middle content with each other.
One of the divs, the image is "bigger" than the view port (this is needed unfortunately), so I have overflow: hidden set to the containing div of these two inner divs to hide whatever is outside the viewport (height 100%)
I know its sound weird to explain, so I set up a CodePen
https://codepen.io/deelite310/pen/bjvKPG
The issue I'm running into are several:
1) The right div content since the image is bigger than the div full height, its causing the left div content to "vertical align" with that full height, instead of the containing DIV's 100% height. That means the left div content is disappearing in the overflow: hidden;
2) When resizing the browser up and down (so say a view port of 1680x600), the content in the main section is covered up by the footer area (so the images disappear or are being covered up, the background isn't resizing down, etc)
so my questions are:
1) Resize divs and content if browser is not a normal viewport settings (like 1680x600) so that the main section shows fully, without the footer covering it up
2) Where both divs in the main section, show all the content, despite one side having content extending past the and hidden by overflow: hidden;
some of my CSS, you can see the whole thing at the CodePen link above
section {
width: 100%;
min-height: 100%;
display: table;
height: inherit;
margin: 0;
padding: 0;
background: url("https://placeimg.com/1000/400/tech/sepia") no-repeat center top;
background-size: 100%;
}
#hero #col {display: inline-block; width: 50%; verticle-align: middle;}
#hero #col:nth-child(1) img {width: 65%; height: auto;}
.place {margin-bottom: 20%;}
#footer {width: 100%; height: 400px; text-align: center; border-top: 1px solid #000}
#footer p {font-weight: bold; font-size: 32px; margin-top: 3%;}
To solve your first issue I would try, instead of a vertical-align, to add a float to your hero and col id. By the way, as your using the id col twice it would maybe be appropriate to use a class instead.
If using the float, you would have to add a clear to your footer probably but it should work. And, with the float, reduce a bit the width (48 or 49% instead of 50%) should help because, by adding borders you end up with more than 50% in width which can explain why the second block goes under the first one.
For the background-resizing you can still use a background-size:100% 100% however; be aware that your image can, with that method, appears weirdly, it'll end up distorted in some cases.
For your images size, I don't really understand why you go through a nth-child use. but, anyway, you can use overflow:auto instead of overflow:hidden which will allow a roll box to appear, meaning that your content won't simply disappear has it does with the hidden attribute.
It's the first time I ever answer to someone here. Hope it'll help...
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;
}
Css
body {
margin: 0;
padding 0;
min-width: 1072px;
height: 100%;
background: url('bg_repeat.png') center top repeat;
}
.bg {
min-height: 100%;
background: url('bg_center.png') center top repeat-y;
}
.page {
width: 1024px;
margin: 0 auto;
position: relative;
}
Html
<body>
<div class="bg">
<div class="page"></div>
</div>
</body>
It's essentially a centered fixed width page with a pattern background and an additional bg div to add a vertical gradient lighting effect.
The problem:
When I have a 100% width div next to a horizontally centered div, I get those 1px back and forth shifts when resizing the browser window horizontally.
.page does not align to the backgrounds of bg and body or their centered text. In otherwords .page does not remain in the same exact horizontal position relative to the background image's position.
It's a minor problem. I don't have any pixel-perfect patterns or anything. I'm more just curious about this if it's even possible. I have seen IE 11 blurring or doing some half-a-pixel shifts with pixel perfect repeating backgrounds with certain window widths.
FIDDLE: http://jsfiddle.net/HJsNY/
However the problem does not reproduce in the fiddle. But the exact code causes 1px offsets in a full window. (using Chrome)
EDIT: Actually this jsfiddle does reproduce in Chrome. But only when the iframe width gets large enough (>~1300px) for some reason. On FF it's noticable on small window widths too.
Here's what happens: 1px background offset that keeps alternating when resizing browser window.
I think you need a css reset. Firefox (like every browser) displays css with some intern css. You must remove it.
Add this to your html :
* {
margin: 0;
padding: 0;
}
I updated your JsFiddle.
If you want more info this, I already wrote it here.
Did it solve your case ?
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
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; }