Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 15
  1. #1
    Junior Member
    Join Date
    Sep 2003
    Posts
    11
    Member #
    3036
    I am having a problem with the alignment of rows in tables using dreamweaver. The image I have attached shows my problem.

    Basically, the cell where i want my main text is somehow connected to one of the rows in my navigation bar. Is it possible to set boundaries on this so they DO NOT connect? and so that whatever I do in the general text cell has no impact on the navigation bar?

    Also, when I split cells into say more rows or columns they seem to automatically attach onto the nearest row/column line next to the cell and so when i try and adjust the width of the column it drags the column it has attached itself to also. Is there anyway to prevent this?

    Many thanks.
    Attached Images Attached Images

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    That's the nature of a table.... It is a grid, a matrix, a spreadsheet, etc. Think of it as an excel file. All of your columns and rows must add up.

    That said.... when you get into alignment issues, you can usually resolve it by nesting a table within a cell.

    for instance, if the navigation was put into a table nested in one cell with the content in the next cell, the nested table would not be affected by the larger cell. Here's what I mean:
    Code:
    <table width="750" cellpadding="0" cellspacing="10" border="0">
        <tr>
            <td colspan="2">
                <h1>[Somers VC]</h1>
            </td>
        </tr>
        <tr>
            <td width="170" valign="top">
    
                <!-- THIS IS THE NESTED NAV TABLE -->
    
                <table width="100%" cellpadding="4" cellspacing="0" border="0">
                    <tr>
                        <td align="center">
                            </p>Home</p>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <p>Latest News</p>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <p>Etc</p>
                        </td>
                    </tr>
                </table>
    
            </td>
            <td width="550" valign="top">
                <p>General text<br>
                    aa<br>
                    aaaaa<br>
                    aaaa</p>
            </td>
        </tr>
    </table>

  4. #3
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    Or you could try playing with colspan and rowspan.

  5. #4
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    I think the safest bet is to go with nesting tables - although you'll hear compaints that they slow your site down - it is hardly noticeable, so, personally i'd go with the tables.

    How do you do it with Rowspan/Colspan anyways?? it might be easier,but any trials I have done have always failed miserably with this technique.
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  6. #5
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    Your general design needs to be fairly grid-like for this to work best but if you have the problem that seanus is having above you can add the attribute rowspan="x" to the td tag (where x is the number of rows you want the cell to span). That way any change in size of that cell overlaps into the x cells below without pushing the content of the other columns down with it.

    The same is true for columns using <td colspan="x">

    I'll post an example later tonight.

  7. #6
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    Here's an example. The HTML isn't too pretty but you can see what's happening.

    Colspan Example

  8. #7
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    IF you look at his screenshot, he is using colspan.... but what happens when the content stretches between pages? Then the nav boxes stretch vertically, which is inconsistent and confusing (i.e. poor usability). The best bet is to nest tables

    (BTW.... LOL @ "embed".... don't know where I pulled that out of)

  9. #8
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Also, nesting tables won't slow your site down in this case. The only time nested tables slow down your loading is when you nest every vertical partition in one outer table and you have a lot of content (or databased content). In that case, you can fix the problem by putting your banner and content in separate top-level tables or divs.

  10. #9
    Junior Member
    Join Date
    Sep 2003
    Posts
    11
    Member #
    3036
    Thanks everyone for their input especially transio since his advice led to the fix for my problem - nested tables. Also, just to let mossoi know, the cell was already using rowspan but anyways thanks for your input.

    Seanus.

  11. #10
    Junior Member
    Join Date
    Sep 2003
    Posts
    11
    Member #
    3036
    Ok, now i am really sorry about this but I seem to have one more problem, lol. I used transio's advice and inserted a nested table for the navigation bar but there is one small problem. Once the text in the general text cell exceeds the length of the navigation bar and tries to continue downwards the whole navigation bar is dragged down with it and seems to centre halfway between the top and the bottom in the left hand column. Any ideas? Have posted the relevant code. Thanks.

    <tr>
    <td background="../blue.jpg"><div align="center"><font color="#990066" size="3" face="Verdana, Arial, Helvetica, sans-serif"><strong>[Somers
    YC]</strong></font></div></td>
    <td>&nbsp;</td>
    <!-- TemplateBeginEditable name="Heading" -->
    <td colspan="3"><div align="left"><font color="#FF6600" size="5" face="Verdana, Arial, Helvetica, sans-serif">Heading</font></div></td>
    <!-- TemplateEndEditable -->
    <td>&nbsp;</td>
    <td background="../blue.jpg">&nbsp;</td>
    </tr>
    <tr>
    <td background="../blue.jpg"><hr width="125"></td>
    <td>&nbsp;</td>
    <td colspan="3">&nbsp;</td>
    <td>&nbsp;</td>
    <td background="../blue.jpg">&nbsp;</td>
    </tr>
    <tr>
    <td background="../blue.jpg"><div align="center">
    <table width="130" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="../index.htm" class="syc">Home</a></font></td>
    </tr>
    <tr>
    <td><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="../latestnews.htm" class="syc">Latest
    News</a></font></td>
    </tr>
    <tr>
    <td><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="../upcomingevents.htm" class="syc">Upcoming
    Events</a></font></td>
    </tr>
    <tr>
    <td><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="http://home.vicnet.net.au/%7Esomersyc/results/index.htm" class="syc">Sailing
    Results </a></font></td>
    </tr>
    <tr>
    <td><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="../weatherreport.htm" class="syc">Weather
    Report</a> </font></td>
    </tr>
    <tr>
    <td><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="../sailingprogram.htm" class="syc">Sailing
    Program</a> </font></td>
    </tr>
    <tr>
    <td><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="../socialprogram.htm" class="syc">Social
    Program </a></font></td>
    </tr>
    <tr>
    <td><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="../sailingschool.htm" class="syc">Sailing
    School </a></font></td>
    </tr>
    <tr>
    <td><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="../membership.htm" class="syc">Membership</a></font></td>
    </tr>
    <tr>
    <td><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="../committee.htm" class="syc">Committee</a></font></td>
    </tr>
    <tr>
    <td><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="../merchandise.htm" class="syc">Merchandise</a></font></td>
    </tr>
    <tr>
    <td><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="../clubhistory.htm" class="syc">Club
    History</a></font></td>
    </tr>
    <tr>
    <td><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="../clubhire.htm" class="syc">Club
    Hire</a></font></td>
    </tr>
    <tr>
    <td><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="../contactus.htm" class="syc">Contact
    Us</a> </font></td>
    </tr>
    <tr>
    <td><font color="#000066" size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="../links.htm" class="syc">Links</a></font></td>
    </tr>
    <tr>
    <td><hr width="125"></td>
    </tr>
    </table>
    </div></td>
    <td rowspan="3">&nbsp;</td>
    <!-- TemplateBeginEditable name="General Text" -->
    <td colspan="3" rowspan="3" valign="top"><div align="left">
    <p><font size="3" face="Verdana, Arial, Helvetica, sans-serif">General
    Text</font></p>
    <p>&nbsp;</p>
    </div></td>
    <!-- TemplateEndEditable -->


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:19 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com