473,394 Members | 1,714 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,394 software developers and data experts.

Best practice for sections with elaborate borders?

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.

Currently, I have this done with pixel specific tables within tables within
tables, using the images as backgrounds of the repseective TD's.

It all looks perfect in Mozilla, but I'm having spacing issues with Win/IE
between the blocks (I'm using margins, and empty divs ala <div
style="height: 10px"/> to seperate the blocks).

But beyond that I'm just curious what others are doing for this kind of
layout.

Typical example:

<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_header.gif">
</td>
</tr>
<tr>
<!-- cc_letter_body.gif is 1 pixel high -->
<td style="vertical-align: top; width: 191px; height: 191px;"
background="web/cc_letter_body.gif">
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 191px; height: 10px;"
background="web/cc_letter_footer.gif">
</td>
</tr>
</tbody>
</table>

We're coding for IE 5.5+, Mozilla, and Safari if that helps.

Thanx!

Regards,

Will Hartung
(wi***@msoft.com)
Jul 23 '05 #1
4 2297
Will Hartung wrote:
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"> <snip> </table>
http://allmyfaqs.com/faq.pl?Tableless_layouts
We're coding for IE 5.5+, Mozilla, and Safari if that helps.


Code for the Web, not for a particular group of browsers.
Jul 23 '05 #2
Will Hartung wrote:
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.
That sounds like an odd design choice. Are the headings so important
that the remaining content should be shafted?
Currently, I have this done with pixel specific tables within tables
within tables, using the images as backgrounds of the repseective
TD's.
Presumably because you cannot do it with css?
But beyond that I'm just curious what others are doing for this kind
of layout.
I use css to suggest layouts to clients.

<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_header.gif">
</td>
</tr>
<tr>
<!-- cc_letter_body.gif is 1 pixel high -->
<td style="vertical-align: top; width: 191px; height: 191px;"
background="web/cc_letter_body.gif">
</td>
</tr>


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

--
Brian (remove "invalid" to email me)
Jul 23 '05 #3
"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:yk**********************@bgtnsc04-news.ops.worldnet.att.net...
Will Hartung wrote:
The blocks have elaborate headers (large images), and small content
areas that will hold little blocks of text.


That sounds like an odd design choice. Are the headings so important
that the remaining content should be shafted?


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.
Currently, I have this done with pixel specific tables within tables
within tables, using the images as backgrounds of the repseective
TD's.


Presumably because you cannot do it with css?


Specifically because I have yet to figure out how to do it with CSS (thus
the search for "best practice" and technique).
But beyond that I'm just curious what others are doing for this kind
of layout.


I use css to suggest layouts to clients.


That's the overall goal, but my primary goal is to get it working as best
and quickly as practical.
<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_header.gif">
</td>
</tr>
<tr>
<!-- cc_letter_body.gif is 1 pixel high -->
<td style="vertical-align: top; width: 191px; height: 191px;"
background="web/cc_letter_body.gif">
</td>
</tr>


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


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
(wi***@msoft.com)
Jul 23 '05 #4
In article <31*************@individual.net>, Will Hartung
<wi***@msoft.com> wrote:

<snip>
But beyond that I'm just curious what others are doing for this kind of
layout.

<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...ise/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...se/layout.html

HTH,
--
Dave
Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

131
by: Peter Foti | last post by:
Simple question... which is better to use for defining font sizes and why? px and em seem to be the leading candidates. I know what the general answer is going to be, but I'm hoping to ultimately...
7
by: Hostile17 | last post by:
I'm trying to arrive at a kind of "industry standard" or "best practice" approach to CSS for a policy document aimed at developers, but not necessarily very experienced developers. What does the...
9
by: Mark Twombley | last post by:
Hi, I'm just getting back into C++ and had a question about the best practice for assigning error numbers. I have been working in VB for sometime now and there you would start assigning error...
136
by: Matt Kruse | last post by:
http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their...
14
by: 42 | last post by:
Hi, Stupid question: I keep bumping into the desire to create classes and properties with the same name and the current favored naming conventions aren't automatically differentiating them......
0
by: Mike Smith | last post by:
Hey ppl , Need some input on the following. I'm creating an asp.net site to fill in an online form. The form has many sub sections and in total is about 8 pages long (hard copy). Whats the best...
2
by: Ronald S. Cook | last post by:
What is the best way to structure my Windows form so that when it is dragged bigger (i.e. maximized) or smaller, the controls will reorganize themselves "properly"? Assume I have 4 logical...
15
by: Bob Alston | last post by:
Is it considered best practice to distribute FE databases as MDEs rather than MDBs? Without flaming me for asking the question, could someone please enumerate the key advantages? Also I like to...
2
by: Laurent Bugnion | last post by:
Hi, I like to develop custom controls for a number of webpages. These controls are often customizable, so that they can be reused in a number of situations. My question is: What is the best...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.