Best practice for sections with elaborate borders?

**Leif K-Brooks** · Jul 23 '05, 10:57 PM

Re: Best practice for sections with elaborate borders?

Will Hartung wrote:[color=blue]
> The designers have handed me a page that has 5 different blocks on it in the
> center column (in a typical 3 column layout with page spanning headers and
> footers).
>
> Typical example:
>
> <table style="text-align: left;" border="0" cellspacing="0" cellpadding="0" >[/color]
<snip>[color=blue]
> </table>[/color]

http://allmyfaqs.com/faq.pl?Tableless_layouts

[color=blue]
> We're coding for IE 5.5+, Mozilla, and Safari if that helps.[/color]

Code for the Web, not for a particular group of browsers.

**Brian** · Jul 23 '05, 10:57 PM

Re: Best practice for sections with elaborate borders?

Will Hartung wrote:[color=blue]
> The designers have handed me a page that has 5 different blocks on it
> in the center column (in a typical 3 column layout with page spanning
> headers and footers).
>
> The blocks have elaborate headers (large images), and small content
> areas that will hold little blocks of text.[/color]

That sounds like an odd design choice. Are the headings so important
that the remaining content should be shafted?
[color=blue]
> Currently, I have this done with pixel specific tables within tables
> within tables, using the images as backgrounds of the repseective
> TD's.[/color]

Presumably because you cannot do it with css?
[color=blue]
> But beyond that I'm just curious what others are doing for this kind
> of layout.[/color]

I use css to suggest layouts to clients.

[color=blue]
> <table style="text-align: left;" border="0" cellspacing="0" cellpadding="0" >
> <tbody>
> <tr>
> <td style="vertical-align: top; width: 191px; height: 65px;"
> background="web/cc_letter_heade r.gif">
> </td>
> </tr>
> <tr>
> 
> <td style="vertical-align: top; width: 191px; height: 191px;"
> background="web/cc_letter_body. gif">
> </td>
> </tr>[/color]

That doesn't look much like tabular data, though.

--
Brian (remove "invalid" to email me)

**Will Hartung** · Jul 23 '05, 10:57 PM

Re: Best practice for sections with elaborate borders?

"Brian" <usenet3@juliet remblay.com.inv alid> wrote in message
news:ykPtd.1057 841$Gx4.652049@ bgtnsc04-news.ops.worldn et.att.net...[color=blue]
> Will Hartung wrote:[color=green]
> > The blocks have elaborate headers (large images), and small content
> > areas that will hold little blocks of text.[/color]
>
> That sounds like an odd design choice. Are the headings so important
> that the remaining content should be shafted?[/color]

Imagine, if you will, a small frame with an elaborate border (like a picture
frame) with a blurb of text in the middle. The frame is essentially static
and fixed, the text needs to be replaceable. The top parts of the frame, for
example, has says something like "Recent Letters" in pretty text with a nice
little folksy letter icon, or "Latest News" with a newspaper icon against a
star filled background. Stuff like that.
[color=blue][color=green]
> > Currently, I have this done with pixel specific tables within tables
> > within tables, using the images as backgrounds of the repseective
> > TD's.[/color]
>
> Presumably because you cannot do it with css?[/color]

Specifically because I have yet to figure out how to do it with CSS (thus
the search for "best practice" and technique).
[color=blue][color=green]
> > But beyond that I'm just curious what others are doing for this kind
> > of layout.[/color]
>
> I use css to suggest layouts to clients.[/color]

That's the overall goal, but my primary goal is to get it working as best
and quickly as practical.
[color=blue][color=green]
> > <table style="text-align: left;" border="0" cellspacing="0"[/color][/color]
cellpadding="0" >[color=blue][color=green]
> > <tbody>
> > <tr>
> > <td style="vertical-align: top; width: 191px; height: 65px;"
> > background="web/cc_letter_heade r.gif">
> > </td>
> > </tr>
> > <tr>
> > 
> > <td style="vertical-align: top; width: 191px; height: 191px;"
> > background="web/cc_letter_body. gif">
> > </td>
> > </tr>[/color]
>
> That doesn't look much like tabular data, though.[/color]

Nope. A pure layout jail.

The basic problems are simply that you have a director who last worked on a
website 4 years ago using a design team with a history in the print market
implemented by someone with extensive backend experience but little front
end (me). My goal at this stage is to do what they want, the way they want
it, and go from there.

I find CSS able to do some things, but difficult to do others. Most typical
is getting all of my columns expanded properly:

========
## #### ##
## #### ##
## #### ##
## #### ##
========

Typically I get:
========
## #### ##
## #### ##
__ #### ##
__ ####
========

( == are hdrs/ftrs, __ are "spaces"... hard to line up in a proportional
font).

I could probably do this entire page using absolute positioning of the
graphics and elements, in fact I know I could. I was playing a bit with that
last night and had reasonable success.

With regards to positioning, absolute positioning is relative to the screen
origin, and relative positioning is relative to the original element
position. Is there a technique to place an object relative to its containers
origin? Absolute positioning removes an item from the flow. It would be nice
to be able to create a box element (like a div tag) that is IN the flow, but
place elements "absolutely " within it, so when, say, a header expands, all
of the positioning doesn't get mucked about.

Is there a technique for that? Or do I need Javascript? Javascript is a last
option.

I could pin down all of the elements absolutely, but I want the items to
flex in the mostly text areas. This one page I'm talking about, though, is
pretty static. Since the site as a whole is rather static, that's why I
picked specific browsers.

Oh, I'm doing this all by hand. Most sophisticated tool I'm using is Mozilla
Composer.

Thanx for any pointers.

Regards,

Will Hartung
(willh@msoft.co m)

**David Button** · Jul 23 '05, 10:57 PM

Re: Best practice for sections with elaborate borders?

In article <31pn1dF3ehsk0U 1@individual.ne t>, Will Hartung
<willh@msoft.co m> wrote:

<snip>
[color=blue]
> But beyond that I'm just curious what others are doing for this kind of
> layout.
>[/color]
<snip>

I found the 'colored boxes' CSS layout method as detailed at
http://www.maxdesign.com.au/presentation/process/ very useful for
setting up CSS page layouts from scratch. The step-by-step tutorial is
easy to follow and was also easy to adapt for my own needs. It also
allows you to get your CSS layout right *before* you start entering any
content.

Demo site set up from the above the tutorial:

http://distance.education.salford.ac.uk/enterprise/index.html

Note: it is just a demo - some links work, others don't. The layout is
intended to be flexible to some extent e.g. the main content (centre
column) is flexible for different browser/screen widths, while the
narrower left and right columns remain fixed in width.

The 'colored box' layout (no content) on which this is based is also
available at

http://distance.education.salford.ac.uk/enterprise/layout.html

HTH,
--
Dave

Best practice for sections with elaborate borders?

Best practice for sections with elaborate borders?

Comment

Comment

Comment

Comment