css help. extend site for length of page?

[Far]

I'm building a site in css, i have 3 images, header, footer, centre image.

i want the page to extend if i have content in the middle, so the centre image looks like its either 2px long, or 2000px long, depending on how much content i have in the beginning (like more website do really).

is this just a simply task of making the centre image behind the header and footer, so it looks like its extending?

and examples, or tutorials on this would be great, im not really sure what to look under.

 

[JealY]

Not sure what you mean exactly mate...

Something along these lines? (Bad drawing, meh!)

 

[Far]

yeah sorta. but F is always at the bottom, so if u have a huge monitor its still at the bottom, and then moves up if you make your browser smaller. so H is always at the top, F always at the bottom, and the middle image extends depending on how much content you have between.

jus need a sample script to get me going really.

 

[JealY]

So you want F to always be at the bottom regardless of how much content?

Say if there's a line of text just to say "Welcome" in it, the F will be at the bottom and there will be lots of space in the middle?

The way I would go about doing that would be to do a table with 3 rows, with a background image (probably a Y tiled gradient or a border of sorts) in the middle cell.

Make the table height 100% and it should fill the page no matter how big the screen / window size is.

Then obviously your header & footer in the top & bottom cells respectively.

 

[Far]

i dont wanna use tables. want just css.

i have a header image, a LONG content image, and a footer image.

header always at top, footer always at bottom, and content image grows depending on how much content i have.

i just dont know how to hide the content image behind the other 2 images, so it only shows more if i have more content.

 

[JealY]

Hmmm, i'm not very fresh with CSS. Maybe find a template that has this & see if you can learn from it?

 

[Far]

yeah i've tried that. but all templates ive found have too much content in them already, so its hard to find out which bit does what :/

thanks tho

 

[Alecs]

It's pretty easy to do. You just need a bit of imagination :P

Well, i'll try to explain how I would do it.

-Add and background image for the content (1024x4096)
-Add the text you want to the site
-Now editing the .css you can choose the height of the content. If the content has only 2 lines of text, make it to show 1024x200. If you add more text increase the height of the content and it's done.


I hope you understand me :/

 

[Far]

yeah i know 'what' needs to be done. i just dont know 'how' i put that in to css. i can choose the length (height) of the image just fine. but how do i make it automatically small, then increase when there text?

edit: actually nvm. seems like i was complicating things. if i just remove the height attribute it automatically changes the length for me

 

[Alecs]

I'm not sure about how to make it to ingrease the height automatically. Shouldn't be difficult, i think i've made it before but i don't remember it right now.