Auto Positioning of includes and content on webpage

[barbs75]

Hi everyone!

 

Not sure whether this is CSS or just PHP related, but i am trying to organise my webpage efficiently where i have a topbar a bottom bar and then page content in between.

 

I have created a page called topContent.html which holds the logo, topmenu on the page and have then created a a page called BottomContent.html which holds my content bar and copyright logo at the bottom of the page.

 

These have been put into my login_form.php page using include statements at the start and the end of the body of my page, with all the content of the login_form.php page in between.

 

What i would like to achieve is that on all my pages the bottomContent.html page moves depending on the content before it, for example if i have a small amount of content on the page, the bottomContent.html include will appear on the screen further up the page, and if there is a large amount of content which vertically takes up a lot of space, then the bottomContent.html include will be located underneath this further down the page automatically.

 

At the moment i have the BottomContent.html include inserted within a div tag called 'footer' which is located on a linked external CSS file and has an absolute positioning of top:960px, which works for other pages, but on my login_form.php page, as it has less content, is right at the bottom of the page.

 

Can anyone tell me how automatic layout like this is achieved? is it done using CSS? obviously you can create different div tags for every include on each separate page in the CSS, but this doesnt seem good practice to me!!

 

i have attached a doc file which contains the scripts for the following pages:

- login_form.php

- Style1.CSS

- BottomContent.html

 

Please have a look and help me out! i would be most grateful

 

cheers

 

Craig (barbs75)

 

[attachment deleted by admin]

[roopurt18]

My solution would be to not have position: absolute assigned to the footer, that just seems odd to me.  However, your entire page layout is likely attached to this.

 

You could try adding:

  <style type="text/css">
    div#footer {
      position: relative;
    }
  </style>

as part of the content on the page you're trying to fix and see what that does.

 

If you're not already using it, FF has two extensions (Firebug and Web Developer) that make adjusting CSS on the fly easy to do; it might make it easier to redesign your site and fix the CSS.

[mars_rahul]

if u are have concept of PHP then use

"include" function.

 

no more div and other.

But if u want to do this using CSS and HTML then i dont know much on this topic

 

[barbs75]

roopurt, thanks for your reply

 

yes i have been reading up on CSS positioning, and i have used absolute positioning in my CSS.

For the effect i am trying to create, do i need to use relative positioning for all my objects?

 

what you suggested to add didnt work!!

 

cheers for your help

 

Craig (barbs75)

[roopurt18]

I'm no expert on CSS, but I find that I just about never use absolute positioning.  I don't design a lot of sites though so take what I say on CSS with a grain of salt; it's not my area of expertise.

[TheFilmGod]

I'm no expert on CSS, but I find that I just about never use absolute positioning.  I don't design a lot of sites though so take what I say on CSS with a grain of salt; it's not my area of expertise.

 

absolute positioning is something any web developer frowns on. It keeps thing glued to the same place - so if you have more content it won't shift down, and if the screen resolution is larger, the site will still be shifted to the left.

 

There is an exception and that is nesting absolute positioning in another div to create three columns - the best way to go around that.

 

You shouldn't use relative positioning either. Simply put the content in a normal div without any css declaration and three boxes on top of each other should be formed.