Solved

change from table layout to div layout

Posted on 2013-06-03
6
335 Views
Last Modified: 2013-06-05
<table  cellpadding="10" cellspacing="0" width=740>
      <tr>
        <td valign="center" bgcolor="#000000" width="20" align="right">
        <!-- empty placeholder cell -->
        </td>
        <td valign="top" bgcolor="#000000"  colspan=3>
        <img src=step1b.gif>

        <img src=step2b.gif>

        <img src=step3.gif>
          
        <img src=step4b.gif>
        <br>
        </td>
        <td>          
        </td>
      </tr>    
      <tr>
        <td>
        <!-- empty placeholder cell -->
        </td>
        <td colspan=5 >
          <font style="color:454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;font-family:arial, helvetica, sans-serif;line-height:1;">
          <br>
          <br>
          DECLARE GUESTS AND SELECT MENU OPTIONS
          </font>
          <BR>
            <table  width=600 cellpadding=0 cellspacing="0">
              <tr>
                <td >
                  <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                  <br>


                  </font>
                </td>
              </tr>
              <tr>
                <td  >
                  <br>
                  <font face=arial color=ffffff size="3" style="line-height:2;">  
                  Guest Name
                  </font>
                  <br>
                  <br>                  
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            AMUSE BOUCHE
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            First
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Second
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Notes
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Cauliflower Toast</option>
                              <option value="monday">Cocktails</option>
                              <option value="monday">Bottle Service</option>
                            </select>
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Scallops</option>
                            </select>
                          </td>
                          <td>
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Dry-Aged Sirloin</option>
                              <option value="monday">08</option>
                              <option value="monday">09</option>
                            </select>
                          </td>
                          <td>
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                        </tr>
                    </table>
                    <br>
                    <br>
                </td>
              </tr>
              <tr>
                <td >
                  <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                  <br>
                  

                  </font>
                </td>
              </tr>
              <tr>
                <td  >
                  <br>
                  <font face=arial color=ffffff size="3" style="line-height:2;">  
                  Guest 1
                  </font>
                  <br>
                  <br>
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            First Name
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Last Name
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Email
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                          <td>
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>

                        </tr>
                    </table>
                    <br>
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            AMUSE BOUCHE
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            First
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Second
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Notes
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Cauliflower Toast</option>
                              <option value="monday">Cocktails</option>
                              <option value="monday">Bottle Service</option>
                            </select>
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Scallops</option>
                            </select>
                          </td>
                          <td>
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Dry-Aged Sirloin</option>
                              <option value="monday">08</option>
                              <option value="monday">09</option>
                            </select>
                          </td>
                          <td>
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                        </tr>
                    </table>
                    <br>
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Is this guest a child
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <input type=checkbox  name="dinner_days" size="1">
                            </input>
                          </td>
                        </tr>
                    </table>
                    <br>
                    <br>
                </td>
              </tr>
            </table>



            
        </td>
      </tr>
      <tr>
        <td valign="center" bgcolor="#000000" width="40" align="right">
        <!-- empty placeholder cell -->
        </td>
        <td valign="top" bgcolor="#000000" align="center" colspan="5">
          <input class="rounded"  type="submit" value="Declare Guests and Select Menu Options">
          </input>

        </td>
      </tr>
    </table>

Open in new window



this table layout is confusing.  How can I change to div layout
0
Comment
Question by:rgb192
  • 3
  • 2
6 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39217946
Your best bet is to use a grid system.  I like http://twitter.github.io/bootstrap/index.html or http://foundation.zurb.com/  In addition to their grid, there a lot of other goodies to make it easy to account for multiple devices.  If you want something more straight forward http://blueprintcss.org is just an easy grid, nothing fancy.

It works like this.
<div class="span12">I'm a header</div>
<div class="span12">
    <div class="span4">Left side</div>
    <div class="span4">The Man In Middle - 23</div>
    <div class="span4">Right Side</div>
</div>
<div class="span12">I'm a footer</div>

Open in new window


The core of the grid is simply adding a float:left and padding right to each div.  Each number 1-12 has it's own width.  Grids come in more then 12 columns but 12 seems to be the thing right now.  I think blueprint is 24.  It's color by numbers.
0
 

Author Comment

by:rgb192
ID: 39217962
I went to website and do not understand how I can implement 'grid' for the code that I have
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 100 total points
ID: 39217990
I'm not going to write your code for you. I can help you with questions.

If you have a table that has 3 rows where the top is the header, the middle is 3 columns and the bottom is a footer you end up with:
<table>
<tr><td colspan="3">header</td></tr>
<tr><td>left</td><td>middle</td><td>right</td></tr>
<tr><td colspan="3">footer</td></tr>
</table>

Open in new window

This table match's my code above.

Just take it in parts.  I would strongly suggest learning on a site like http://www.codecademy.com/tracks/web or http://www.w3schools.com/html/ and spend a couple of hours.  I would also suggest starting with blueprint as that will be easier.  But first learn the basics.
0
Ransomware-A Revenue Bonanza for Service Providers

Ransomware – malware that gets on your customers’ computers, encrypts their data, and extorts a hefty ransom for the decryption keys – is a surging new threat.  The purpose of this eBook is to educate the reader about ransomware attacks.

 
LVL 4

Accepted Solution

by:
Ahmed Hussein earned 400 total points
ID: 39218738
<style>
	.header{
		width:632px;
		padding-left: 60px;
		background: #000000;
		height: 45px;
	}
	.header img{
		vertical-align: middle;
	}
	.content {
		width:680px;
		margin-left: 60px;
	}
	
	.footer{
		width:740px;
		padding-left: 40px;
		background: #000000;
		height: 46px;
		text-align: center;
	}
	.footer input{
		margin-top: 10px;
	}
</style>

<div class="header"><img src=step1b.gif>

        <img src=step2b.gif>

        <img src=step3.gif>
          
        <img src=step4b.gif></div>
<div class="content">
    <font style="color:454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;font-family:arial, helvetica, sans-serif;line-height:1;">
          <br>
          <br>
          DECLARE GUESTS AND SELECT MENU OPTIONS
          </font> <BR>
            <table  width=600 cellpadding=0 cellspacing="0">
              <tr>
                <td >
                  <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                  <br>


                  </font>
                </td>
              </tr>
              <tr>
                <td  >
                  <br>
                  <font face=arial color=ffffff size="3" style="line-height:2;">  
                  Guest Name
                  </font>
                  <br>
                  <br>                  
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            AMUSE BOUCHE
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            First
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Second
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Notes
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Cauliflower Toast</option>
                              <option value="monday">Cocktails</option>
                              <option value="monday">Bottle Service</option>
                            </select>
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Scallops</option>
                            </select>
                          </td>
                          <td>
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Dry-Aged Sirloin</option>
                              <option value="monday">08</option>
                              <option value="monday">09</option>
                            </select>
                          </td>
                          <td>
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                        </tr>
                    </table>
                    <br>
                    <br>
                </td>
              </tr>
              <tr>
                <td >
                  <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                  <br>
                  

                  </font>
                </td>
              </tr>
              <tr>
                <td  >
                  <br>
                  <font face=arial color=ffffff size="3" style="line-height:2;">  
                  Guest 1
                  </font>
                  <br>
                  <br>
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            First Name
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Last Name
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Email
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                          <td>
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>

                        </tr>
                    </table>
                    <br>
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            AMUSE BOUCHE
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            First
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Second
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Notes
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Cauliflower Toast</option>
                              <option value="monday">Cocktails</option>
                              <option value="monday">Bottle Service</option>
                            </select>
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Scallops</option>
                            </select>
                          </td>
                          <td>
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Dry-Aged Sirloin</option>
                              <option value="monday">08</option>
                              <option value="monday">09</option>
                            </select>
                          </td>
                          <td>
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                        </tr>
                    </table>
                    <br>
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Is this guest a child
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <input type=checkbox  name="dinner_days" size="1">
                            </input>
                          </td>
                        </tr>
                    </table>
                    <br>
                    <br>
                </td>
              </tr>
            </table>
</div>
<div class="footer"> <input class="rounded"  type="submit" value="Declare Guests and Select Menu Options">
          </input></div>

Open in new window

0
 

Author Closing Comment

by:rgb192
ID: 39224561
I almost understand blueprint

the example by AhmedGeek is very organized and streamlined
thanks
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39224595
"this table layout is confusing.  How can I change to div layout".
The answer by AhmedGeek is still a table?
Thanks for the points.
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question