Solved

change from table layout to div layout

Posted on 2013-06-03
6
329 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now