|
CSS - Footer Won't Move With Main Content
Similar TutorialsHello, I just joined the forum, I'm new to web design although I have some experience in video post production. I'm attempting to create a layout for a website using sticky footer technique and an image for the border shadow in the main column. The sticky footer works well until I tweak the css to add the background border image, then I get this empty space in the middle of the body where the border image background should be extending to. It's probably a novice mistake but I can't get to find it. Your help would be much appreciated. The HTML: Code: <body>
<div id="nonFooter">
<div id="wrapShadow">
<div id="header">
<div id="linksHead"></div>
<div id="mainMenu"></div>
</div>
<div id="content">
<div id="bannerSlider"> (SWF file)
</div>
<div id="contentBuscador">
</div>
<div id="contentTours">
</div>
<div id="contentElite">
</div>
<div id="contentTestimonios">
</div>
<div id="contentPromos">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="wrapShadowFooter">
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
The CSS: Code: html,body {
padding: 0;
margin: 0;
}
html
{
height: 100%;
}
body
{
height: 100%;
background-color: #3399cc;
}
#nonFooter
{
position: relative;
min-height: 100%;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
* html #nonFooter
{
height: 100%;
}
#content
{
padding-bottom: 7em;
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
clear: both;
border-top-width: medium;
border-top-style: solid;
border-top-color: #336;
}
#header {
width: 900px;
height: 100px;
position: relative;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
#footer
{
position: relative;
margin-top: -6em;
height: auto;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#wrapShadow {
width: 920px;
margin: 0px;
padding: 0px;
height: auto;
}
#wrapShadowFooter {
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding: 0px;
background-image: url(_images/footerCruiseship.jpg);
background-repeat: no-repeat;
float: left;
height: 100px;
}
All #content(area) Divs in content have the same code as this:
#contentBuscador {
float: left;
height: 100px;
width: 880px;
padding: 0px;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
Thank you, pixelMason. Edit: Problem Solved thanks to f_nietzsche I have tried multiple times to have a kind of "content" div, where it resizes vertically to the amount of content in it, and stays the same width and is centered. How can I do this? I know min-height doesn't work in IE. Another problem I was having, certain pages would be off to the left when they should have been centered. Please help! So I'm trying to debug some major issues in IE6. In both my "Home" page and in my "Bio and Press" page my mainbody div and my mainbodyalt div are broken out of the three column laaout and the two column layout and pushed to the bottom of the other div columns. I am stumped as to why this is doing this, may I have some help on the subject please. Here is the link: http://www.lonniebruhn.com/sitelab/index.html Both pages validate Thank you LB Hi All.. I am working on my first real website for a friend and I am having trouble getting the top image where I want it. I will post a link in a sec. What I am trying to do is set a top, middle and bottom image in the Main Content part of the site. It looks like a picture frame but can expand without breaking when I add new content. I had no problem putting the middle image in and I finally got the bottom image set, though I had to do some strange things to get it to work. Now I am stuck on the top image. I can not get it set where I want it. I am still learning CSS/HTML and am trying to do this on my own and with Google . but this has me stumped. Could someone tell me what I should do. Here is the link http://http://www.jamkastin.com/New..._Dreams/dd.html Here is my CSS that I did for the middle and bottom image. Code: <style type="text/css">
#html, body {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width:800px;
height: 100%;
background: url(images/bg.png);
margin: 0 auto;
text-align: center;
font-family: Verdana, Helvetica, sans-serif;
}
#container {
width: 780px;
background: url(images/wood_back.jpg);
margin: 0 auto;
overflow: hidden;
}
#navigation {
margin-top: -4px;
width:780px;
background: #B6C5A4;
font-family:Trebuchet MS, Helvetica, sans-serif;
text-align:center;
overflow:hidden;
}
#navigation ul {
float:left;
list-style:none;
margin: 0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#navigation ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0px;
position:relative;
right:50%;
}
#navigation ul li a {
display:block;
margin:0;
padding:.4em .8em;
color:#000;
text-decoration:none;
}
#navigation ul li a span {
display:block;
}
#navigation ul li.active a {
color: #fff;
font-weight:bold;
}
#navigation ul li a:hover {
color: #fff;
}
#mainContent {
float: left;
width: 450px;
margin: 15px 15px -71px 15px;
padding: 15px 15px 15px 15px;
background:url(mainbg.gif) repeat-y;
}
#mainContent .p3{
padding-bottom:20px;
margin-left: -21px;
background:url(mainbottom.gif) bottom no-repeat;
}
#sidebar1 {
float: right;
width: 200px;
padding: 15px;
margin: 15px;
background:url(sidebg.gif) repeat-y;
}
p {
padding: 0px 20px 0px 20px;
}
#mainContent .article
{
padding-top:20px;
}
.bottom_border {
width: 780px;
height:30px;
margin: 0px 10px;
background-image: url(images/dd_border.png);
}
.copy {
font-size: 12px;
color: #000;
}
.copy a {
color: #000;
}
Quick nagging question that's been bothering me for some time. Fortunately, I have a link to explain the problem. If you go to our web page (link below), you will see that we have a DIV section on the left side of the page which displays a mini You Tube video, along with a few other buttons: http://bit.ly/gL9sA8 The problem is that when you shrink the window, that particular div will shy away outside the bounds of the browser window. Is there anyway to not have it disappear, but at the same time, not have the main content overlap it in anyway. In other words, how would you code the DIV tag so that the following two things happen: 1. It's always in view on the LEFT side of the webpage 2. The main DIV stops against it, and doesn't overlap it if resized As you can see, if you shrink the size of the window, our main div area (div id: mainWrapper) is always going to be centered which is the most important thing. However, we want to have a left (or right) side area to display buttons like that. Here is the current code for that left sided DIV column: Code: <div style="position:fixed; margin-left: -180px; top: 75px;"> // My html content for mini You Tube video & button is here </div> The problem is that if a person has a low resolution monitor, this left hand div is out of view and never seen.....or even worse, it's partially seen and not fully displayed because it's hiding outside the bounds of the window. My goal: To have it fixed to either the outer LEFT or RIGHT side of the webpage, just along the edge of the mainWrapper as you see it now. If I can clear anything up as to what I'm trying to explain, please let me know. I hope one of you awesome gurus can point me in the right direction! I've been trying for days to get this to work and nothing i do makes this stupid page extend with the content that i put in. If anyone has any idea's as to why and could point me in the right direction i would very much appreciate it. The link to the site is below, thank you in advance. hxxp://adrian.briansykes.netau.net/ So far my site appears somewhat like this Header Menu Main Content Footer Now what I wish to do for the Main Content, is create boxes, 2 top boxes and 2 lower boxes: Box 1 Box 2 Box 3 Box 4 So I've been playing around, trying to get them to float, ya de da, I can manage to get 2 columns, but when I attempt to put in the 2 lower columns, the footer ghosts over top of all the main content and all you can see is the header, menu and footer. If attempted to wrap them in container's but have failed miserably, any help would be appreciated. This is my first completely css site and I am having troubles with my main content areas and some other small minor things. My design requires that the sidebar be the same height as my content area. What do I need to do to get them the same heights. The main content area changes on each page so my sidebar needs to do the same. Here is the website. I guess I cannot post url's so I hope I made sense. Also an example of what the site is going to look is here. Once again cannot post urls. Also, I need help with lists. In the example image I have the lists side-by-side. Normally I would use a table for this. Is there a way to do this with css? Any help would greatly be appreciated. Thanks, Shaun Hello - I'm having trouble with the layout of a site I'm working on. Here's the site in question: http://www.americanidiotsband.com/ If you look at it in anything up to 1024x768, it's fine. But if you go higher than that (say, 1280x1024 resolution), then the main (black) part of the page goes only as far down as the content that is filling it. What SHOULD happen is that the black background should span all the way to the bottom, no matter how much content is inside it... Here is a link to the stylesheet that I made up: http://www.americanidiotsband.com/styles.css I'm sure I'm doing something wrong, and I'm hoping that someone could help me correct this. Thanks in advance for any help that can be offered!... Here's the url Template Any comments on the code will be very helpfull. Even if it is out of topic. In IE it looks pretty good. In firefox the border goes under the large image and the image navigation is left there naked on the body background. Hi to all. First off, thanks for reading my question. I appreciate any help or consideration anyone can give. I am developing a website for a singer friend, using joomla and a template I purchased. I have only been building websites for 9 months now, so please forgive my ignorance. The problem is that the content, navigation etc moves left or right, almost diagonally depending on the resolution of someones screen. This is noticeable to me as well, if I zoom in and out on my page. I have no idea what is going on at all. Could someone give me some pointers? Here is the site: fernyhillscomputers.com.au/fordham/ Thanks, Chris. Hi, I have a site with a left navigation bar (which is fixed width, and has a background colour that must stretch full screen from top to bottom of the page). The site is: http://67.18.220.222/~duoboots/2005/z.html Stylesheet: http://67.18.220.222/~duoboots/2005...s/style2005.css As you can see, the left navigation menu stops once the content within the div is displayed. It does not stretch to the bottom of the screen. (say if you're on 1024 x 768 resolution) Note: this varies according to the main (right) content. If the main content was shorter than the menu bar - it would work fine. The menu bar has a min-height of 100% which means the background applies to the size of your screen. However, if the main content height is greater than that of the menu bar - then the menu bar will not adapt, but the background simply stops. Is there a workaround for this? With tables, this could easily be achieved because the background colour of one cell is stretch until the end of the table, and not the content within the cell. However, I'd like to do this with CSS. Here's some CSS: Code:
body, p {
color:#666666 ;
font-family: Verdana, Arial ;
font-size:7.5pt ;
font-weight:normal;
}
body {
height:100%;
margin: 0px;
background-color: #2F201E;
}
#container {
width: 968px;
height:100%;
}
#nav {
width: 201px;
border-right: 3px solid #FFFFFF;
background: #8D603B;
float: left;
min-height:100%;
}
I've tried switching "min-height" and "height" but they don't seem to do what I want.... if anyone could help me out it would be MUCH appreciated! Thanks a lot! Hi, i made a page with DIVs and floats and all that and everything is peachy. i got myself an ecommerce solution, re-designed the interior to be tableless and now have a problem with IE that i cannot seem to get rid off. live example: www. chocolateriewanders.com/shop - the 3 floated images leave the div in IE (do not wrap) [thats the smaller problem] - if you click on 'Gift Boxes', then the content is moved down quite a bit opposed to the looks in Firefox, were its all aligned correctly. i tried to apply the holly hack - but i am not very comfortable with it. right now the 'shop' site does not validate and i have no idea why either (html validation) If someone could help me out, that would be great (and yeah i want to succeed in validation too! but this shop is pretty crazy put together and i have no clue about php and whatnot it utilizes .... btw, most pages are put together with php from a database and TPL files, which i can edit) Bear with me please. I am brand new to html/CSS etc... I just cobbled together a page a few days ago using someone elses code as a reference, I hardly know what I did or how it works, but it works just like I want it to - Background centered and stationary (no scrolling with content), but the content does scroll, with NO horizontal scroll bar. You can view it he bit(dot)ly/rbsZsH - THIS IS WHAT I WANT MY OTHER PAGE TO DO Ok, so feeling smug, I tried to do another one like it, without the sidebar/header, etc... For the most part it works, EXCEPT - I have an unexpected horizontal scroll bar that goes about 50% across the browser and allows the user to pull the content off-center across the background. I have nearly pulled my hair out trying to fix it and put a hidden message under the content just for fun.. (make lemonade when you get lemons, right?) You can view second page he bit(dot)ly/qMbYl2 - THIS IS THE GOOFY PAGE The only real clue I have is that the first page is set to 780px wide and has this comment in the container div: /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ My second page container div is set to 802px because I am using an image from Photoshop rather than a background color. Thank you if any of you can shed light on the situation. P.S. - I'm sure I've totally butchered the code, and you can assume when you answer that I can cut and paste but not really understand what you are saying. Hello All, I am trying to put together what seems like it should be a simple css layout but it just is not cooperating. Thought maybe somebody could point out what I am doing wrong. The site is southernshades.net If you shrink the browser and scroll down the footer goes on top of the content area. I am going crazy trying to figure out how to get the footer to stay at the bottom. Any ideas would be greatly appreciated and save my sanity. Thanks. I'm sure this has been asked, and I've googled for help without finding anything that works. I'm redesigning a site from html/tables -> css and need to keep a footer at the bottom of each page (after the content, not stuck to the bottom of the window). Being pretty unfamiliar with css positioning I'm having a bit of trouble. Site is here - huguenotbats . com / redesignfiles CSS is here - huguenotbats . com / redesignfiles / stylesheets / hbstyle . css As is everything works, but when I try to add a footer it sits on top of the content. Help, anyone?? Hi, For some reason the bottom of my content is getting chopped off on some pages. For instance, the Bookmark icon and neighboring links are getting cut off at the bottom of this page when viewing with Google Chrome: http://www.sustainablelivingcolorad...ble-living-101/ Any ideas? Thanks. Hey gang, I'm sure this has been asked many times, but i cannot find the words to search for this. Luckily, I'm sure it is a quick fix. I'm not great with CSS, but I feel I have a strong understanding. However, I must not completely understand divs, because when I try to add padding to this "right content" div, it pushes itself behind the footer div (the bright green box): The box on the left is the "left-content", the box on the right is "right-content." Each of the boxes are floated left and right, respectively, and they are both in a "container" div that centers them. How can I make the footer div just be pushed down with content is added to either the right/left-content div? I can add a bunch of "<br />s after the last bit of content, and the footer moves down, but I feel it is cleaner to just add 20x padding. Any help is greatly appreciated! Is it possible to get my content to stick to my footer? I have a sticky footer at the bottom of my page and I would like the content to always bee 100% of the page and sitting right on top of the footer. I been messing around with different things for hours and nothing I seem to do will get my content box to stay stuck to the footer at the bottom of my page. Here is a link to the site printing.ou.edu/new-index.html This is what I am trying to get printing.ou.edu/Draft3.png Thanks for your help :-) (EDIT) I have Solved this problem sadly I had to use Java Script to get it done but it works. Here is the Java Script for anyone else trying to do something like this. Code:
<script type="text/javascript">
window.onload = function() {
contentHeight();
}
window.onresize = function() {
contentHeight();
}
function contentHeight() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
var headerHeight = document.getElementById('header').offsetHeight;
var footerHeight = document.getElementById('footer').offsetHeight;
var pushHeight = document.getElementById('push').offsetHeight;
var menuHeight = document.getElementById('menu').offsetHeight;
var contentElement = document.getElementById('content');
var contentbgElement = document.getElementById('content-bg');
contentElement.style.height = (windowHeight - (headerHeight + footerHeight + pushHeight + menuHeight)) + 'px';
contentbgElement.style.height = (windowHeight - (headerHeight + footerHeight + pushHeight + menuHeight)) + 'px';
}
}
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight=window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight=document.documentElement.clientHeight ;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight=document.body.clientHeight;
}
}
}
return windowHeight;
}
</script>
See you all around |
|||||||