i have a small html page in the following format
<html>
<head></head>
<body>
<div id="wrapper">
<table></table>
</div>
</body>
</html>
the problem I am having is that its not showing everything.. it scrolls down up to a point.. the background of it is a photoshop .png image and on top of that background i created the table within the div..
Everything else is in place and show appropiately, its just the end of the page is not showing.. doesnt scroll down completely.
The background at the end has a "Designed by [name]" but it is not showing this part.. it scrolls down up to just before this part of the png picture..
Any ideas what I could be missing?
Based on the limited information you provided, my guess is that the height of your page's content is not long enough to justify showing that part of the background. The page only scrolls to the length of the content, not the length of the background.
Fix the height of your wrapper div by making its min-height equal to the height of your image. Assuming your image is 500px in height, you CSS would be the following:
<style type="text/css">
#wrapper {
min-height: 500px;
}
</style>
Related
I'm trying to fill my page with a white background by extending my div to the bottom of the page. I've set my html, body and div to a height of 100%, but while the html and body's height extend perfectly to the bottom of the screen, my div's height goes even below that.
It seems like it's adding the height of my previous div's to the last div and thus extending it below my screen. Does anyone know how I can fix this so my last div extends to the bottom of my screen?
<html>
<body>
<div id="app">
<nav id="nav"></nav>
<header class="header"></header>
<div class="categories"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
This is my html. I want the content class to extend to the bottom of my screen because there's not enough content in there to fill it itself. I've given the html, body, app and content a height: 100%, but while the first 3 fill the screen perfectly, the content class goes even below the screen.
You could try using
overflow: auto
Would be nice to have some code example so we can help more.
I want to center all the content of a website with a fullscreen background even when resized with CTRL + scroll mouse button on windows.
Website exemple : http://www.benzinga.com/
If you press CTRL and use the scroll button on your mouse, you will see that the background of the header stays full screen, but the content stays centered.
Is it possible to do that only with HTML and CSS?
Can you show me how?
I think this is what you are going for. The width for the content div should be in terms of px rather than % in order for it to properly zoom.
Here is the HTML:
<body>
<div id="content">
</div>
</body>
Here is the CSS:
body {
background:url('http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg');
background-size:cover;
}
#content {
background-color:red;
width:1000px;
height:500px;
margin:auto;
}
My solution would be to use Bootstrap's container div.
Once you include Bootstrap,
Simply use:
<div class="container">
...
</div>
The content will stay within that, in the center of the page, very similarly to she site you linked, even when you zoom in.
if you click and hold the left hand corner of the stackoverflow webpage and drag it to make a smaller browser the screen does nothing with it's elements it just becomes a smaller screen as parts drop off. This is what I want to achieve. Probably easy, however I can't get it to do it on my small web app. If I do this the centre Div and it's containing text start overlapping other elements etc. I thought position: fixed; might help but that drags the centre div across the screen.
Just set a specific with to <body>, for example:
body {
width: 900px;
}
Demo
You can also try min-width instead of width.
If you add a <div> to everything in the <body> with a width it will become fixed instead of liquid.
like this:
<div style="width: 1366">
<body>
blah blah
</body>
</div>
hello i have a problem with using my background graphics.
the structure of the site is the following:
header contains two colors with a fixed height of 100px.
mainframe should contain a sliced image with a variable height.
footer contains one color and has also a fixed height of 100px.
so my sliced image has a height of 550px and will fit exactly between header and footer in case the content would not be larger.
<html>
<body>
<div class="wrapper">
<div id="header">header</div>
<div id="mainframe">INSIDE HERE SHOULD BE PLACED THE SLICED IMAGE BUT THE CONTENT IS MORE THAN 550PX</div>
<div class="push"></div><!--Push for sticky footer-->
</div><!--Wrapper -->
<div class="footer">footer</div>
</body>
example
now the problem is, that my content will be larger than 550px and because of a fading colour there will be a hard edgde and you can see where the image ends. so i thought it would be nice when that sliced background image could automatically be resized.
is there a way to realize that by using css?
thanks alot.
Short answer: unfortunately, there isn't a way to resize background images with CSS.
Often, there's a clever workaround using the background-repeat:repeat-x; or background-repeat:repeat-y; properties, and using a carefully sliced background image.
If you have an example of the image, I may be able to help more.
Try
background-size: 100% Auto;
You could try
background-size:cover;
I have an image on the top page that's 960x200px wide. It's in a div tag. What happens is when I scale the page by pressing ctrl+scrolling, the image scales out of the page, off the screen, and gets cropped off. How can I make it that when I scale the page, like amazon.com or other websites, the page doesn't become cropped and instead, I get an horizontal scroll bar at bottom of the browser?
/* css */
#header { background-image: url('image.gif'); }
<!-- html -->
<div id="header"></div>
This is happening because your image is a background-image.
Therefore the width of the image is not being calculated as part of the width of the page.
If you want this not to happen, make your div#header explicitly 960px wide.
You need to make the header image part of the HTML code like this.
<div id="header">
<img src="image.gif" width="960" height="200" />
</div>