How did they d these? Table Borders

Discussion in 'HTML' started by JA, Nov 14, 2003.

  1. JA

    JA Guest

    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
     
    JA, Nov 14, 2003
    #1
    1. Advertising

  2. JA

    Augustus Guest

    "JA" <> wrote in message
    news:...
    > 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>
     
    Augustus, Nov 14, 2003
    #2
    1. Advertising

  3. JA

    JA Guest

    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, Nov 14, 2003
    #3
  4. JA

    JA Guest

    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
     
    JA, Nov 14, 2003
    #4
  5. JA

    Augustus Guest

    "JA" <> wrote in message
    news:...
    > 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
     
    Augustus, Nov 14, 2003
    #5
  6. JA

    Adrienne Guest

    Gazing into my crystal ball I observed JA <> writing in
    news::

    > 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
     
    Adrienne, Nov 14, 2003
    #6
  7. JA

    JA Guest

    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.
     
    JA, Nov 14, 2003
    #7
  8. JA

    Adrienne Guest

    Gazing into my crystal ball I observed JA <> writing in
    news::

    > 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
     
    Adrienne, Nov 14, 2003
    #8
  9. JA

    Barefoot Kid Guest

    "JA" <> wrote in message news:...
    | 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
     
    Barefoot Kid, Nov 15, 2003
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. ska4reak

    where did they come from?

    ska4reak, Nov 14, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    328
    Bill Priess
    Nov 14, 2003
  2. George
    Replies:
    9
    Views:
    5,048
    George
    Oct 25, 2004
  3. Replies:
    4
    Views:
    365
    osmium
    Mar 5, 2007
  4. chewie54
    Replies:
    17
    Views:
    1,205
    Kryvor
    Nov 8, 2007
  5. Daniel Waite
    Replies:
    2
    Views:
    247
    Daniel Waite
    May 2, 2008
Loading...

Share This Page