Hi,
I need some CSS layout guidance because I think I've been staring at
this too long!
I designed my layout using Photoshop, then sliced everything up and
saved as a CSS web page.
My problem arises when I started re-coding the html and CSS. My
graphics begin to break up at the bottom with large gaps and wrong
placement.
I need the top graphics to stay at the top, middle graphics to stretch
depending on the amount of content (this is where the problem seems to
arise) and the bottom graphics to stay at the bottom.
To clarify, the layout I have is something like this (T=top, M=middle,
B=bottom):
TTTT
TMMT
MMMM
BMMB
BBBB
Hope that looks OK in this posting - the letter spacing may be a bit
off but I hope you get the idea. This is what it looks like broken up
(to the right is the makeup of the separate graphic files):
TTTT T TT T
T T = T T
MM MM
MMMM = M MM M
MM MM
B B B B
BBBB = B BB B
To clarify, the top, middle and bottom sections all consist of 3
graphic sections (each having a left, middle and right graphic slice) -
i.e., there are pretty much 9 graphic elements in total.
The top protrudes down and bottom protrudes upwards, with the two outer
middle sections as stretching borders encompassing the content. As I
was saying, the middle sections ('M')needs to be stretchable to
accommodate variable content.
Is anyone aware of a CSS template or other solution that would put me
out of my misery? Even a few pointers to existing pages that have a
similar layout would be great. I've been hacking at positioning with
absolute and relative but not getting anywhere.
Thanks in advance for any help!