Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fixed Footer? Re: Fixed Footer?

#76238
Unregistered
Member

I’ve googled a number of other tutorials and applied it for the fixed footer but none of them works. I have a guess on what’s causing this but I’m unsure.

I’ve spent the past 6+ hours on this problem and this is driving me to the deep-end.

Is it ok if I post the html and css files? Maybe you can check what’s wrong with it. I want to show you the site, but it’s Joomla. 000webhost doesn’t accept the amount of files from it.

Here’s what happened:

I used psd2cssonline to get a Joomla css template out of a photoshop layout that I made. Now with psd2css – when converting to css that can be placed easily on Joomla, it requires a position layer as well as the graphics layer. In a nutshell, there are two footers there. One has the _joomla suffix while the other one has none. The _joomla suffix is invisible and is just the placement guide for the graphics layer.

My guess is that the two layers are causing this problem.

HTML

Code:














CSS

Code:
/*
* psd2css.css
*
* This is your external CSS style sheet. It defines all of the CSS styles that you
* are using in your page. If you are going to create multiple pages from the same
* PSD file (like a template), you will share this CSS style sheet between the various
* pages.
*
* This file was originally generated at http://psd2cssonline.com
* May 21, 2010, 9:21 am with psd2css Online version 1.78
*
*/
body {background-color:#000000;}

/* You named this layer _center_empty */
#Layer-1 {
position: absolute;
margin-left: -512px;
left: 50%;
top: -1px;
width: 1024px;
height: 870px;
z-index: 1;
background-color:000000;

}

/* You named this layer container_empty */
#Layer-2 {
position: absolute;
left: -1px;
top: +462px;
width: 1025px;
height: 406px;
z-index: 2;
}

/* You named this layer bottom_relative */
.Layer-3 {
position: relative;
left: 1px;

width: 1024px;
height: 98px;
z-index: 3;
margin: -50px auto 0 auto;
}

/* You named this layer footer_joomla_fixed */
#Layer-4 {
position: fixed;
left: +0px;
top: +767px;
width: 1024px;
height: 98px;
z-index: 4;
margin: -50px auto 0 auto;
}

/* You named this layer middle_relative_bkgnd */
.Layer-5 {
position: relative;
left: 81px;
top: 0px;
width: 584px;

z-index: 5;
background-image: url(../Layer-5.png);
}

/* You named this layer upper_relative_bkgnd */
.Layer-6 {
position: relative;
left: 81px;
top: 0px;
width: 584px;

z-index: 6;
background-image: url(../Layer-6.png);
}

/* You named this layer content_joomla_relative */
.Layer-7 {
position: relative;
left: 0px;
top: 45px;
width: 584px;

z-index: 7;
overflow: auto;
}

/* You named this layer top */
#Layer-8 {
position: fixed;
left: -1px;
top: -1px;
width: 1025px;
height: 82px;
z-index: 8;
}

/* You named this layer top_joomla_fixed */
#Layer-9 {
position: fixed;
left: -1px;
top: -1px;
width: 1025px;
height: 82px;
z-index: 9;
}

/* You named this layer breadcrumb */
#Layer-10 {
position: absolute;
left: -2px;
top: +404px;
width: 1025px;
height: 58px;
z-index: 10;
}

/* You named this layer breadcrumb_joomla */
#Layer-11 {
position: absolute;
left: -2px;
top: +404px;
width: 1025px;
height: 58px;
z-index: 11;
}

/* You named this layer user3_joomla */
#Layer-12 {
position: absolute;
left: 381px;
top: 27px;
width: 621px;
height: 38px;
z-index: 12;
}

/* The example data provided by Joomla uses region user3 for the top menu.
* So here we add a couple of CSS rules to give you an idea as to how to
* build your Joomla menu. Use FireBug (on Firefox) to customize the
* settings in these rules live while you are viewing your site. */
#Layer-12 li {
display: inline-block;
list-style-type: none;
}

#Layer-12 a {
/* Try some other values here to changes the size of your menu items. */
padding: 2px 10px;
background-color: #FFF;
}

#Layer-12 li a:hover {
background-color: #000;
color: white;
}

/* You named this layer prototype */
#Layer-13 {
position: absolute;
left: 109px;
top: 23px;
width: 251px;
height: 38px;
z-index: 13;
}

/* You named this layer showcase */
#Layer-14 {
position: absolute;
left: -2px;
top: +80px;
width: 1025px;
height: 325px;
z-index: 14;
}

/* You named this layer showcase_joomla */
#Layer-15 {
position: absolute;
left: -2px;
top: +80px;
width: 1025px;
height: 325px;
z-index: 15;
}

/* You named this layer breadcrumb */
#Layer-16 {
position: absolute;
left: 1px;
top: 2px;
width: 1024px;
height: 39px;
z-index: 16;
}

/* You named this layer breadcrumb_joomla */
#Layer-17 {
position: absolute;
left: 1px;
top: 2px;
width: 1024px;
height: 39px;
z-index: 17;
}

/* You named this layer container_empty */
#Layer-18 {
position: absolute;
left: 733px;
top: 0px;
width: 292px;
height: 277px;
z-index: 18;
}

/* You named this layer middle_relative_bkgnd */
.Layer-19 {
position: relative;
left: 11px;
top: 0px;
width: 234px;

z-index: 19;
background-image: url(../Layer-19.png);
}

/* You named this layer left_joomla_relative */
.Layer-20 {
position: relative;
left: 0px;
top: 23px;
width: 234px;

z-index: 20;
}

/* Here are some examples of how you might want to change the
* look and behavior of the links on your page. Some examples for
* further customization are included in comments. */
a {
cursor: pointer;
outline: none;
}
a:link { color: #F88; }
a:visited { color: #F88; }
a:hover {
color: #F00;
/* text-decoration: underline; */
/* font-weight: bold; */
}

/* Custom CSS examples/suggestions for Joomla –
*
* Here are some examples of some changes you can make to stylize the output
* from Joomla. These are just suggestions, you can change them to whatever
* you would like. There are many other classes and ids that you can modify
* CSS for from Joomla too. I suggest using Firebug and the ‘Inspect’
* feature there to find the name of the class or id of an element of the
* page that you want to stylize, and add it to this section.
*
* If you plan on re-converting your design often, be careful – this page is
* automatically regenerated every time. So if you don’t want to loose some
* CSS you’ve added here, move all your custom CSS to your own external
* stylesheet and reference it externally from the index.php file (make sure
* your reference is _after_ the reference to psd2css.css).
*/

body { color: #888; }
img { border: 0 }
ul {
list-style-type: none;
padding-left: 0;
margin: 0;
}
.moduletable_menu h3 {
margin-top: 0;
}
.componentheading { font-size: 2em; }
.contentheading { font-size: 1.5em; }
.small { font-size: 0.7em; }
.createdate { font-size: 0.7em; }
.pagination span, .pagination a { padding: 0 6px 0 6px; }