Adding a "copyright" Footer

artkuno1 / 2011-10-26 02:07:13   

Hi all,

I have created an indexhibit site with a horizontal nav menu, and I would like to add a footer beneath the body. i don't want it to stick to the bottom of the window, but the footer definitely needs to be positioned after all content in the body, which varies in length on each page.

i've added a div, #footer, to the post-nav text, where the content of the footer is. currently "copyright 2011..."

i can't figure out what to put in the css to have it be relative(?) to the body--which is not it's own div. Is this is issue? I'm sorry I'm not anywhere close to being an expert on positioning yet!!

site is here: http://aliciajo.apollohosting.com/indexhibitv070e/

i'm not sure it's useful to put my code here, but if I can share anything let me know.

thanks.

rickykappa / 2011-10-26 02:26:32   

I can't see the current footer, neither the link back to indexhibit... (forum rules)

artkuno1 / 2011-10-26 04:46:08   

Yes, the link back to indexhibit is going in this footer!

I have moved #footer out of post-nav to have more success, but now that I have put it on my Main page, of course, it only shows up on this one page. And depending on the browser, the wrong position.

...Using this CSS:

#footer {
    position: relative;
    top: 100%;
    display: block;
}

The goal would be to get it on all pages without actually copying it on to every single page, although I could do that if worst comes to worst.

blameme / 2011-10-26 08:30:05   

Hello, you will need to edit the index.php located here:
/indexhibitv070e/ndxz-studio/site/sample/index.php

Then add your
<div id="footer">Footer info in here</div>
down near bottom, just before these closing tag of the content div:

<div id='content'>
<div class='container'>
<!-- text and image -->
<plug:front_exhibit />
<!-- end text and image -->
</div>
<div id="footer">Footer info in here</div>
</div>

then in your .css remove the position:relative; and the top:100%;

artkuno1 / 2011-10-26 11:03:45   

blameme: thank you/gracias!

this is working. the footer is indeed appearing at the bottom of each page.

I still am trying to solve an issue: It looks like the footer positions itself after text in #content (i believe), but "ignores" image height on the pages that have images. this is problematic because the footer appears to be superimposed on the photo in those cases. how do I get it to "respect" the photos' heights?

thanks, again

artkuno1 / 2011-10-26 11:10:51   

i'm pretty sure this is happening because i have photos as z-index: -1, so that they can be behind the text. if i make #footer also have a z-index of -1, it doesn't solve the problem, though. (i am in serious need of a tutorial on positioning!)

Vaska A / 2011-10-26 11:24:11   

Validate your page - for starters you have a div in the head of your document - this could cause all kinds of strangeness.

artkuno1 / 2011-10-26 13:31:55   

Vaska, regarding divs in the header, are you talking about the divs in the "pre-nav" text area?

i wanted to position the title, so I thought that was harmless. If there is a better way to position it, I guess let me know.

Thanks again

Vaska A / 2011-10-26 13:35:04   

No, validate your page (W3C) and you will see that you have html in a place it can not exist (in the 'head' of the page).

This thread has been closed, thank you.