Layout Breaking Up With Stretchable Content

PB

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!

Oct 30 '06 #1

PB

I just realised the TMB layout I described doesn't show up very well in
the posting - needs a blocked console font to see it properly. I
promise you I'm not throwing random text at the page! Copy the text and
paste it into notepad to see it more clearly.

PB wrote:

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!

Oct 30 '06 #2

Chris F.A. Johnson

On 2006-10-30, PB wrote:

I just realised the TMB layout I described doesn't show up very well in
the posting - needs a blocked console font to see it properly. I
promise you I'm not throwing random text at the page! Copy the text and
paste it into notepad to see it more clearly.

What's notepad?

What we need is a URL.
--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Oct 30 '06 #3

Ben C

On 2006-10-30, PB <pb******@googlemail.comwrote:
[snip]

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.

There are two ways you can make an image stretch. One is to use an img
element, but set width and height on it. The UA does some (poor quality
compared to programs like Photoshop) scaling.

Or use a div with background-image, and use the background-repeat
property to tile the image. If the image is a repeating wallpaper type
of pattern, then this is probably better.

Your ASCII diagrams came out fine. And it sounds like your positioning
is working because the corners are staying put.

Oct 30 '06 #4

Bergamot

PB wrote:

>
I designed my layout using Photoshop, then sliced everything up and
saved as a CSS web page.

This is a horrible way to construct a web page. A graphics program has
no business generating HTML or CSS.

I've been hacking at positioning with
absolute and relative but not getting anywhere.

This is the best way to make a layout that falls apart at the slightest
nudge. Take the time to learn how positioning methods really work
instead of hacking away, please. That includes the box model and floats.

I'm not trying to discourage you from doing your own coding, I just want
to emphasize that CSS isn't something you can learn overnight and you
can make a real mess of things if you don't know what you are doing.

--
Berg

Oct 30 '06 #5

PB

Hi all, thanks for the advice.

Have it all sort now. Took a few hours of perseverance before things
started to click in my head (or maybe it was a large "CLUNK!"). I
haven't used CSS to any great extent before, which is why I found it a
little frustrating, but now I have seen the light (and have since
stopped whimpering when things started to go all Picasso on me).

Working with Photoshop was actually quite useful. It pumped out all the
dimensions of the graphic shapes in absolute form for me, which was
very handy. I was under no illusion that it would do all the work for
me (I actually prefer working in code rather than a design view). It
was getting an understanding of absolute and relative positioning that
took a bit of time to sink in (I initially thought it it had to be
either absolute or relative but not both - now I'm aware that they can
be mixed together).

Here's a description of the solution I came up with:
I created absolute positioning for each of the three sections (top,
middle and bottom) to make the graphic elements stick together (a bit
like glue) and used wrapper DIVs to keep them self contained.

I then used a bit of relative positioning on these wrapper DIVs to make
them work flexibly together with a slight dash of absolute positioning.

My biggest piece of advice would be to get out a pen and piece of paper
to draw out how the various wrappers should work together. When
elements start mounting up it won't take much for a DIV to go astray.

PB.

Oct 31 '06 #6

Bergamot

PB wrote:

>
I created absolute positioning for each of the three sections (top,
middle and bottom) to make the graphic elements stick together

I can see it now - at my largish default text size, the 3 sections will
start overlapping. :-(

--
Berg

Oct 31 '06 #7

PB

I can see it now - at my largish default text size, the 3 sections will

start overlapping. :-(

Nope - just tested with a lot of text and very large fonts. No
overlapping. :-)

Nov 1 '06 #8