I am having trouble getting my background image to span the entirety of my content.
I looked at other questions and it seems that I need to set a min-width of 100% on each container... but I tried every combination and it still wasn't working.
Here is my HTML:
<body>
<div id="container">
<div id="header">
header content...
</div>
<div id="content">
<div id="myAccountArea" class="section">
accountArea content...
</div>
<div id="myPostsArea" class="section">
postsArea content...
</div>
</div>
<div id="footer">
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height:100%
}
body {
background: red;
}
#container {
padding-top: 80px;
margin-left: auto;
margin-right: auto;
width: 1000px;
min-width: 1000px;
}
#content {
min-width:1000px;
}
The problem I am having is that the postsArea content usually spans more than the browser's window, but the background does not.
Thanks
EDIT
Ok, so I narrowed it down to a reset.css file... Any tips on going about discovering the problem in that file?
Thanks.
Ok, so after looking at the reset stylesheet, I discovered this:
html {
background:#FFF
}
Commented this line out and everything seems to be fine :)
Thanks a lot for all the help
Related
I've set the background-color for body section to gray and created an id for the header section, setting it to backgroud-color white. However, I need the white color to be filled throughout the width. How do I do that?
HTML:
<body>
<div id="header">
<h1>Welcome</h1>
</div>
<div>
<h2>About Us</h2>
</div>
</body>
CSS:
body {
background-color:#F8F8F8;
}
#header {
background-color:#FFFFFF;
height: 70px;
}
This is how it's suppose to look, http://getbootstrap.com/examples/jumbotron/
I mean, how the black color of the header is set throughtout the page width.
Maybe you are after some of these methods:
Method 1
body {
margin: 0;
background-color:#F8F8F8;
}
#header {
background-color:#FFFFFF;
height: 70px;
}
<body>
<div id="header">
<h1>Welcome</h1>
</div>
<div>
<h2>About Us</h2>
</div>
</body>
Mehtod 2
body {
margin: 0;
background-color:#F8F8F8;
}
.wrapper{
width: 60%;
margin: 0 auto;
}
#header {
background-color:#FFFFFF;
height: 70px;
}
<body>
<div id="header">
<div class="wrapper"><h1>Welcome</h1></div>
</div>
<div class="wrapper">
<h2>About Us</h2>
</div>
</body>
Notice the css on the linked page,
position: fixed;
right: 0;
left: 0;
You have white margins because of the browser's default css rules. You'll find what you need here http://meyerweb.com/eric/tools/css/reset/
You will need to add a style to the body that will reset the default browser margin/padding being applied.
body {
margin: 0;
padding: 0;
}
I recommend looking into reset/normalize/reboot css files. Bootstrap comes with a really good boilerplate file that you should consider replicating for future projects.
Hope this helps
I am working on getting the layout sorted for a pretty simple gallery webapp, but when I use an HTML5 doctype declaration, the height of some of my divs (which were 100%) get shrunk right down, and I can't seem to plump them back up using CSS.
My HTML is at https://dl.dropbox.com/u/16178847/eyewitness/b/index.html and css is at https://dl.dropbox.com/u/16178847/eyewitness/b/style.css
If I remove the HTML5 doctype declaration, all is as I want it to be,
but I really want to use the proper HTML5 doctype declaration.
If I set the doctype to HTML5 and make no changes, the div with the photo and the footer divs are not visible, presumably because they are 0px high.
If I set the doctype to HTML5 and make the body { height: 100px } and .container { height: 100px } or .container { height: 100% }, it becomes visible, but what I need is it to be is full height rather than a height in pixels.
If I try to do the same as above, but with the body { height: 100% } the photo and footer divs are not visible again.
What do I need to do to get it 100% in height so that my photo and footer divs are full height?
Only if the parent element has a defined height, i..e not a value of auto. If that has 100% height, the parent's parent height must be defined, too. This could go until to the html root element.
So set the height of the html and the body element to 100%, as well as every single ancestor element of that element that you wish to have the 100% height in the first place.
See this example, to make it clearer:
html, body, .outer, .inner, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
This wouldn't work, if I didn't give 100% height to—say html element:
body, .outer, .inner, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
… or .inner
html, body, .outer, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
Indeed, to make it work do as follow:
<!DOCTYPE html>
<html>
<head>
<title>Vertical Scrolling Demo</title>
<style>
html, body {
width: 100%;
height: 100%;
background: white;
margin:0;
padding:0;
}
.page {
min-height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="nav" class="page">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id="page1" class="page">
<h1><a name="about">about</a></h1>
About page content goes here.
</div>
<div id="page2" class="page">
<h1><a name="portfolio">portfolio</a></h1>
Portfolio page content goes here.
</div>
<div id="page3" class="page">
<h1><a name="contact">contact</a></h1>
Contact page content goes here.
</div>
</body>
</html>
I got stuck into a similar problema to size a canvas, so here is what i did and worked perfectly.
Besides doing the:
body{ width: 100%; height: 100%;}
Set the desired element like this:
.desired-element{ width: 100vw; height: 100vh}
In that way you are assured to have 100% of the view port in width and height.
vw stands for viewwidth
and
vh stands for viewheight
I hope this helps someone
Firstly, apologies for what appears to be a very common question, looking at the amount of similar questions, you are forgiven for being annoyed at yet another, but regardless of all the others that I have read (and tried to implement), and many other links found on Google, I'm still struggling to solve my problem, so I'm sorry, but here goes..
The footer I have is fine when the main content is longer than the browser window, but when there is very little content, rather than sticking to the bottom of the browser window, it sticks to the bottom of the main content, leaving a horrible blank space below the footer.
I've created a simple(ish) fiddle HERE using a stripped down version of my code.. here is the code for those that are able to see the issue without "fiddling"..
<body>
<!-- Header -->
<div id="header-wrapper">
<header class="5grid-layout" id="site-header">
<div class="row">
<div class="12u">
<div id="logo">
<h1 class="mobileUI-site-name">HEADER</h1>
</div>
</div>
</div>
</header>
</div>
<!-- Main -->
<div id="main-wrapper" class="subpage">
<div class="5grid-layout">
<div class="row">
<div class="12u">MAIN CONTENT </div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer-wrapper">
<footer class="5grid-layout" id="site-footer">
<div class="row">
<div class="12u">PROBLEM FOOTER</div>
</div>
</footer>
</div>
</body>
and here is the css..
#header-wrapper {
background: #12ff00;
height: 110px;
position: relative;
padding: 0.0em 0 1em 0;
}
#main-wrapper {
border-top: 3px solid #662d91;
border-bottom: 3px solid #662d91;
background: #ff5a00;
position: relative;
padding: 1em 0 2em 0;
}
#footer-wrapper {
background: #ff00fc;
position: relative;
padding: 1em 0 1em 0;
height: 100px;
}
Granted, a lot of the above Divs aren't needed for the sake of this demo, but I have left them in just in case it is one of these thats causing the problem. I'm still new to this, so I honestly have no idea.
so basically, how on earth do I get that footer to behave, previous attempts based on other Stack Overflow answers have left me with either no footer, or a footer that sits in the center of the screen regardless of whether there is a lot or little content.
Any help will be gratefully received.
I have answered this question before
Click Here
Or see this JSFiddle for a working example of a sticky footer.
HTML
<div class="wrapper">
<div class="header"></div>
</div>
<div class="footer"></div>
CSS
* {margin: 0;}
html, body {height: 100%;}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px; /* the bottom margin is the negative value of the footer's height */}
.footer { height: 200px;background-color:#000;}
The idea is that the bottom margin is the negative value of the footers height
Have you tried:
html, body {
height: 100%;
min-height: 100%;
}
#main-wrapper {
height:100%;
}
Here's a working DEMO1
UPDATES:
I've changed a few things in your code, but now its working!
Here are the changes:
added a #container for the header and main divs.
I've changed the footer padding from em to px, because I need precise height.
I gave the main-wrapper's background to #container
and the border-bottom to footer as border-top
DEMO2
The way I ussualy do this is using
http://www.cssstickyfooter.com/using-sticky-footer-code.html
If you can, try to stick close to that, it has compatibility with older browsers.
I didn't find better alternatives to this and is well explained
I have tried to implement css sticky footer on my page but it doesn't seem to be working. the footer is below the content but not sticking to the bottom of the page.
http://www.cssstickyfooter.com/
you can view the site I am trying ti implement it on live at www.anderskitson.ca/mrskitson2012
Here is my html code, with some taking out for simplicity
<div class="container">
<div id="main" class="row">
<div class=" twelve columns ">
<div class="row">
<div class="11 columns offset-by-one">
<img src="http://anderskitson.ca/mrskitson2012/wp-content/themes/mrskitson2012/images/kidsDrawings.jpg" alt="Kids Drawings"/>
</div>
</div>
</div>
</div>
<!-- container ends-->
</div>
<div id="footer" ></div>
Here is my css declarations
.container{position:relative; min-height:100%; }
#main{ overflow:auto; padding-bottom: 300px; }
#footer{ background-image: url('../images/footer.jpg'); height:300px; width:100%; position: relative; margin-top: -300px; clear:both;}
Update the css on line 45 foundation.css
html {
font-size: 62.5%;
height:100%
}
See the screen shot on this link: http://img854.imageshack.us/img854/9064/footerpos.jpg
Try bottom:0;min-width:100%; as part of your CSS
I added postion:fixed;display:block;min-width:100%;bottom:0; and it worked out fine. If you are going to be doing this I would probably also make the top of your footer.gif transparent. Or try a .png file with transparency.
Try this HTML code:
<body>
<div class="container">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
</div>
</body>
CSS code:
html, body {
height: 100%;
}
.container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
Hi Guys I have this site:
http://www.ryansammut.com/orijen/
Basically so far I managed to make the top part strech as a background, now I need to make the other parts too. I'm not sure how to do it, so I'm asking for ideas how this would be done best, keeping the positioning all relative and the background image would adjust according to the needed content area.
PS. This is only needed for resolutions greater than 1280px, so zoom out if you need to see what's happening.
You can not stretch those elements because they are contained in a div named 'wrapper', which has a maximum width of 1280px.
add the following properties to : header, contentbackground, and footer:
margin-left:auto;
margin-right:auto;
this will make sure the elements are centered.
then remove the width property from #wrapper, and add the background to it so it reads as follows :
#wrapper {
position: relative;
margin: 0 auto;
top: 0px;
padding: 0px;
background-image: url(../images/contentBG.png);
}
However, now we won't see the horizontal stretch of the header anymore, so we need to move #header above #wrapper.
<div id="header">
...
</div>
<div id="wrapper">
...
</div>
Don't use tables, use DIVs only.
No need to include FlowPlayer script two times.
I dont see you use JQuery (no need to include that).
Replace Dreamweaver's rollover images with proper CSS:
.item {background: image.jpg}
.item:hover {background: image_rollover.jpg}
Get sprite images (you can read here: http://css-tricks.com/css-sprites/)
As the original question... you have to use two DIVs for each "row", like this:
#header_wrapper {
float: left;
width: 100%;
background: header_backgroud.jpg;
}
#menu_wrapper {
float: left;
width: 100%;
background: menu_backgroud.jpg;
}
#content_wrapper {
float: left;
width: 100%;
background: content_backgroud.jpg repeat center top;
}
.wrapper {
margin: 0 auto;
width: 1260px;
}
<div id="header_wrapper">
<div class="wrapper">
--- header content ---
</div>
</div>
<div id="menu_wrapper">
<div class="wrapper">
--- menu content ---
</div>
</div>
<div id="content_wrapper">
<div class="wrapper">
--- page content ---
</div>
</div>
You need to change the structure to something like this:
<div id="header">
<div>
<ul>Nav</ul>
</div>
</div>
<div id="mainContent">
<div>Content</div>
</div>
<div id="footer">
<div>Content</div>
</div>
Then the CSS could look something like this:
div#header { width: 100%; background: black; }
div#header div { width: 600px; margin: 0 auto; background: url(...); }
div#mainContent { width: 100%; background: url(...); }
div#mainContent div { width: 600px; margin: 0 auto; }
div#footer { width: 100%; background: black; }
div#footer div { width: 600px; margin: 0 auto; }
It is fast written, hope you can see the idea? I can't see why you would go with position absolute or relative. Use margin: 0 auto; to center divs instead :)