Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How did they d these? Table Borders

Reply
Thread Tools

How did they d these? Table Borders

 
 
JA
Guest
Posts: n/a
 
      11-14-2003
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
 
Reply With Quote
 
 
 
 
Augustus
Guest
Posts: n/a
 
      11-14-2003

"JA" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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>



 
Reply With Quote
 
 
 
 
JA
Guest
Posts: n/a
 
      11-14-2003
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
 
Reply With Quote
 
JA
Guest
Posts: n/a
 
      11-14-2003
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
 
Reply With Quote
 
Augustus
Guest
Posts: n/a
 
      11-14-2003

"JA" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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



 
Reply With Quote
 
Adrienne
Guest
Posts: n/a
 
      11-14-2003
Gazing into my crystal ball I observed JA <(E-Mail Removed)> writing in
news:(E-Mail Removed):

> 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.

--
Adrienne Boswell
Please respond to the group so others can share
http://www.arbpen.com
 
Reply With Quote
 
JA
Guest
Posts: n/a
 
      11-14-2003
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.
 
Reply With Quote
 
Adrienne
Guest
Posts: n/a
 
      11-14-2003
Gazing into my crystal ball I observed JA <(E-Mail Removed)> writing in
news:(E-Mail Removed):

> 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...

--
Adrienne Boswell
Please respond to the group so others can share
http://www.arbpen.com
 
Reply With Quote
 
Barefoot Kid
Guest
Posts: n/a
 
      11-15-2003
"JA" <(E-Mail Removed)> wrote in message news:(E-Mail Removed)...
| 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
---------------------------------------------------
Hung Diep
New Media Designer
www.intro-spect.co.uk
0795 6576 319


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Trouble with Table borders =?Utf-8?B?VGhlUGlua1BhbnRoZXI=?= ASP .Net 4 02-13-2006 04:01 PM
Tables with different color left and right borders, no top or bottom borders, etc. George HTML 9 10-25-2004 04:25 PM
[JSTL] empty strings inside table cells *with borders* Karsten Wutzke Java 9 10-31-2003 09:18 PM
they turn, they power, they make nice pics Keith and Jenn Z. Digital Photography 0 09-21-2003 04:16 AM
table borders for Mac/IE5 RedLine HTML 1 06-23-2003 09:21 PM



Advertisments