What is the correct way to have header and footer backgrounds that stretch out to fill the broswer window no matter how big the viewport is stretched to while having the main content (header, content and footer) only stretch to a max-length like http://moz.com
I tried using the background shortcut with 3 seperate images positioned and repeat-x but is there a better way?
Elaborating on Stefan Dunn's comment, try background-size: cover;
Thanks Josh, Stefan and Ty. Not sure how I would impliment background-sizeJust add it for each and set to 100%?
Is the below method a clumbsy workaround to a layout that has a standard method?
<header>
<div id="header-content">
.......
</div>
</header>
<section> <!-- This is the main content area for each page -->
<div id="main-page-content">
........
</div>
</section>
<footer>
<div id="footer-content">
........
</div>
</footer>
header {
width: 100%
background: url(images/headerbg.png) center repeat-x;
}
#header-content {
width: 80%;
margin: 0 auto;
padding: 30px;
}
section {
width: 100%
background: url(images/main-contentbg.png) center repeat-x;
}
#main-page-content {
width: 80%;
margin: 0 auto;
padding: 30px;
}
footer {
width: 100%
background: url(images/footerbg.png) center repeat-x;
}
#footer-content {
width: 80%;
margin: 0 auto;
padding: 30px;
}
Related
I try to create a small website. Now I've problems with the positioning of several html attributes. What I'll do is quite simple: the header should have a width of 100% and fixed on the top. The footer should have also a width of 100% and fixed on the button. The vertical navigation bar should fill the space between the footer and the header. The content, should fill the rest, with a margin of 10px. Here's my actual try:
CSS:
* {
margin: 0px;
padding: 0px;
border: 0px;
}
html, body {
height: 100%;
width; 100%;
}
#pageWrapper {
height: 100%;
}
header{
height: 50px;
width: 100%;
background-color:yellow;
}
footer{
height: 50px;
width: 100%;
background-color:blue;
}
#mainWrapper{
width:100%;
height: 100%;
background-color:black;
}
#mainWrapper #navigation {
width: 250px;
height: 100%;
background-color:orange;
float: left;
}
#mainWrapper #content {
height: 100%;
width: 100%;
background-color: green;
}
HTML:
<body>
<div id="pageWrapper">
<header>
</header>
<div id="mainWrapper">
<div id="navigation">
</div>
<div id="content">
<p>Test content</p>
</div>
</div>
<footer>
</footer>
</div>
</body>
https://jsfiddle.net/6ptmq4ce/3/
What you can see is, that the size of this page is bigger than 100%, there is a scrollbar. How can I get this scrollbar away? And how I can set for the content a margin of 10px?
You are using 100% for all elements which will push the bottom out of the viewport so some elements have to be less than 100%
#mainWrapper {
height: calc(100% - 100px);
}
-100px means you take out the header and footer
if you dont mind using vh you can solve it like this.
We're just making the footer and header each 10% height of the viewport with height:10vh and the content 80% with height:80vh
I'm theming a Drupal website and using the vegas full screen bg.
I want to achieve the following:
But I have some trouble by theming the footer: I want it to be always displayed under the background image (so you have to scroll down to see the footer) now it keeps coming over the background image. Besides that I want the main menu and footer to become full width and not 960px like the container. But I can't seem to get these 2 to 'break out' the container.
Now I've:
#footer {
position: absolute;
bottom:0;
width: 100%;
height:100px;
background-color: #202020;
}
#primary-menu-bar{
position: absolute;
width: 100%;
height: 60px;
padding: 0;
margin: 0;
background-color: rgba(255,255,255,0.70);
padding-top: 10px;
}
Normally something like this does the trick but I'm struggling to get this right...
Anybody any advice or solutions?
You didn't show any HTML, so I just came up with some HTML myself. If the footer is only visible when you scroll down you need to have some sort of wrapper for both your header and your content element. You can then set the wrapper min-height to 100% and use background-image/background-size for a full-screen image background.
HTML:
<div class="wrapper">
<header class="page-head" role="banner">
Header
</header>
<main class="main" role="main">
Content
</main>
</div>
<footer class="page-foot" role="contentinfo">
Footer
</footer>
CSS:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
background-image: url(http://placehold.it/1200x800);
background-position: center center;
background-size: cover;
}
.page-head {
background: red;
}
.main {
width: 80%;
margin: 0 auto;
background: yellow;
}
.page-foot {
background: blue;
}
See example on this pen.
here is a possible solution: http://jsfiddle.net/09mcoo2h/1/
as i said in the comment below your question: you need to have footer and header outside the container (that is the only with 960px)
To have a footer TO THE BOTTOM of the page, just set the body as position:relative.
HTML
<div id="primary-menu-bar"></div>
<div id="container"></div>
<div id="footer"></div>
CSS
body {
margin:0;
padding:0;
position:relative;
}
#container {
display:block;
width:960px;
height:1600px;
background:#eee;
margin:0 auto;
}
#footer {
position: absolute;
bottom:0;
width: 100%;
height:100px;
background-color: #202020;
}
#primary-menu-bar{
width: 100%;
height: 60px;
top:0;
background-color: #F00;
padding-top: 10px;
}
It's really hard for us to do it like this with out HTML.
So basically what you need to do is place the footer and header outside the container. Because the container is 960px, so the header and footer can go over it.
The structure should be like this:
<body>
<header></header>
<div class="container"></div>
<footer></footer>
</body>
Example on codepen
I want my website to have this horizontally split background look while keeping the content in a container of 980px, like this site http://votezachandleah.com/
I have done this by setting a height and background color to the divs but when i put them in the container it cuts the background color down to 980px...
#container {
margin: 0 auto;
width: 980px;
}
#another_section {
background-color: #66cc33;
height: 650px;
width: 100%;
}
#background {
background-color: #FFFFFF;
color: #333333
height:600px;
text-align: center;
width: 100%;
}
HTML:
<div id="container">
<div id="background">
</div>
<div id="another_section">
</div>
</div>
You should give the body the same colors as the container.
My html page has a title and a menu at the top, the contents section under the menu, and the footer at the bottom. The footer must always be at the bottom of the window, no matter what the content size is (except for when the content if higher than the window, in which case the footer must be underneath the content). I have markup and CSS rules that implement this (below).
But I need to also show a background image over the contents and the footer. That is, the image must cover the entire screen but the title/menu area. I have no idea how to accomplish this. In my code below (as well as on jsfiddle at http://jsfiddle.net/EGj54/) I have attached the background to the whole page, but I want it to show only for the contents and the footer.
Could someone help me please?
<div id="main">
<div id="navbar">
<div id="caption"><span>Test</span></div>
<ul id="sections">
<li><span>current</span></li>
<li>next</li>
</ul>
</div>
<div id="content">content</div>
<div class="push"></div>
</div>
<div id="footer">footer</div>
* {
margin: 0;
}
html, body {
height: 100%;
}
ul {
list-style-type: none;
}
ul li {
display: inline;
}
#caption {
font-weight: bold;
}
#footer, .push {
color: white;
height: 25px;
}
#sections {
background-color: #aaaaaa;
}
#main {
height: auto !important;
margin: 0 auto -25px; /* bottom margin is negative value of #footer height */
min-height: 100%;
}
#main {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg');
background-size: cover;
}
Your footer will stay at the bottom since you placed it last with your divs, no problem with that as long as you will not use float or absolute positioning. Move your style in background to body to solve your problem:
body {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg');
background-size: cover;
}
can you simply adjust the vertical position of the background images?
background-position: left 20px;
You can set the background-position of the image
#main {
background-image: url('yourimage.jpg');
background-size: cover;
background-position: 0 100px; // 100px or whatever the height of your navbar is
}
Alternatively, You can cheat like this ;)
#content {
height: 100px;
background: url('yourimage.jpg') top;
}
#footer {
height: 50px;
background: url('yourimage.jpg') bottom;
}
I'm trying to make a simple DIV layout compatible with IE, and it's giving me hell.
Here's the basic layout I'm working for:
<div id="body" style="background: blue;">
<div id="header">
HEADER
</div>
<div id="content" style="height: 88%;">
CONTENT HERE
</div>
<div id="footer">
FOOTER
</div>
</div>
I'm using CSS rounded corners on the Body div, and I have a navbar and footer info in #footer as well as a tabbed main navbar in #header.
My main problem has been making the #content div stretch vertically to fit the full page when I only have a small amount of content WITHOUT creating vertical scrollbars.
If I make #content height: 100%; the header and footer cause the page's height to go above 100% and triggers scrollbars.
Making #content's height 88% does the trick in FireFox, but there are two problems with this solution:
a) It's an ugly hack
b) It doesn't work in IE (of course).
Anyone have ideas on how to accomplish this? I assume is should be a fairly common situation for web designers out there.
There you go, try this template, it's really simple and i think it would solve your problem.
HTML:
<div id="wrapper">
<div id="header">
<div id="header_900">
<p>header</p>
</div><!--header_900-->
</div>
<div id="content">
<div id="content_900">
<p>content</p>
</div> </div>
</div><!--wrapper-->
<div id="footer">
<div id="footer_900">
<p>footer</p>
</div> </div>
CSS
body, html{
height: 100%;
}
body, p {
margin: 0; padding: 0;
}
#wrapper {
min-height: 100%;
}
* html #wrapper {
height: 100%;
}
/*HEADER------------------------------------*/
#header {
width: 100%;
background: #666;
}
#header_900 {
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/*FOOTER------------------------------------*/
#footer {
width: 100%;
height: 100px;
margin: -100px auto 0 auto; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
position: relative;
background: #666;
}
#footer_900 {
width: 960px;
height: 100px;/*THIS IS THE FOOTERS HEIGHT*/
position: relative;
margin: 0 auto;
}
/*CONTENT------------------------------------*/
#content {
width: 100%;
padding-bottom: 100px; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
}
#content_900 {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
I don't think there is an official way to accomplish this unless you use quirks mode. If you use quirks mode (no doctype), it would look something like this:
html, body {
margin: 0;
padding: 0;
height: 100%:
}
#content {
height: 100%:
}
Maybe what you're looking for is an adapted version of something like this: http://www.alistapart.com/comments/fauxcolumns