CSS - Making Footer "stick" To The Bottom

ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times?

Thnx

Hi everyone,

I am trying to create a div that will "float" over an image when the mouse is moved over the image.

I have got the div to appear and disappear when the mouse is hovered over the image, however, unless the positioning is absolute the page grows according to the size of the floating div.

Below is the code I have used. I am almost certain there is a better way to do this. Possibly without the javascript. Any suggestions would be greatly appreciated!

CSS:
Code:

#test {
	background-color: #6374AB;
	display:none;
	position: relative;
	top: -52px;
	z-index: 2;
	width: 400px;
}

#container {
	background-color: #c0c0c0;
	width: 500px;
	border: 1px solid #000;
	padding: 10px;
}

#fakeImage {
	background-color: #00ff00;
	width: 100px;
	height: 50px;
	border: 1px solid #000;
}

.opaque {
	opacity: .7;
	filter: alpha(opacity=70);
}

javascript:
Code:

function makeVisible(whichNavs)
{
	document.getElementById(whichNavs).style.display="block";
}
function makeInvisible(whichNavs)
{
	document.getElementById(whichNavs).style.display="none";
}

HTML:
Code:

<div id="container">

<div id="fakeImage" onMouseOver="makeVisible('test');" onMouseOut="makeInvisible('test');"><A HREF="javascript:">expanding link</A></div>

<div onMouseOver="makeVisible('test');" onMouseOut="makeInvisible('test');" id="test" class="opaque">shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf </div>
</div>

what is the equivilant to <table border="1" cellpadding="2" cellspacing="0"> in css?

i've tried
PHP Code:
 table
{
    border-spacing: 0px;
    padding: 0px;
    border-colapse: colapse;
    border-style: solid;
    border-width: 1px;
}
td
{
    border-style: solid;
    border-width: 1px;
    padding: 2px;
} 





That makes the width 2px wide though. I want it to only be one. And the padding seems to be messed up as well.

Hi, I'm sure this has been covered before, but I can't seem to find an example that relates to what I'm doing.

I basically want an to have a image with text on the left of it that is vertically alignment to bottom of the image.

Here's a link to a table version.
"visualstrategies.ca/jf_mackie/test.html"

I've been playing with a css only version for 5 hours and can't figure it out.

Any help would be great thanks.

sskully

I have a single column CSS layout with a "sticky" footer.

In the main column, I have a two column block resulting in a sidebar / main content set-up.

Without the two-column block, the stick footer works fine. I can fill the page with 1000 lines of text, simple content DIVs, whatever.

But the two-column block breaks it.

See it he

http://siliconsatan.com/test.php

Can't figure out why (I'm a CSS noob, it's probably obvious)

Any ideas?

I've been puzzling over this for a while now!

I'm trying to make the footer stick to the bottom of the page even when the content isn't long enough. I have read many tutorials but none of them ever seem to work out quite right.

I have created two pages to demonstrate the problems that I am having.

http://www.explosiveracing.net/xmed...all_content.htm

This is a page without much content and as you can see the footer is pushed to the bottom. All is well in FF but in IE the footers background seems to randomly disappear. Sometimes on a refresh it reappears but I cant work out what is causing it.

http://www.explosiveracing.net/xmed...ong_content.htm

This page has a large amount of content that pushes the footer further down. In IE though, the content partially overlaps the footer and the background image also still randomly disappears!

Any ideas?

I have a single table cell that will not display its border-bottom attribute in IE. I've searched the forums and the Web for a reason, but Googling for "css", "border" and "ie" brings up a minefield!

The table cell CSS looks like this:

Code:

td.cell_myCell {

    height:          10px;
    width:           490px;

    border-bottom:   1px solid #999999;
}

I'm using a Transitional DOCTYPE, mainly because it's default in Dreamweaver, and as far as I'm aware "border-bottom" is CSS2 valid.

The attributes always works in Firefox, but for some reason IE won't display it at all. It won't even display "border: 1px". Help!

I'm using the CakePHP framework to build my site.

I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width.

Here's what it's supposed to look like.
http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user..

Here's what I currently have.
http://planet-rpg(dot)com

Here's my coding.

html
Code:

<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
      <title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
      <?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
  <div id="frame">
     <div id="container">
       <div id="main_content">
            <p>Content area</p>
       </div>
     </div>
  </div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>

css
Code:

html {
	background: #2b435d;
}

html, body {
	margin: 0;
}

body, table {
	color: #303030;
	
}

img { border: 0; }

#body {
	background: #d8dde8;

	padding: 0 0 16px;
}

#page-wrap {
	min-width: auto;
	margin: 10px auto;
	}

#frame {
    margin: 0 auto;
    padding: 0px 1170px 0px 220px;
    margin-top: -17px;

}
#main_content {
	background-color: #fff;
}


#header {
	background: url("../img/header.png") repeat-x bottom left;
	height: 64px;
	margin-top: 36px;
}
#navigation {
   background: url("../img/navigation.png") repeat-x bottom left;
   height: 31px;
   margin-top: -20px;
   font-family: "Arial", sans-serif !important;
   font-size: 14px;
   color: #fff;
   text-shadow:-1px -1px 0 black;
   list-style-type: none;
   padding:1px 5px 1px 220px;
}
#navigation li {
	float: left;
}

#navigation li a {
	border-left: 2px solid #303030;
    text-shadow:-1px -1px 0 black;
	color: #D0D0D0;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;

	display: block;
	height: 21px;
	padding: 6px 12px 1px;
}

#navigation li a:hover {
	color: white;
	text-shadow:-1px -1px 0 black;
}

#navigation li.first {

	padding-left: 236px;
	margin-left: -236px;
	text-shadow:-1px -1px 0 black;
}

#navigation li.first a {
	background: url("../img/cursor.png")bottom center no-repeat; height:24px;
	color: #6193c7;
	border: 0;
	text-shadow:-1px -1px 0 black;
}

#logo {
	width: 166px;
	height: 50px;
	margin-top: -32px;
	margin-left: 20px;

	position: absolute;
	z-index: 2;
}

#footer {
	background: #607080 url("../img/footer.png") repeat-x;
	height: 60px;
	padding: 30px 0;

	clear: both;
}

#top_bar {
	background: url("../img/top_bar.png") repeat-x bottom left;
    height: 36px;
	font-family: "Arial", sans-serif !important;
	font-size: 12px !important;
	font-weight: normal !important;

    height: 36px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
}

I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed.

Hope someone can help me with my question.

http://stuweb.cms.gre.ac.uk/~as234/full/full.htm

some problems:

in IE the menu at the top is "block" level but i want it to be in a line? whereas in ff its ok!

in ff, one of the menu image (called "main" on the left of review) doesnt appear but if u hover over it, u will see the rollover image!

the background colour should be grayish however that DOESNT happen!

I need a way to make a menu id be just as long as the content, no shorter or longer, by somehow "linking" the id's to make them both end at one point. An example would be some sites that have the main content really long and then the menu running right down the side, even if there is nothing in it. If you don't understand what I mean, please ask and I will either give an example or clarify.

(I originally posted this at the end of another of my topics but I don't think it was seen).

I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen.

Example Picture

The site itself.

Any ideas?

Hi guys,

For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ?


Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html).

Thank you

Hi,

I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser.

Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important.

I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML

Here is my Html

PHP Code:
<DIV id="nav"> 
              <ul>
                <li id="1"><a href="Home">Home</a></li>
                <li id="2"><a href="About-us">About us</a></li>
                <li id="3"><a href="FlexNews">FlexNews</A></li>
                 <li id="4"><a href="Careers">Careers</A></li>
                <li id="5"><a href="Contact">Contact</A></li>
              </ul>
</div> 





Pretty straight forward, now my css


PHP Code:
#nav
{
    width:1005px;
    vertical-align: middle;
    text-align: left;
} 
#nav ul
{
    list-style: none;
    padding: 0;
    margin: 0;
} 
#nav li
{
    float: left;
    text-align: left;
} 
 
#1 a{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#1 a:hover
{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}

#2 a{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;



} 
#2 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#3 a
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#3 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#4 a
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#4 a:hover
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#5 a
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;

} 
#5 a:hover
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;

} 






Here is an exmple link http://dev.121design.co.uk/flextrade2/

Works fine in IE but not in Firefox, heres hopling someone can help.

Thanks in Advance, tried so many different methods and none seem to work.

Cheers,
Stuart

that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently.

However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image.

If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall.

(URL address blocked: See forum rules)/cv/cv.html

This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work?

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