After reading this article http://camendesign.com/code/developpeurs_sans_frontieres
I have decided to follow what it says and eliminate wrappers from my site design. Gave my body element a width, give html and css different background colours.etc
Things are working fine, I'm really impressed by it until I need to add a footer. At this moment, I'm kind of stuck. Since my footer tag has to be inside the body element, it's width only extend to the width of the body element (which is 600px). and the white box still surrounds my footer instead of ending before my footer as expected.
Is there a way I can get the footer to be like any footer you see on other sites (where the footer span the full width of the page in a different colour, without going back to wrapper divs?
Here's a screenshot:
Live Demo
<!DOCTYPE html>
<style>
html {height: 100%; width: 680px; margin: 0 auto; padding: 0;
background: #c72;}
body { min-height: 100%; margin: 0; padding: 0 20px;
border: 1px solid black; border-width: 0 1px;
font: 13px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #333;
background-color: #eee;}
#footer {
position: absolute;
width: 100%;
left: 0;
background: #ccc
}
</style>
<body>
Lorem ipsum dolor sit amet..
<div id="footer">footer</div>
</body>
Be aware that it's not "sticky": http://jsbin.com/ifika6/2
First of all, set padding-bottom: 0 for the body and margin-bottom: 0 for the footer div (or whatever you used), that should make it touch the bottom.
If I were you then I will do the following things:
THE CSS
.wrapper{
margin:0 auto;
width:980px;/*your width will goes here*/
background: green;
}
.footer{
background: red; /*your style will goes here*/
}
THE HTML:
<div class="wrapper">
MainContent will goes here.....
</div>
<div class="footer">
this is footer.....
</div>
Hope it helps you to solve your problem......
Related
I'm sure I'm doing something obvious wrong, but I haven't been able to figure it out. My lightboxes size dynamically (percentage width), and I want the content within the lightboxes to scroll vertically as needed on smaller screens without displacing the border (actually a box-shadow) around the content.
As an added caveat, I need the "container" div to have dynamic height. When I set the container div to height: 100%, the lightbox functions like I want (see code below), but when I remove the height setting, the overflow no longer works right.
This demo of my lightboxes in action should help clarify my question:
http://viewer.zmags.com/publication/a82492b9?viewType=pubPreview
Here's my CSS:
html{
height: 100%;}
body {
font-family: Verdana, sans-serif;
font-weight: 400;
font-size: 12pt;
color: #FFFFFF;
padding: 0px;
margin: 0px;
background: #FF0000;
height: 100%;
overflow: hidden;}
div.container {
background-color: #6d6d6d;
padding: 20px;
height: 100%; <!-- I want to remove this, but can't figure out a way to get the same functionality without it -->
overflow: hidden;}
div.content {
background-color: #6d6d6d;
overflow: auto;
max-height: 100%;
margin: 0px auto;}
div#tab1 {
box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 4px #be854C inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
And my HTML:
<body>
<div class="container" id="tab1">
<div class="content">
<p>Lightbox content here.</p>
</div>
</div>
</body>
</html>
If your browser support requirements allow it, consider absolutely positioning your .container div, and setting its top, left, etc appropriately:
div.container {
background-color: #6d6d6d;
padding: 20px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
That has some downsides if you're trying to position other elements on the page, but for a lightbox, it's a reasonable solution.
I am using the following lay-out: http://peterned.home.xs4all.nl/examples/csslayout1.html
Right now, I'm trying to create something like this: http://imgur.com/P64BojY
What I would like to have is a header, two divs in the middle of the page and a fixed footer. All of the divs (except for the footer) should be of the same size.
Basically, what I'm trying to do is to divide the central div (from the lay-out I've mentioned before) into two divs of the same size, I need the footer to stay at the bottom of the page though.
For my other pages I'll need to be using the same lay-out, except for the bottom div, which has to be divided in 3 divs, like this: http://imgur.com/XuxxlAE
I'm not sure how to do any of this, since I'm working with the min-height 100%...
So yeah... any help would be appreciated! Thanks
is this what you want? easier to just show you a jsfiddle so you check the css needed.
<div class="container">
<div class="containerDivs">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
<div class="footer">
footer
</div>
</div>
http://jsfiddle.net/QcG7a/
Try this solution, I have replaced div content with two divs with class content
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
html, body {
background: none repeat scroll 0 0 #808080;
color: #666666;
font-family: arial,sans-serif;
font-size: small;
height: 100%;
margin: 0;
padding: 0;
}
h1 {
font: 1.5em georgia,serif;
margin: 0.5em 0;
}
h2 {
font: 1.25em georgia,serif;
margin: 0 0 0.5em;
}
h1, h2, a {
color: #FFA500;
}
p {
line-height: 1.5;
margin: 0 0 1em;
}
div#container {
background: none repeat scroll 0 0 #F0F0F0;
height: auto !important;
margin: 0 auto;
min-height: 100%;
position: relative;
width: 750px;
}
div#header {
background: url("../csslayout.gif") no-repeat scroll 98% 10px #DDDDDD;
border-bottom: 6px double #808080;
padding: 1em;
}
div#header p {
font-size: 1.1em;
font-style: italic;
margin: 0;
}
#a{padding: 1em 1em 0em 1em;}
#b{padding: 0em 1em 6em 1em;}
div#content p {
padding: 0 1em;
text-align: justify;
}
div#footer {
background: none repeat scroll 0 0 #DDDDDD;
border-top: 6px double #808080;
bottom: 0;
position:absolute;
width: 100%;
}
div#footer p {
margin: 0;
padding: 1em;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>CSS layout: 100% height with header and footer</h1>
<p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p>
</div>
<!--div content duplicated-->
<div class="content" id="a">
<h2>Min-height</h2>
<p>Lorem ipsum...</p>
</div>
<div class="content" id="b">
<h2>Min-height</h2>
<p>Lorem ipsum...</p>
</div>
<div id="footer">
<p>
This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
</p>
</div>
</div>
</body>
</html>
I am building a fixed width site, 970px, centered, with a gradient as the surround. Originally the fixed width portion was white with several horizontal areas (menu, search area, product selection area) having a different background. This was accomplished simply with a background color of white for a div that is the next child of the body, which contained all the content of the page, and an override to the background color when needed. This worked fine.
Can I make these horizontal areas have the same background as the gradient, which will obviously be different at different places in the page? I thought I would simply keep the background-color transparent (the default) at all levels until I came to the parent of content I want white, making that parent's background-color #FFFFFF. This works if I specify a height to the area. However, the main body of the website will be of indeterminate height, and must be white (or something other than the gradient!). Are there any techniques through which I can force an element and its contents into a white background without specifying a height on that element?
Thanks.
Thanks for the response. I should clarify with code so that the question is clear. Sorry for that.
Here is sample HTML that illustrates the problem:
<body>
<div id="Page">
<div id="Header">
<div id="HeaderNavigationSection">
<div id="HeaderNavigationMenu">
<ul>
<li>Menu Item One</li>
<li>Menu Item Two</li>
</ul>
</div>
</div>
<div id="HeaderBannerSection">
<a href="#">
<img id="CompanyLogo" alt="Company Logo" src="" height="45" width="200" />
</a>
<p id="BannerSloganOne">Banner Slogan One Text</p>
<p id="BannerSloganTwo">Banner Slogan Two Text</p>
</div>
<div id="HeaderSearchSection">
<div class="HeaderSearchSectionLine">
<p class="HeaderSearchBoxLabel">Search Label One and Related Search Area</p>
</div>
<div class="HeaderSearchSectionLine">
<p class="HeaderSearchBoxLabel">Search Label Two and Related Search Area</p>
</div>
</div>
</div>
</div>
</body>
First, here is CSS that works, using a page-level white background color and a section level different background color (yellow for illustration). This works throughout my code. I do not show any resets or basic settings. Note that the commented-out CSS for the #HeaderBannerSection is not needed (it appears in the code that doesn't work, which is shown after this code).
html {
height: 100%;
background-color: #D4D4D4; /* surrogate for browser-specific gradient */}
body {
text-align: center;}
#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
background-color: #FFFFFF;}
#HeaderNavigationSection {
height: 30px;
background-color: #FFFF00;}
#HeaderNavigationMenu {
display: inline;
float: right;}
#HeaderNavigationMenu li {
display: inline;
float: left;}
#HeaderNavigationMenu li a {
display: inline;
float: left;
margin: 8px 0px 10px 0px;
padding: 0px 10px 0px 10px;}
#HeaderBannerSection {
/*width: 970px;*/
/*background-color: #FFFFFF;*/}
#CompanyLogo {
display: inline;
float: left;
width: auto;
margin: 10px 0px 10px 10px;}
#BannerSloganOne {
display: inline;
float: left;
width: 330px;
margin: 20px 0px 20px 80px;}
#BannerSloganTwo {
display: inline;
float: right;
width: 300px;
margin: 20px 10px 20px 0px;
text-align: right;}
#HeaderSearchSection {
clear: both;
height: 68px;
background-color: #FFFF00;}
.HeaderSearchSectionLine {
clear: both;}
.HeaderSearchBoxLabel {
display: inline;
float: left;
margin: 10px 0px 0px 10px;}
Here are the changes to that CSS that attempt to make the html-level background color (namely the gradient) the default, through transparency, except where specifically overridden where desired (in this example, for the #HeaderBannerSection (with code from above commented out as needed)):
#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
/*background-color: #FFFFFF;*/}
#HeaderNavigationSection {
height: 30px;
/*background-color: #FFFF00;*/}
. . .
#HeaderBannerSection {
width: 970px;
background-color: #FFFFFF;}
. . .
#HeaderSearchSection {
clear: both;
height: 68px;
/*background-color: #FFFF00;*/}
This code does not work. The background-color for the section that should be white instead remains the gradient. This is true unless I specify a height for the section, then it all works. But I won't be able to specify the height for the main section (not shown) unless I do a jQuery to determine rendered height and then do a jQuery css height setting (not ideal, and haven't even tried it yet to see if it works). Incidentally, the offending code does work in IE6 and IE7 (at least as rendered in Expression Web 4 SuperPreview).
Thanks again for any help you can give me.
For your banner section try this jsfidle
the min-width property forces the div to have a specific minimum width if the content inside it is not enough to fill it (it will be the specified width by default until the content in it is so much that the div has to expand)
I've changed the background colour so that you can see the actual div # work
feel free to change to #FFFFFF once you are sure you have gotten it correct.
I am in the process of designing a website for a film that is being released, but I am having some problems with getting it to fit in all browser windows sizes and screen sizes. Essentially, the markup, for example for the splash page, has the films logo at the top of the page, a video (the films trailer) under it, then an enter button that takes the user to the homepage. All of these should be centered on all browser window sizes. However when I try different sizes etc. the content does not remain centered and the video moves off of it's background image. How would I fix that with CSS?
There are a few other pages as well i.e. synopsis, videos and then a page to donate to the project. I would like these to work in the same way, keeping content working correctly on all sizes. Thanks!
If you want to look at this and see what I mean, the link is http://rescuedthemovie.com/new/home. This is the dev page and has basically no final design so it is somewhat messy but you can see what I'm talking about.
jwinton
Sounds like a problem with the way you are positioning your elements on the page. Take a look at:
http://www.w3schools.com/css/css_positioning.asp
Just add this to whatever divs you want to be centered. This should work on all browsers and will keep everything centered no matter the resolution.
#div {
margin:0 auto;
text-align:center;
}
I would suggest using this for the main content div, so everything is centered, then creating separate divs for the video, links, etc. That way you can position those where you want them inside the centered div..
I don't understand your design. I see the following problems.
You have a div id="container" but the only thing it contains is the div id="fotter". All the rest of the elements are "outside" the container div.
You have a div id="logo" with a style of margin-top: 1%; margin-left: 25%;. How will this center it?
Your div id="slider" has position: relative; left: 26%; top: 3em; which means that it is being pushed 26% from left and 3em from top of its origional position and leaving a "gap" where it was before.
Your h1 has a margin: left; 300px;. Where exactly you want it to be?
Underneeth the h1 you have a elements which contain div elements? This is like a block level element inside a in-line elements. Totally wrong. These all a elements should be inside a div and than that div should be positioned.
Your div#footer is inside the
div#container. The div#foooter
has a style of position: absolute
while the div#container does NOT
have a position: relative. This
causes 2 things. The div#container
collapses as it does not have any
content and the div#fotter is
positioned relative to the browser
window.
you have 3 div#recent. The ID has to be unique. This is not allowed. Use calsses instaed.
I will give a skeloton on how to go about this.
THE HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rescued: The Movie</title>
<link rel="stylesheet" href="my_styles.css">
</head>
<body>
<div id="container">
<div id="logo">
<img src="http://rescuedthemovie.com/new/images/logo.png" alt="Rescued Logo" />
</div>
<div id="nav">
<ul>
<li>home</li>
<li>synpsis</li>
<li>videos</li>
<li>blog</li>
<li>partner</li>
</ul>
</div>
<div id="slider">
<img src="http://rescuedthemovie.com/images/slides/slide1.jpg" alt="Slide 1" />
<img src="http://rescuedthemovie.com/images/slides/slide2.jpg" alt="slide 2" />
<img src="http://rescuedthemovie.com/images/slides/slide3.jpg" alt="slide 3" />
</div>
<div id="blog">
<h1>NEWS</h1>
<div class="recent">
<h2>The Putnam's Adoption Journey</h2>
My husband and I thought our family was complete. We had our two children (one boy and one girl) and were completely satisfied with that. Life was comfortable. My youngest had just started Kindergarten so I found myself with more free time than I had had in nine years! I was enjoying the freedom of grocery shopping without toddlers. But then God started stirring something in our hearts...
</div>
<div class="recent">
<h2>God's Divine Leading: Part 3</h2>
I remember feeling a little surprised that she had decided on adoption. I guess I just assumed that she would opt to keep her baby. I have to admit that I did wonder for a fleeting moment if perhaps the Lord was trying to lead Jurgen and I to adopt her baby, but then reasoned that a domestic adoption might be too risky. People might also think it strange, since I was the one who encouraged her to consider adoption in the first place, rather than end her baby’s life...
</div>
<div class="recent">
<h2>God's Divine Leading: Part 2</h2>
When I awoke, I had an overwhelming desire to have a baby of our own. The dream was extraordinarily real and tangible, and I felt strongly that the Lord had given me this dream as an answer to my questions about pursuing adoption. I am not the type of person who normally bases my decisions on dreams, but this was different. It was as if the Lord Himself had dropped this desire into my heart...
</div>
<a id="more" href="http://rescuedthemovie.com/blog">Read More</a>
</div>
<div id="footer">
<p>©2011 Rescued</p>
</div>
</div>
</body>
</html>
THE CSS
{
margin: 0;
padding: 0;
}
img
{
border: 0;
}
a
{
text-decoration: none;
color: #000;
}
body
{
background: url("http://rescuedthemovie.com/new/css/../images/blog_bg.jpg") no-repeat scroll center top #000;
}
div#container
{
width: 960px;
margin: 20px auto;
margin-bottom: 0;
}
div#logo
{
width: 850px;
height: 300px;
margin: 0 auto;
}
div#logo a
{
width: 100%;
height: 100%;
display: block;
}
div#nav
{
background: url("http://rescuedthemovie.com/new/css/../images/nav.png") no-repeat scroll 0 0 transparent;
font-size: 25px;
text-transform: uppercase;
}
div#nav ul
{
width: 900px;
margin: 10px auto;
}
div#nav ul li
{
display: inline-block;
margin: 0 40px;
color: #FFF;
}
div#nav ul li a
{
color: #FFF;
}
div#slider
{
width: 500px;
height: 250px;
margin: 0 auto;
margin-top: 77px;
float: right;
position: relative; /*romove this in the final design*/
}
div#slider img /*romove this in the final design*/
{
position: absolute;
top: 0;
left; 0;
}
div#blog
{
float: left;
width: 450px;
color: #FFF;
margin-bottom: 50px;
}
div#blog h1
{
margin: 20px 0;
}
div#blog a#more
{
float: right;
color: red;
}
div.recent
{
margin: 20px 0;
border: 1px solid #555;
padding: 5px;
}
div.recent h2
{
font-weight: bold;
color: #777;
margin-bottom: 10px;
}
div.recent a
{
color: #FFF;
}
div#footer
{
clear: both;
color: #FFF;
text-align: center;
font: 25px;
margin: 20px auto;
}
div#footer p
{
font-size: 25px;
}
This offcouse is an fixed width layout. But you can easily change it to fluid or estalic. This is how it looks
The #content div holds most of the web content. As you can see below, there is a top margin of 280px, because that is the height of the header image of the site, which is placed in the 'body' as a background (image/sky1.jpg).
How do I position a div as a holder above the 'margin' of the #content div so that I could place my #navigation, #Title divs above the header image?
The #top-float div just above the #content div was the start of it but each time I add more to the height the
'margin' get affected pushing it below.
I tried putting the <div id="top-float></div> above the <div id="content"></div> in the html. Is this how should I position this?
html {
background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
padding: 0;
margin: 0;
background:url(images/sky1.jpg) no-repeat center top;
color: #666;
width: 100%;
display: table;
}
#top-float{
padding-left:2.3em;
padding-right:2.3em;
height:10em;
}
#content {
width: 890px;
margin: 280px auto 0;
background: #fff;
border: solid 0px #ccc;
padding: 0px;
}
#footer {
width: 890px;
margin: px auto 0;
background:url(images/footer-bg.jpg)
no-repeat center bottom #fff;
border: solid 0px #ccc;
height:250px;
}
The easiest way would be to give your #top-float a height of 280px and drop the top-margin for #content as such:
<html>
<head>
<style type="text/css">
html {
background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
padding: 0;
margin: 0;
background:url(images/sky1.jpg) no-repeat center top;
color: #666;
width: 100%;
display: table;
}
#top-float{
margin: 0;
padding: 0 2.3em;
height:280px;
}
#content {
width: 890px;
margin: 0 auto;
background: #fff;
border: solid 0px #ccc;
padding: 0px;
}
#footer {
width: 890px;
margin: 0 auto;
background:url(images/footer-bg.jpg)
no-repeat center bottom #fff;
border: solid 0px #ccc;
height:250px;
}
</style>
</head>
<body>
<div id="#top-float">
</div>
<div id="#content">
</div>
<div id="#footer">
</div>
</body>
</html>
If you need em sizing, then give the children of #top-float em sizing, and make sure to give #top-float overflow: hidden;
If you want your content to appear above your header in your markup for SEO purposes, you can do the following:
<html>
<head>
<style type="text/css">
html {
background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
padding: 0;
margin: 0;
background:url(images/sky1.jpg) no-repeat center top;
color: #666;
width: 100%;
display: table;
}
#top-float{
position: absolute;
top: 0;
left: 0;
padding: 0 2.3em;
height:280px;
}
#content {
width: 890px;
margin: 280px auto 0;
background: #fff;
border: solid 0px #ccc;
padding: 0px;
}
#footer {
width: 890px;
margin: 0 auto;
background:url(images/footer-bg.jpg)
no-repeat center bottom #fff;
border: solid 0px #ccc;
height:250px;
}
</style>
</head>
<body>
<div id="#content">
</div>
<div id="#footer">
</div>
<div id="#top-float">
</div>
</body>
</html>
Just remove the top margin from your content div, and add the placeholder above it with the height specified.
HTML snip:
<body>
<div id="header">Stuff</div>
<div id="content">Body stuff.../div>
</body>
And CSS:
#content {
margin-top:0;
}
#header {
height:280px;
}
If it makes more sense for the extra header information to be within the content div (semantically), you can use a negative margin.
HTML snip:
<body>
<div id="content">
<div id="header">Stuff</div>
Body stuff...
</div>
</body>
And CSS:
#content {
margin-top:280px;
}
#header {
margin-top:-280px;
}
It is a little tricky answering this without also seeing your HTML, but a few suggestions:
Place your #top-float div outside of your content div
Use negative margins
Put your content div flush with the top of the browser with a header div inside. Then put your header image inside your header div as the background image
it doesn't look like you are centering anything so you can also use absolute positioning for the header div
As always, there is no one way of accomplishing this.
You may want to use absolute or fixed positioning for your #top-float div.
Why do you want to put the header image as a background image? I think you'll find that it all works out easier if you don't put the site's header image as a background. It is also common practice that clicking on the site's logo (which I assume is in your header image) takes the user back to the home page. Making the site's logo a background image effectively disables this feature.