Table-based design issue

Freeway
1

I hang with a curious problem on a website I’m currently about to create, see this screenshot at TOBIAS EICHNER IT + CONSULTING - Information Technology Is Our Universe ! :

Note the grey “S” shape that surrounds the content of the page; this should reflect the logo of the company.

It was simply realized by creating a table with four columns, adjusting their width and background color.

Now this site should get done (with over 20 pages planned). But the client does not like the “spaces” between the table elements.

When I now set cell padding and cell spacing to 0, I get the desired look, but it also destroys me the rest of the table (the spacing between the two text columns is intended, for example).

So I gave it also a try creating a table in a table, which works fairly, but it seems not quite the most professional way.

Therefore I wonder if someone of you has an idea how to solve this more elegant thus compatible to common webbrowsers. Maybe there is a trick with combined image boxes, but when I gave this a try, it looks either great in one browser, but not in the other. Anyway, if all fails, I have to go with tables-in-tables, but it’s not the solution I find elegant.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

I agree with your client. The gaps look very awkward.

Why not start with a dark grey area which is behind the text/table
area. Then create 2 html text areas with the light grey/green colour
and position them so that they become the negative space in the S.
You may need to play with layers and combine or not combine to
achieve what you want but at least the gaps should disappear.
Cheers
Pete

On 31 Jan 2008, at 10:05, tobiaseichner wrote:

I hang with a curious problem on a website I’m currently about to
create, see this screenshot at TOBIAS EICHNER IT + CONSULTING - Information Technology Is Our Universe !
screen.gif :

Note the grey “S” shape that surrounds the content of the page;
this should reflect the logo of the company.

It was simply realized by creating a table with four columns,
adjusting their width and background color.

Now this site should get done (with over 20 pages planned). But the
client does not like the “spaces” between the table elements.

When I now set cell padding and cell spacing to 0, I get the
desired look, but it also destroys me the rest of the table (the
spacing between the two text columns is intended, for example).

So I gave it also a try creating a table in a table, which works
fairly, but it seems not quite the most professional way.

Therefore I wonder if someone of you has an idea how to solve this
more elegant thus compatible to common webbrowsers. Maybe there is
a trick with combined image boxes, but when I gave this a try, it
looks either great in one browser, but not in the other. Anyway, if
all fails, I have to go with tables-in-tables, but it’s not the
solution I find elegant.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

I’m not sure about this, I only use Freeway intermittently, but
couldn’t you do it with the main body of the page being just 2 HTML
boxes butted up next to each other with custom borders (ie: 3 sides
on one box and 2 on the other) and they’ll expand?

I don’t know, just a guess!!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

@petemac/Trevreav: Two people, same idea :wink:

But when I use HTML areas, I have the problem that because of text formatting difference on OS X / Windows, it is impossible to position the HTML areas correctly.

I experienced this as I created two HTML areas and placed them vertically (the first on top, the other one starting at the end of the first). Anything looked great on Safari on OS X, but as I viewed the same page under Firefox at Win XP, the first HTML area was longer and overlapped with the second one.

Is there a solution to prevent this ?
Guess not, because I compared the output and found that the font on Windows is slightly larger than on OS X - although same px-size was used. This leads to unexpected line breaks and so differently sized boxes).

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Hello,

Once again, not being one of the ‘gurus’ around here my first thought would be to keep them UNlayered, so when one grows it shoves the other down the page.

On 1 Feb 2008, at 09:29, tobiaseichner wrote:

as I viewed the same page under Firefox at Win XP, the first HTML area was longer and overlapped with the second one.

6

If you want them to both be layers, and to shove each other around,
then you need to make them Inline to a third, containing DIV. Try this:

Draw a new HTML box which covers both of your current HTML boxen.
Send it to back.

Click, then Shift Click so that you have both of your HTML boxes
selected. Cut to the clipboard.

Click inside your new HTML box so you see a text cursor, and Paste.

Adjust the margins and float of the two boxes so they repel each
other as you like.

Preview into any browser, and fiddle with the text size. You will see
the lower box scoot out of the way of the upper box.

For bonus points, delete the height from both of these inline boxes,
and your layout will shrink to fit the text content if the text size
reduces, too!

Walter

On Feb 1, 2008, at 4:29 AM, tobiaseichner wrote:

@petemac/Trevreav: Two people, same idea :wink:

But when I use HTML areas, I have the problem that because of text
formatting difference on OS X / Windows, it is impossible to
position the HTML areas correctly.

I experienced this as I created two HTML areas and placed them
vertically (the first on top, the other one starting at the end of
the first). Anything looked great on Safari on OS X, but as I
viewed the same page under Firefox at Win XP, the first HTML area
was longer and overlapped with the second one.

Is there a solution to prevent this ?
Guess not, because I compared the output and found that the font on
Windows is slightly larger than on OS X - although same px-size was
used. This leads to unexpected line breaks and so differently sized
boxes).

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

This sounds good. I imagine you would need to include the text that
currently sits in the grey S as separate boxes too, so where Walter
says both your HTML boxes perhaps it should be 5 boxes. Then the grey
area will be maintained as the text sizes increase as all the boxes
enlarge. I think…

Cheers
Pete

On 1 Feb 2008, at 13:57, Walter Lee Davis wrote:

If you want them to both be layers, and to shove each other around,
then you need to make them Inline to a third, containing DIV. Try
this:

Draw a new HTML box which covers both of your current HTML boxen.
Send it to back.

Click, then Shift Click so that you have both of your HTML boxes
selected. Cut to the clipboard.

Click inside your new HTML box so you see a text cursor, and Paste.

Adjust the margins and float of the two boxes so they repel each
other as you like.

Preview into any browser, and fiddle with the text size. You will see
the lower box scoot out of the way of the upper box.

For bonus points, delete the height from both of these inline boxes,
and your layout will shrink to fit the text content if the text size
reduces, too!

Walter

On Feb 1, 2008, at 4:29 AM, tobiaseichner wrote:

@petemac/Trevreav: Two people, same idea :wink:

But when I use HTML areas, I have the problem that because of text
formatting difference on OS X / Windows, it is impossible to
position the HTML areas correctly.

I experienced this as I created two HTML areas and placed them
vertically (the first on top, the other one starting at the end of
the first). Anything looked great on Safari on OS X, but as I
viewed the same page under Firefox at Win XP, the first HTML area
was longer and overlapped with the second one.

Is there a solution to prevent this ?
Guess not, because I compared the output and found that the font on
Windows is slightly larger than on OS X - although same px-size was
used. This leads to unexpected line breaks and so differently sized
boxes).

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Thanks for your kind efforts, great forum :slight_smile:

I’ll give your ideas a try and report later when I’m working on the website (current page was just used as layout option).

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options