dna23
Member
Registered: 1st Nov 04
Location: Northamptonshire
User status: Offline
|
Basically i'm building a site in HTML, it's a large table atm... 750px width 600px height...
Now it has a header at the top and down the sides ever so slightly (in green) I want this all to always stay at the top
It then has a main content area (red) in the middle for images/text .etc this will vary in height depending on content
It then has to gradients which are intended to be repeated (orange cross/spacker) as the content box grows. This will then merge with the bottom footer.
The footer is always at the bottom regardless of the browser size (blue) except if the content runs over the maximum size to be displayed, in which case it is at the bottom when the content ends.
Now I want it so that in a 1024x768, 1280x1024 .etc .etc the blue area is always at the bottom sitting flush with the browser or until the content ends then it sits flush and the green area is always at the top sitting flush.
The content then varies and as it does so the orange cross area repeats to maintain continuity between the green and blue.
Anyone got any idea of how to do this?
|
Dom
Member
Registered: 13th Sep 03
User status: Offline
|
People will tell you divs, but tbh i would use tables.
If the header is a single image, then cut it into three sections - top and the two sides.
Then build a table - top table (top part of header), left - split into two (left part of header) & what ever is in the orange section, right - split into two (same as left), middle content section, then a footer.
If you want only the contents to be scrollable whilst the main outlay is fixed then within the middle section use a float frame (iframe).
|
dna23
Member
Registered: 1st Nov 04
Location: Northamptonshire
User status: Offline
|
Cheers Dom, that's what I originally wanted to do but I decided I wanted the Content to define when the footer kicked in.... if it was larger than the height of the screen it simply appears when content ends. But if the content is smaller than the height of the screen the footer stretches down to the screen height so it always appears like a banner down the centre of the screen.
Unfortunately, the top section is a large amount of tables with links, maybe some flash when i get time, rollovers .etc .etc
|
drax
Member
Registered: 5th Feb 05
Location: Sittingbourne, Kent
User status: Offline
|
Can be done with divs, wont validate with tables, but you'd have to pay someone or actually learn what your doing to do it 
|
dna23
Member
Registered: 1st Nov 04
Location: Northamptonshire
User status: Offline
|
I'll learn, I've been reading into divs but I dont know them well enough to use them with the complexity of something I've designed....
the home about .etc links change images in the grey banner.... you can see what i want it all to do pretty clear I think.
|
Dom
Member
Registered: 13th Sep 03
User status: Offline
|
dont understand why everything has to validated, tables still work...infact they pretty much work flawlessly unlike divs (with each browser having its own view on how to produce the divs on screen).
sam - do you mean the footer is constantly at the bottom of the screen (right at the bottom and not just on the the end of the contents)?
|
dna23
Member
Registered: 1st Nov 04
Location: Northamptonshire
User status: Offline
|
Thats it Dom, constantly at the bottom of the screen. I'm describing it quite badly I think lol... hope it makes sense, here's a better pic:
The footer I basically want to appear as the very last thing at the bottom of the IE screen, so if you have minimal content it expands it so it reaches the bottom. If you have a lot of content then it simply stops when the content is over and footer has been inserted.
Make sense  ?
[Edited on 10-04-2007 by dna23]
|
dna23
Member
Registered: 1st Nov 04
Location: Northamptonshire
User status: Offline
|
http://www.graphyx.co.uk/
Like that above ^^ It's always at the bottom but just imagine it if the content was smaller than your browsers height it wouldn't appear with a white space below it, it'd extend down to the base.
That should help you visualise it.
[Edited on 10-04-2007 by dna23]
|
James
Member
Registered: 1st Jun 02
Location: Surrey
User status: Offline
|
CSS is the best way to keep a footer at the bottom, cant remember which property it is you need to set though.
|
drax
Member
Registered: 5th Feb 05
Location: Sittingbourne, Kent
User status: Offline
|
You do it by positioning the divs, and setting its position away from the last div, with height, margins, paddings. As far as I know theres no way you can really do it with no content there, just put in a couple of <p> </p>'s
|
Dom
Member
Registered: 13th Sep 03
User status: Offline
|
Personally, in a bodge kind of way i would look at use an iframe for the contents, meaning the contents middle bit is only scrollable and the rest of the main page (index) is static in movement.
You could also look at using frames if you wanted to do this.
Otherwise im not 100% sure to be honest sam, long time since i've done website design 
Trial an error would be my method if i was doing it - construct the tables, place fixed heights on the header and footer (sides should leave, ie: height="") then try load the contents section with different amounts of data. Then try placing a fixed or percentage height for the contents row.
sorry i cant be much help otherwise though
|
dna23
Member
Registered: 1st Nov 04
Location: Northamptonshire
User status: Offline
|
Trial and Error it is for now Dom, I shall try and do it that way but if all else fails I shall do divs, havent really got time to learn them atm though will have to wait till summer.
Thanks Dom and drax for the advice been a good help!
|
James
Member
Registered: 1st Jun 02
Location: Surrey
User status: Offline
|
Sam put this code in your CSS
#footer {
position: absolute;
bottom: 0; padding: 10px;
}
Then put <div id="footer">Footer here</div>
|
drax
Member
Registered: 5th Feb 05
Location: Sittingbourne, Kent
User status: Offline
|
quote:
Originally posted by James
Sam put this code in your CSS
#footer {
position: absolute;
bottom: 0; padding: 10px;
}
Then put <div id="footer">Footer here</div>
put the div bit in the bottom of your html page 
|
dna23
Member
Registered: 1st Nov 04
Location: Northamptonshire
User status: Offline
|
Will give it a try James
Any idea of once i've done that how to get the image to repeat so it fills the void left over?
|
drax
Member
Registered: 5th Feb 05
Location: Sittingbourne, Kent
User status: Offline
|
set it to a background of a div, or the body
body {
background:url(path/to/image/background.jpg) repeat-x top center #000000;
}
where the #000000 is the hex colour for the part of the background which doesnt have the image, repeat-x will repeat left to right, repeat-y will repeat top to bottom, no-repeat will place the image once, you can also add, top, center, left right, to the background attribute to show where the image will start before it repeats,
like in the example
|
drax
Member
Registered: 5th Feb 05
Location: Sittingbourne, Kent
User status: Offline
|
you could just do a 3px high image thats 750px wide, which repeat-y in the center of the page, which will give you the background effect that you've shown in that image above
|
Steve
Premium Member
Registered: 30th Mar 02
Location: Worcestershire Drives: Defender
User status: Offline
|
you can do it with tables, if you want to do it with tables let me know
|
dna23
Member
Registered: 1st Nov 04
Location: Northamptonshire
User status: Offline
|
drax, thanks for that info i'll give it a try later when I'm at home
Steve i've u2u'd you
|
Steve
Premium Member
Registered: 30th Mar 02
Location: Worcestershire Drives: Defender
User status: Offline
|
iv knocked up a quick example you render the table using Quirks mode
http://www.vagweb.co.uk/forums/downloads/examplequirks.html
right click view source that page for the code
ignre the CSS bit as that just setts the page background
[Edited on 11-04-2007 by Steve]
|
Steve
Premium Member
Registered: 30th Mar 02
Location: Worcestershire Drives: Defender
User status: Offline
|
then just stick your footer table at the bottom of the main table there
|
