• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

trying to move a div

 
Bartender
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I am forced to use a company standard WebPage object that includes our header with menus and a standard footer. But because of the DOM structure, the footer floats up and down the page and it's driving me crazy. In order to fix this, I need to change the DOM structure. The standard structure looks like this:

<head></head>
<body>
<div id="mainmenu">
<div id="wrapper">
<div id="footer">
</body>

In order to fix the footer using CSS, I need a structure that looks like this:

<head></head>
<body></body>
<footer></footer>

So I'm trying create a simple javascript that moves that footer div outside of the body. I've tried this:

and this...

and this...

but the page stops loading halfway without throwing any errors. I'm not sure if I'm using the incorrect syntax, or if the DOM is so screwed up that this simply isn't going to work.

If you tell me "that should work" then I'll blame it on the WebPage object and give up. Am I approaching this correctly?



 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Um, the footer element needs to be inside of the body element.

Why don't you fix the issue with CSS?

Eric
 
J. Kevin Robbins
Bartender
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Crap. Stupid mistake. I misunderstood the sites I've been looking at like here and here. I always end up with a fixed footer with the page content scrolling underneath the footer and it looks terrible. Using position:fixed or position:absolute doesn't seem to allow the footer to move down when the page content extends beyond the footer.

So maybe I need to insert a wrapper container around the header and main content and then the footer.....back to the drawing board....
 
J. Kevin Robbins
Bartender
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
btw, thanks for getting pointed back in the right direction. I came up with this idea last night while working in the garden and tried to do it first thing this morning. I think I need more coffee before I start writing code...
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
set a min height on the wrapper element. Most normal layouts would call that area content.
 
J. Kevin Robbins
Bartender
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Got it! That second link in my previous post was the most helpful, I just had to read it more carefully. Now my footers stay where they are supposed to. I think that "push" div was the key to avoiding the "content under the footer" problem. For future reference for others, this is the css I ended up with.



Thanks!
 
reply
    Bookmark Topic Watch Topic
  • New Topic