38 users online (0 members and 38 guests)  


  Results 1 to 9 of 9

Related

  1. About tabs    Forum: HTML Forum
    Replies: 3
  2. Problem with borders around tables,    Forum: HTML Forum
    Replies: 2
  3. can you place tabs on your page?    Forum: HTML Forum
    Replies: 1
  4. Tables and Borders    Forum: HTML Forum
    Replies: 8
  1. #1
    lsachs's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2002
    Posts
    21

    Tabs, Borders & Tables not playing well 2gether

    Gang -

    I'm trying to close up some space in a table with some tabs, and I'm suspecting it has something to do with the use of spacer blocks in the tables, not sure. The idea is basically a table with 2 tabs at the top, and a 1px grey border around the table below the tabs. I'm trying to merge a heading before the table below that will span and merge with the grey border. O/C, I inherited this code from someone else and don't want 2 completely rewrite the tabs (a corp. standard). Trying to get this grey heading, titled "BLAH BLAH WORKSHOP," to span so it merges with the grey border. I'm trying 1px grey gifs #888888 or just a cel bg in that color, but it's slipping and sliding mostly vertical. I've added comments in CAPS on the trouble spots. Sorry for the loooong post....thanks in advance! (posted in another BBS, hope that doesn't bother any1!)

    ________code snippet below_________

    <table width="427" border="0" cellpadding="0" cellspacing="0" colspan="5">
    <!-- tabs -->
    <tr>
    <td background="images/tab_left1_1.gif" width="7"><spacer type="block" width="8" height="21"></td>
    <td width="197" bgcolor="#999999"><a href="training_up.htm.htm" class="tableHeadLink">NNNNN
    Workshop</a></td>
    <td width="7" bgcolor="#999999" valign="bottom"><img src="images/tab_right1_1.gif" alt="" width="7" height="8" border="0"></td>
    <td width="5" height="21"><spacer type="block" width="5" height="21"></td>
    <td background="images/tab_left1_0.gif" width="7"><spacer type="block" width="7" height="21"></td>
    <td width="197" bgcolor="#CCCCCC"><a href="training_arch.htm" class="Link"><font color="#CCCCCC">_</font>YYYYY Workshop
    </a></td>
    <td width="7" bgcolor="#CCCCCC"><spacer type="block" width="76" height="21"></td>
    </tr>
    <!-- white margin between tabs and box outline -->
    <tr>
    <td width="204" td colspan="2" background="images/tab_left2_1.gif"><spacer type="block" width="47" height="5"></td>
    <td width="7" background="images/tab_right2_1.gif"><spacer type="block" width="7" height="5"></td>
    <td width="5" height="5"><spacer type="block" width="5" height="5"></td>
    <td width="211" td colspan="3"><spacer type="block" width="211" height="5"></td>
    </tr>
    <!-- grey line -->
    <tr bgcolor="#999999">
    <td width="204" td colspan="2" background="images/tab_left2_1.gif"><spacer type="block" width="47" height="1"></td>
    <td width="7" background="images/tab_right2_1.gif"><spacer type="block" width="7" height="1"></td>
    <td width="5" height="1"><spacer type="block" width="5" height="1"></td>
    <td width="211" td colspan="3"><spacer type="block" width="211" height="1"></td>
    </tr>
    <!-- THIS IS WHAT I NEED HELP WITH!! -->
    <tr>
    <td><img src="images/888.gif" height="12" width="7" align="top"></td>
    <td colspan="5" rowspan="2" valign="top" class="bodyCopy">
    <table width="413" colpsan="6" border="0" cellspacing="0" cellpadding="1" >
    <td class="sectionDark" colspan="5" height="12"><span class="tableHead">
    BLAH BLAH WORKSHOP</span></td>
    </tr>
    <tr>
    <td class='tdRegDetailLeft' height="90">
    <span class="tableBodyCopyBold">Title:</span> __________<br> <span class="tableBodyCopyBold">Date:</span>
    12/22/2002<br> <span class="tableBodyCopyBold">Time:</span>
    8.00AM-5.00PM <br>
    <span class="tableBodyCopyBold" colspan="5">Description:</span>This
    workshop _________<a href="registr_bg.html">Find out more</a>&gt;<br>
    <span class="tableBodyCopyBold" colspan="5">Registration:</span>You must register in advance for this workshop: <a href="registr_bg3.html"><img src="images/register_online.gif" width="83" height="15" border="0"></a>
    </span> </td>
    </tr>
    <tr>
    <td class='tdRegDetailLeft' height="88"> <br>Another Workshop</a><br> <span class="tableBodyCopyBold">Date:</span>
    12/23/2002<br> <span class="tableBodyCopyBold">Time:</span>
    9.30AM-12.00PM <br> <span class="tableBodyCopyBold">Description:</span>
    Click to find out &lt;<a href="registr_bg3.html">more</a>&gt;<br>
    <span class="tableBodyCopyBold" colspan="5">You may register
    through this website: <a href="registr_bg3.html"><img src="images/register_online.gif" width="83" height="15" border="0"></a></span>
    </td>
    </tr>
    </table>
    <br></td>
    <!--THIS IS THE RIGHT SIDE CELL GIVING ME PROBLEMS-->
    <td><img src="images/888.gif" height="12" width="7" align="top"></td>
    </tr>
    <tr>
    <td width="7" height="125" valign="top" background="images/tab_left2_1.gif"></td>
    <td background="images/tab_right2_1.gif" valign="top"></td>
    </tr>
    <!-- box bottom -->
    <tr bgcolor="#999999">
    <td width="5" height="1"><spacer type="block" width="7" height="1"></td>
    <td colspan="5"><spacer type="block" width="7" height="1"></td>
    <td width="7"><spacer type="block" width="7" height="1"></td>
    </tr>
    </table>
    -----END CODE SNIPPET-----

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    I am a bit unsure of the problem, but this may help. Place this code in the head of your document to hightlight the tables and cells -

    Code:
    <style>
    table {
    border: 1px solid black;
    }
    td {
    border: 1px solid red;
    }
    </style>
    If not, post back. I have your code on your machine, just a bit unclear of the exact problem.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    lsachs's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2002
    Posts
    21
    i did some screenshots of what i'm after based on your border help & what it looks like without borders. i blacked out the borders. can't seem to post to the thread and having trouble getting to my server now; i can email the gifs of these screenshots if u want.

  4. #4
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    sure dean @ quietdean.com

    edited to put spaces I dont want any spam spiders getting your email.

    To mail dean remove the spaces on both sides of the @
    Last edited by HTML; 11-19-2002 at 07:37 PM.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  5. #5
    lsachs's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2002
    Posts
    21
    take a look at them here:

    www.deborahpangle.com/images/screenshot1.gif
    www.deborahpangle.com/images/screenshot2.gif

    screenshot2 - is w/out borders
    screenshot1 - is w/borders.

    In 2, you can see where the trouble is...trying to line up that grey border with the piece filling that gap. I've circled it too, in case you can't tell. This is displaying for IE, but shoudl work in NN4+.

    Sorry for the ugly blacking out; this is major corporate hoo-hah.....

    -lee

  6. #6
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Try replacing the gifs in the cell with a <br /> tag and using a background color/image instead.

    I am using IE6 and mine looked completely different to yours. It may be worth ditching the legacy code and starting again with it.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  7. #7
    lsachs's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2002
    Posts
    21
    if i understand that correctly, i'm replacing gifs w/background img AND the BR tag.

    i actually had been trying bg images already and that didn't help. will try the br's too.

    btw, i posted this b4, but "why is it there's just no decent explanations of these things on the web. every tutorial shows you how to do tables, tds, trs, in the most boring, plain, only-seen-on-amateur-sites display. professional sites have complex tables. and there's no guides for that. period.

  8. #8
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    We have found the only way to really learn tables to sit down and bully thru them
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  9. #9
    benzden's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Feb 2002
    Location
    San Antonio, Texas
    Posts
    652
    Yes, TABLEs are very powerful and offer a diversity of solutions to web site image and text placement.

    Use a series of character #160s strung together (or & nbsp immediately adjacent to text to move it left or right. Do the same inside otherwise empty <TD> or <TH> cells to make set sized blank columns - a technique I favor over the WIDTH=..% but should work the same as WIDTH=.. (without the percent).

    Use HSPACE= and VSPACE= inside the <IMG ...> tag to keep text away from images.

    Use ALIGN=left or right and VALIGN=top inside the <TD ...> attributes to locate text.

    I started HTML coding using the dummy 1 byte tab.gif for spacing but then almost immediately abandoned it in favor of other techniques - hardly ever use it anymore.
    Last edited by HTML; 11-20-2002 at 11:12 AM.



Tags for this Thread