Results 1 to 10 of 10
  1. #1
    Plutonium Lounger Leif's Avatar
    Join Date
    Dec 2000
    Location
    U.K.
    Posts
    14,010
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Quick tip: Tables with rounded borders

    Very neat, Mark!

    A 'sub-trick' for those trying to see how this is done is to try and 'select' parts of the example page Mark has linked to. It is easier to start by clicking within a piece of text, hold down the left mouse button, then wipe upwards or downwards. As usual, the text is selected as a negative image, but the graphic components appear as shaded components.

    I often use this to distinguish between 'plain' text and graphics containing text.

    And to see how others do things <img src=/S/grin.gif border=0 alt=grin width=15 height=15>.

    (This certainly works in IE5.5 - other browsers may exhibit different results.)
    Attached Images Attached Images
    • File Type: gif x.gif (4.2 KB, 0 views)

  2. #2
    KTYorke
    Guest

    Re: Quick tip: Tables with rounded borders

    I've been trying to do this for a while now with a page of mine (it's not up right now due to DSL problems) to no avail. There was always a space somewhere that made it all look dumb.
    I'm going to print this out and see what I can do with your steps... I hope it works!!
    have fun

  3. #3
    5 Star Lounger
    Join Date
    Jul 2002
    Location
    Toronto, Ontario, Canada
    Posts
    1,139
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Quick tip: Tables with rounded borders

    You NEED to make sure there are no extra whitespaces (spaces, tabs or line feeds/carriage returns) between the <td> and </td> tags.

    You will need your line to look something like:

    <td>[img]image.gif[/img]</td>

    The following will give you little white spaces
    <td>
    [img]image.gif[/img]
    </td>

    <td>[img]image.gif[/img] </td>

    or anything like that.
    --
    Bryan Carbonnell - Toronto <img src=/S/flags/Ontario.gif border=0 alt=Ontario width=30 height=18> <img src=/S/flags/Canada.gif border=0 alt=Canada width=30 height=18>
    Unfortunately common sense isn't so common!!
    Visit my website for useful Word, Excel and Access code, templates and Add-Ins

  4. #4
    Silver Lounger
    Join Date
    Jan 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    1,862
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Quick tip: Tables with rounded borders

    I agree. However, it depends on the code editor you're using. Some editors simply insert a LineFeed while others insert a LineFeed with tabs/spaces for readability. The linefeed alone won't cause any problems, but any spaces or tabs will make things look a little funny...

    Also, keep an eye on the height of the text in relation to the height of the corner graphics (if you're using the second method mentioned above - solid top row). If the text is taller than the graphics it will create a space between the corner graphic and the next row. You will either need to use smaller text or increase the size of the graphics.

    Thanks for bringing out that point, Bryan! <img src=/S/thankyou.gif border=0 alt=thankyou width=40 height=15>

  5. #5
    5 Star Lounger
    Join Date
    Jul 2002
    Location
    Toronto, Ontario, Canada
    Posts
    1,139
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Quick tip: Tables with rounded borders

    Actually Mark, Linefeeds WILL cause the whitespace to appear as well.

    I actually think it is a CR/LF which is what you get when you hit enter in a Win environment.

    I've been bitten by it before. <img src=/S/sad.gif border=0 alt=sad width=15 height=15>
    --
    Bryan Carbonnell - Toronto <img src=/S/flags/Ontario.gif border=0 alt=Ontario width=30 height=18> <img src=/S/flags/Canada.gif border=0 alt=Canada width=30 height=18>
    Unfortunately common sense isn't so common!!
    Visit my website for useful Word, Excel and Access code, templates and Add-Ins

  6. #6
    Silver Lounger
    Join Date
    Jan 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    1,862
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Quick tip: Tables with rounded borders

    Once again, I agree. I believe it's Shift-Enter that produces just LF (or is it CR) - one without the other. I was able to create the table without spaces with a line break between <TD> and <IMG>, but I guess it was using Shift-Enter rather than Enter (CRLF).

    Just for the record I would not typically break the line in reality. The only reason for the line break in the example was to keep the width small enough for the post. I guess I should have pointed that out before.

    Thanks again <img src=/S/thankyou.gif border=0 alt=thankyou width=40 height=15>

  7. #7
    Silver Lounger
    Join Date
    Jan 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    1,862
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Quick tip: Tables with rounded borders

    Ok - final revision, I promise... <img src=/S/surrender.gif border=0 alt=surrender width=31 height=23>

    To correct my previous two posts - any break AFTER <TD> will cause space to appear in the page. However, breaks BEFORE the closing tag (</TD>) do not cause space.

    Whew - sorry for the confusion... <img src=/S/dizzy.gif border=0 alt=dizzy width=15 height=15>

  8. #8
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Quick tip: Tables with rounded borders

    As long as you're shooting for roundness factor, do you think there's a JavaScript trick to get the selection rectangle off the navigation buttons after you click them? It kind of gives away the game. <img src=/S/grin.gif border=0 alt=grin width=15 height=15>

  9. #9
    Silver Lounger
    Join Date
    Jan 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    1,862
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Quick tip: Tables with rounded borders

    Are you talking about HTML Buttons (such as <input type=button or type=submit....), or are you talking about a graphic that's used as a link?

    For buttons you can easily add a line of JavaScript to switch the focus to another item on the page (such as: form1.text1.focus()[img]/forums/images/smilies/wink.gif[/img]

    For a graphic used as a button, you would have to use a JavaScript OnClick event handler to do the same thing - assign focus to another item on the page after clicking.

    Hope this helps!

  10. #10
    Silver Lounger
    Join Date
    Jan 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    1,862
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Quick tip: Tables with rounded borders

    Greetings all,

    I find myself using tables QUITE a bit in my webpages to keep text and images properly aligned, especially tables without borders. I also use tables with borders to group items together or for lists of items. I notice a lot of websites have rounded corners on their tables to give a smooth look rather than the square corners that are native to HTML. I thought about this for a while and came up with my own solution. (I realize there are other -probably better- techniques to accomplish the same look, but this is my own home-grown receipe.)

    You'll need a graphic editing program capable of working with selections. I use PaintShopPro and Fireworks but many others will do the trick just as well.

    The first step is to create a rectangle with rounded edges. You can create one that's solid or just a border (see example A). Next, create the 4 rounded corners by selecting, copying, and pasting the corner area. Be careful to keep the selection to the exact edge of the rectangle. It may help to zoom in for an up-close view of this in order to be precise. The last graphic step is to create the sides, top, and bottom. The width of the side images must match the width of the corners but the height only needs to be 1 or 2 pixels. Likewise, the height of the top and bottom images must match the height of the corners but the width only needs to be 1 or 2 pixels (see Example B -right).

    Also, you will need a 1x1 transparent gif to use as a spacer. It's a trick used by MANY web developers to help with alignment because it can be stretched to any width and height and it's still transparent!

    I've included solid corners for the top and border corners for all 4, in case I want to have a solid bar at the top (Example [img]/forums/images/smilies/cool.gif[/img].

    Here's a list of my images and their dimensions:
    corner_top_left.gif (23x22)
    corner_top_right.gif (23x22)
    corner_bottom_left.gif (23x22)
    corner_bottom_right.gif (23x22)
    top.gif (2x22)
    bottom.gif (2x22)
    left.gif (23x2)
    right.gif (23x2)
    spacer.gif (1x1 - transparent)


    Here's the HTML code you'll need to put it all together (for a border-only look - see Example C):<pre><table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="23">[img]corner_top_left.gif[/img]</td>
    <td width="100%" background="top.gif">
    [img]spacer.gif[/img]</td>
    <td width="23">[img]corner_top_right.gif[/img]</td>
    </tr>
    <tr>
    <td width="23" height="100%" background="left.gif">[img]spacer.gif[/img]</td>
    <td width="100%">Your Data goes here</td>
    <td width="23" height="100%" background="right.gif">[img]spacer.gif[/img]</td>
    </tr>
    <tr>
    <td width="23">[img]corner_bottom_left.gif[/img]</td>
    <td width="100%" background="bottom.gif">
    [img]spacer.gif[/img]</td>
    <td width="23">[img]corner_bottom_right.gif[/img]</td>
    </tr>
    </table></pre>

    NOTE: There should be no break after the < td > tags! This will cause spaces to appear in the border.

    To have a solid top row with text (see Example D), use the following code for the top row:<pre><tr>
    <td width="23" height="22" valign="bottom">[img]corner_top_left_solid.gif[/img]</td>
    <td width="100%" align="left" bgcolor="#006699">
    <font style="font-size: 19 px;" color="#FFFFFF">
    Your Title Goes Here</font></a></td>
    <td width="23" height="22" valign="bottom">[img]corner_top_right_solid.gif[/img]</td>
    </tr></pre>


    Hope this helps!
    Attached Images Attached Images

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •