Results 1 to 3 of 3

Thread: Webpage help

  1. #1
    Banned aceman67 has become well known aceman67 has become well known aceman67 has become well known aceman67's Avatar
    Join Date
    Nov 2004
    Location
    Coalhurst Alberta, Canada
    Posts
    2,900
    Thanks
    11
    Thanked 183 Times in 148 Posts

    Webpage help

    Those who know me know that I'm taking a web design course, and I'm working on an assignment involving CSS, tables, forms.

    and I'm having alot of trouble with the final part of my assignment getting the form on the contact page to align correctly.

    The entire page is a table, and to get the form to fit in the page, I nested a table within a table. My problem is the table that In nested inside is causeing the outside table to explode (click image to see http://i20.photobucket.com/albums/b2...man67/help.jpg)

    Both me and my instructor went over the code, and nothings wrong with it, and have no clue why this is doing it.

    Heres my source code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <title>
                Idea.com - Assignment 5 - Contact Us
            </title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <style type="text/css">
                p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; width: 450px; color: #666666; padding: 0px; margin: 7px; text-align: right;}
                a {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none; margin: 7px;}
                a:link {color:#ffffff;}
                a:visited {color:#ffffff;}
                a:hover {color:#FAC417;}
                a:active {color:#cccccc;}
                li {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #666666;}
                form {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none;}
                font {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none; margin: 7px; text-decoration: none;}
                input {background-color: #FFFFFF; border: 1px solid #666666;}
                select {background-color: #FFFFFF; border: 1px solid #666666;}
                .forma {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; width: 450px; color: #666666; padding: 0px; margin: 7px; text-align: left; margin: 3px;}
            </style>
        </head>
        <body bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" bgcolor="#cccccc">
            <table border="0" height="600" width="800" class="forma" cellspacing="0" cellpadding="0">
                <tr>
                    <td valign="top" width="200" height="96">
                        <img src="images/logo.gif">
                    </td>
                    <td width="600" height="96" bgcolor="#FFFFFF">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td width="200" height="31" background="images/nav_background_01.gif" valign="middle">
                        <a href="index.htm">Home</a>
                    </td>
                    <td rowspan="5" height="154" width="600">
                        <img src="images/services_banner.jpg">
                    </td>
                </tr>
                <tr>
                    <td width="200" height="31" background="images/nav_background_01.gif" valign="middle">
                        <a href="philo.htm">Our Philosophy</a>
                    </td>
                </tr>
                <tr>
                    <td width="200" height="31" background="images/nav_background_01.gif" valign="middle">
                        <a href="service.htm">Our Services</a>
                    </td>
                </tr>
                <tr>
                    <td width="200" height="31" background="images/nav_background_01.gif" valign="middle">
                        <a href="#">Help Desk</a>
                    </td>
                </tr>
                <tr>
                    <td width="200" height="31" background="images/nav_background_01.gif" valign="middle">
                        <a href="contact.htm">Contact Us</a>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
    <!-- THIS IS THE TABLE THAT IS THROWING EVERYTHING OFF -->
                        <table border="1" height="334" align="center" cellspacing="0" cellpadding="0" background="images/contact_bg.gif">
                            <tr>
                                <td width="100">                                                        
                                    <form METHOD=POST action= "mailto:[email protected]" encrypt="text/plain">
                                        <p>Name:</p>
                                        <p>Email:</p>
                                        <p>Phone:</p>
                                        <p>Address:</p>
                                        <p>Province:</p>
                                    </form>
                                </td>
                                <td>
                                <p class="forma"><input name="Name" type="text" size="35" maxlength="45"></p>
    <p class="forma"><input name="textfield" type="Email" size="35" maxlength="45"></p>
    <p class="forma"><input name="textfield" type="Phone" size="35" maxlength="45"></p>
    <p class="forma"><input name="textfield" type="Address" size="35" maxlength="45"></p>
    
    <p class="forma"><select name="select">
    <option value="BC">BC</option>
    <option value="AB">AB</option>
    <option value="SK">SK</option>
    <option selected value="MB">MB</option>
    <option value="ON">ON</option>
    <option value="QU">QU</option>
    <option value="NB">NB</option>
    <option value="PEI">PEI</option>
    <option value="NS">NS</option>
    <option value="NF">NF</option>
    </select>&nbsp;<input type="reset" name="Reset" value="Reset">&nbsp;<input type="submit" name="Submit" value="Submit"></p>
                                </td>
                                <td valign="middle" bgcolor="#ffffff">
                                    <ul>
                                        <li>NETWORKING...SYSTEMS<BR>INTEGRATION...BUSINESS<BR>STRATEGY....
                                        </li>
                                        <li>VISION THOUGH PROGRESS.
                                        </li>
                                        <li>Intelligent Information<br>Technology Management.
                                    </ul>
                                </td>
                            </tr>
                        </table>
    <!-- THIS IS THE TABLE THAT IS THROWING EVERYTHING OFF -->
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#FAC417" colspan="2" align="center" valign="middle" height="31">
                        <font>Idea.com &copy; 2005</font>
                    </td>
                </tr>                    
            </table>
        </body>
    </html>
    Any help would be appreciated.

  2. #2
    M A S T E R Zui Quan may be famous one day Zui Quan may be famous one day Zui Quan's Avatar
    Join Date
    Oct 2004
    Location
    A Vastly Superior Place
    Posts
    1,726
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Webpage help

    Up in your css you have p with a width of 450 and .forma with the same width. Added together they give a width of 900, larger than the main table's 800 width.

    The way you have the cells aligned in the second table gives three horizontal rows of width 450, 450, and around 250. This is much larger than than the 800 width given in the table.

    To solve this I would recommend NOT using absolute dimensions. For example, instead of a table of 800 give it a width of 100%. Use of relative dimensions instead of absolute tends to alleviate table explosion issues.
    Clan? What Clan?
    I'm the Master. I need no Clan.

  3. #3
    Banned aceman67 has become well known aceman67 has become well known aceman67 has become well known aceman67's Avatar
    Join Date
    Nov 2004
    Location
    Coalhurst Alberta, Canada
    Posts
    2,900
    Thanks
    11
    Thanked 183 Times in 148 Posts

    Re: Webpage help

    Quote Originally Posted by Zui Quan
    Up in your css you have p with a width of 450 and .forma with the same width. Added together they give a width of 900, larger than the main table's 800 width.

    The way you have the cells aligned in the second table gives three horizontal rows of width 450, 450, and around 250. This is much larger than than the 800 width given in the table.

    To solve this I would recommend NOT using absolute dimensions. For example, instead of a table of 800 give it a width of 100%. Use of relative dimensions instead of absolute tends to alleviate table explosion issues.
    Dude! You rock!
    thanx alot!

Similar Threads

  1. Webpage background.
    By KenX in forum The Thread Vault
    Replies: 2
    Last Post: Feb 08, 2005, 03:20 PM

Bookmarks

Posting Permissions

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