How did they d these? Table Borders

[JA]

I am not sure if this is the correct spot for this post. If there is
a better newsgroup for this post, please le tme know. Here goes.

How did they layout the web page at http://www.userland.com/ to show
the borders with shadows? I have taken apart the source code, and I
see all of the graphics involved. But I am html challenged and can
not figure out the layout to get this to work.

Is it a table with lots cells for all of the border graphics? Is
there any wyswig html editor that does this, or at least on that would
let me define the border's images?

Thanks

 

[Augustus]

I am not sure if this is the correct spot for this post. If there is
a better newsgroup for this post, please le tme know. Here goes.

How did they layout the web page at http://www.userland.com/ to show
the borders with shadows? I have taken apart the source code, and I
see all of the graphics involved. But I am html challenged and can
not figure out the layout to get this to work.

Is it a table with lots cells for all of the border graphics? Is
there any wyswig html editor that does this, or at least on that would
let me define the border's images?

The shadow was done with a repeating background image

This line is what does the left hand side:

<td valign="top"
background="http://static.userland.com/weblogsCom/images/scripting2weblogsco
m/leftBG.jpg"><img
src="http://static.userland.com/weblogsCom/images/scripting2weblogscom/topLe
ftCorner.jpg" width="11" height="163"></td>

 

[JA]

Thanks for such a quick post.

What I meant to ask is how did they layout the table or control the
placement of the images?

I found the references to the graphics and figured out how they added
the "shadow", ie it is really not a shadow as much as a small graphics
with a dark line and fade.

My problem is I can not get these pplaced correctly.

For example, tell me if this is correct or not:

for the big cell in the middle. It looks like one cell per row,
right? But actually is it thee cells per row, one big one for the
body of the page and two smaller cells, one on each end for the
border? And I assume they must be using different graphics for the
corners and other effects.

What I can not figure out is how to control the placement and how to
keep everything center and nice looking. I tried, and I got a mess.
I guess my real question has to do with controlling the size of a
table and making sure everything stayed aligned neatly.

Again thanks for your post

 

[JA]

Not only can I not place the images, I can't type.

What I wrote was

for the big cell in the middle. It looks like one cell per row,

I meant to say 3 cells per row.

Sorry

 

[Augustus]

Thanks for such a quick post.

What I meant to ask is how did they layout the table or control the
placement of the images?

I found the references to the graphics and figured out how they added
the "shadow", ie it is really not a shadow as much as a small graphics
with a dark line and fade.

My problem is I can not get these pplaced correctly.

For example, tell me if this is correct or not:

for the big cell in the middle. It looks like one cell per row,
right? But actually is it thee cells per row, one big one for the
body of the page and two smaller cells, one on each end for the
border? And I assume they must be using different graphics for the
corners and other effects.

What I can not figure out is how to control the placement and how to
keep everything center and nice looking. I tried, and I got a mess.
I guess my real question has to do with controlling the size of a
table and making sure everything stayed aligned neatly.

They are doing a pretty much standard table layout...

you need 3 cells for the body of the document...
<tr>
<td></td> <== This one has a repeating background image that will be
tiled up and down. And a small image for the upper left corner
<td></td> <== This one has the main body of the document in it
<td></td> <== This one has a repeating background image that will be
tiled up and down. And a small image for the upper right corner
</tr>

Since the middle <TD> will stretch the height of your document, it will
cause the background images in the 1st and 3rd <TD> to tile up and down

 

[Adrienne]

Thanks for such a quick post.

What I meant to ask is how did they layout the table or control the
placement of the images?

I found the references to the graphics and figured out how they added
the "shadow", ie it is really not a shadow as much as a small graphics
with a dark line and fade.

My problem is I can not get these pplaced correctly.

For example, tell me if this is correct or not:

for the big cell in the middle. It looks like one cell per row,
right? But actually is it thee cells per row, one big one for the
body of the page and two smaller cells, one on each end for the
border? And I assume they must be using different graphics for the
corners and other effects.

What I can not figure out is how to control the placement and how to
keep everything center and nice looking. I tried, and I got a mess.
I guess my real question has to do with controlling the size of a
table and making sure everything stayed aligned neatly.

Again thanks for your post

They are using nested tables for positioning, and as you have experienced,
a PITA to debug.

If you turn borders on, you might have a better time debugging it. Also,
you can download Opera http://, choose user mode, debug with outline.

 

[JA]

Thanks to everyone who has posted. I loaded the file up and looked at
the tables. That helps exlpain it a lot.

One question: did the developer(s) put a fixed size for the tables?

I had always been taught to do percentages. But it looks like they
used fixed sizes for the tables and cells and graphics, or at least
fixed sizes to control everything, and only used percentages where it
did not affect the size.

This is a trick I have not been taught and will need to study and
learn.

Again thanks for so much help.

 

[Adrienne]

Thanks to everyone who has posted. I loaded the file up and looked at
the tables. That helps exlpain it a lot.

One question: did the developer(s) put a fixed size for the tables?

I had always been taught to do percentages. But it looks like they
used fixed sizes for the tables and cells and graphics, or at least
fixed sizes to control everything, and only used percentages where it
did not affect the size.

This is a trick I have not been taught and will need to study and
learn.

Again thanks for so much help.

Please don't try too hard to learn this. Fluid, tableless design is much
better, for you as a developer, for your visitors, for search engines, the
list goes on...

 

[Barefoot Kid]

| Thanks to everyone who has posted. I loaded the file up and looked at
| the tables. That helps exlpain it a lot.
|
| One question: did the developer(s) put a fixed size for the tables?
|
| I had always been taught to do percentages. But it looks like they
| used fixed sizes for the tables and cells and graphics, or at least
| fixed sizes to control everything, and only used percentages where it
| did not affect the size.
|
| This is a trick I have not been taught and will need to study and
| learn.
|
| Again thanks for so much help.

some designs look best with a fixed width, some with are better fluid, really depends on the
individual site