Help - Search - Members - Calendar
Full Version: Moving Elements
HTMLHelp Forums > Web Authoring > General Web Design
Gumbo
I'm trying to add information to a web page that somebody else has written. The page has coloured bar in the footer as defined in a css file but only height, width and colour are defined.
After adding the required text to the page I now find that this footer is now halfway up the page and has not moved down with the text.
I've tried all sorts to move the footer but it just stays where it is.
Does anybody have any ideas how I can get it to the bottom of the page.
I hope I've made that clear enough.
I'm using Dreamweaver to edit the site.
Thanks
Phil
pandy
Have a URL where we can see this?
Gumbo
QUOTE(pandy @ Aug 28 2009, 03:28 AM) *

Have a URL where we can see this?


http://www.springhairandbeauty.co.uk/recruitment.html

I should add that in 'design' mode the bar does appear at the bottom of the page.
The footer/bar is within DIV tags which I think are causing my problem cos I don't know how to use em!!!
pandy
I don't understand what the design bar is?

I see the problem. What text did you add? Did you change any HTML or CSS?
pandy
I haven't looked at the CSS, so this is a little guesswork, but I think the footer is supposed to be part of #midcolumn. So if you move the closing tag for the midcolumn DIV to after the footer DIV i think the footer will snap back in place.
Gumbo
The text that was added was all the stuff for the job vacancies. No HTML or CSS was changed.
I've moved the midcolumn closing DIV tag which has now put the bar at the bottom of the page but it's not right. If you look now the bar is now centering on the text rather than the page.

http://www.springhairandbeauty.co.uk/review/recruitment.html

This is all new to me so I'm picking stuff up all the time but it looks to me like the text and form are in the 'midcolumn' the gif 'recruitement' is in the 'left-column' the 'footer' inside the DIV tags then goes below these two columns. Looking at th epage in design mode I noticed that the columns only go down to about as far as where the footer appears on the page which kind of makes sense, SO I change the size of the columns in CSS and guess what? It didn't make a difference.
Frederiek
You shouldn't have moved the closing div of the midcolumn. Now the footer is contained in that div. It should be outside that one but maybe still within the #container div.
See http://www.cssstickyfooter.com/

As for the height of the two column div's, you don't need to set a height for the right column. There only have to be some changes if you want the left column be as high as the right column.
See http://css-discuss.incutio.com/?page=AnyColumnLongest

BTW, pass the page through the validator.
pandy
He moved it because I asked him to. The way you suggest was how it was to start with. It ends up in the middle of the page.

Sorry, but too tired to read the style sheet now. Will do tomorrow of it isn't solved by then (pandy says hopefully).
Gumbo
I've now solved it by altering the heights of the columns.
My fault entirely, I wasn't saving the css file once I'd made the changes, just the HTML blush.gif blush.gif
Still, that's how we learn.
Thanks to everybody for the help.
pandy
But you said you didn't make any changes... Oh well. All's well that ends well. biggrin.gif
Gumbo
QUOTE(pandy @ Aug 29 2009, 06:28 AM) *

But you said you didn't make any changes... Oh well. All's well that ends well. biggrin.gif


Sorry, didn't make that totally clear. Obviously I was playing with it while waiting for answers and changed css after failed div move so when I said I hadn't changed anything that was correct at the time.

I have now found that the page doesn't display correctly in earlier versions of IE but is fine with IE 8 until using compatability mode, most annoying.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.