Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    would appreciate it if someone could help convert tables to css

    I have tried and keep deleting the file and starting again, i just can not get the background to be in the center or the header part inside the body box, just a complete mesh up on my part.

    I found these templates a few years ago and would like to know how to convert this to css as it is all using tables which i do not want to use and i hear they are bad to use.

    Code:
    <html>
    <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;">
    </head>
    <body>
    <div align="center">
      <center>
    <table border="0" cellpadding="0" cellspacing="0" width="756" height="291" style="border-collapse: collapse" bordercolor="#111111">
      <tr>
       <td width="134" height="1" bgcolor="#7E8079"><img src="images/spacer.gif" width="134" height="1" border="0"></td>
       <td width="15" height="1"><img src="images/spacer.gif" width="15" height="1" border="0"></td>
       <td width="44" height="1"><img src="images/spacer.gif" width="44" height="1" border="0"></td>
       <td width="309" height="1"><img src="images/spacer.gif" width="309" height="1" border="0"></td>
       <td width="142" height="1"><img src="images/spacer.gif" width="17" height="1" border="0"></td>
       <td width="156" height="1"><img src="images/spacer.gif" width="121" height="1" border="0"></td>
      </tr>
    
      <tr>
       <td colspan="3" bgcolor="#000018" background="images/back-navy.gif" width="193" height="119"><img name="index_r1_c1" src="images/index_r1_c1.gif" width="193" height="118" border="0"></td>
       <td colspan="3" bgcolor="#000018" valign="top" background="images/back-navy.gif" width="577" height="119">
       <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="98%" id="AutoNumber4">
         <tr>
           <td width="55%" style="border-style: none; border-width: medium">
           <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="100%" id="AutoNumber5" height="119">
             <tr>
               <td width="100%" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom: medium none #111111" height="117">
               <p style="margin-left: 14"><b> <font face="Verdana" size="6" color="#FFFFFF">Title</font></b></td>
             </tr>
           </table>
           </td>
           <td width="45%" style="border-style: none; border-width: medium">
                    <p align="center">&nbsp;</td>
         </tr>
       </table>
       </td>
      </tr>
      <tr>
       <td colspan="6" bgcolor="#7E8079" width="770" height="19">
       <p align="right" style="margin-right: 7">&nbsp;</td>
      </tr>
      <tr>
       <td rowspan="2" bgcolor="#7E8079" valign="top" width="134" height="140">
    <!--
       <div align="center">
         <center>
         <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="81%" id="AutoNumber1" height="133">
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17">
             </td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#555652">
             <p align="center"><b><font face="Verdana" size="2" color="#FFFFFF">Main 
             Menu</font></b></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
             <p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
             Your Link</font></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
             <p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
             Your Link</font></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
             <p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
             Your Link</font></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
             <p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
             Your Link</font></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
             <p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
             Your Link</font></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
             <p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
             Your Link</font></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
             <p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
             Your Link</font></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
             <p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
             Your Link</font></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
             <p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
             Your Link</font></td>
           </tr>
         </table>
         </center>
       </div>
    -->
       </td>
       <td align="left" valign="top" height="1" bgcolor="#DCDDDB" width="15"><img name="index_r3_c2" src="images/index_r3_c2.gif" width="15" height="18" border="0"></td>
       <td colspan="2" bgcolor="#DCDDDB" valign="top" width="353" height="1">
       <p style="margin-top: 0; margin-bottom: 0"></td>
       <td align="right" valign="top" height="1" bgcolor="#DCDDDB" width="142"><img name="index_r3_c5" src="images/index_r3_c5.gif" width="17" height="18" border="0"></td>
       <td rowspan="2" bgcolor="#7E8079" valign="top" height="140" width="156">
    
    
    
    <!--
       <div align="center" style="width: 156; height: 259">
         <center>
         <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="90%" id="AutoNumber2" height="1">
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17">
             </td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#555652">
             <p align="center"><b><font face="Verdana" size="2" color="#FFFFFF">Link 
             / News Box</font></b></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
             <p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
             Your Link</font></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
             <p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
             Your Link</font></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
             <p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
             Your Link</font></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
             <p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
             Your Link</font></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
             <p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
             Your Link</font></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
             <p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
             Your Link</font></td>
           </tr>
         </table>
         <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
         <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="89%" id="AutoNumber3">
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" bgcolor="#555652">
             <p align="center"><b><font face="Verdana" size="2" color="#FFFFFF">Text 
             Box</font></b></td>
           </tr>
           <tr>
             <td width="100%" style="border-style: none; border-width: medium" bgcolor="#DCDDDB">
             <p style="margin-left: 4; margin-right: 4; margin-top: 1; margin-bottom: 4">
             <font face="Verdana" size="1" color="#555652">Use this box to type any 
             specials, new updates or even gallery pics here.</font></td>
           </tr>
         </table>
         <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
         </center>
       </div>
    -->
    
    
       </td>
      </tr>
      <tr>
       <td colspan="4" bgcolor="#DCDDDB" valign="top" width="510" height="246">
       <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="100%" id="AutoNumber6">
         <tr>
           <td width="100%" style="border-style: none; border-width: medium">
           <p align="center"><b><font face="Verdana" size="4" color="#333333">Welcome</font></b></td>
         </tr>
         <tr>
           <td width="100%" style="border-style: none; border-width: medium">
                            <p style="margin: 0 14; ">&nbsp;
                    <p style="margin: 0 14; ">&nbsp;
                    <p style="margin: 0 14; ">&nbsp;
                    <p style="margin: 0 14; ">Our site is in developement and will 
                      be live shortly.<font face="Verdana" size="2" color="#333333"> 
                      </font></td>
         </tr>
       </table>
       </td>
      </tr>
      <tr>
       <td colspan="6" bgcolor="#7E8079" width="770" height="12">&nbsp;
       </td>
      </tr>
      <tr>
       <td colspan="6" bgcolor="#000018" background="images/back-navy.gif" width="770" height="12">
       <p align="center" style="margin-top: 4; margin-bottom: 4">
        <FONT 
          face=Verdana color=#FFFFFF size=1>footer</FONT></td>
      </tr>
    </table>
      </center>
    </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Maybe you should start with the basics and first figure out what style layout you want. It seems the particular layout could easily translate to a 5 div layout. By 5 divs I mean there are 4 distinct sections to the page layout.

    wrapper: which wraps around the whole visible page
    header: the top section, usually containing site logo and maybe navigations
    main: the meat of the page which may contain paragraphs and heading tags
    sidebar: optional div that could contain navigation ot local links
    footer: which of course is the bottom section

    Peronally, I think its almost easier to start with a fresh clean slate rather than try to convert a table layout to div layout.
    Read some basic tutorials here.

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    ^ Agreed. Because of some very fundamental differences between tables and div layouts, you will be much better off starting from scratch.

    First, you'll need to make an image of your intended layout, preferably with Photoshop. From there, you can make important decisions about how the div system is going to actually work.

    Try not to design something that will give you massive headaches, but there's no reason not to set yourself challenges. Progessive challenges improve your game but headaches just hurt and can discourage you.

    Remember that divs are not like table cells. They won't necessarily grid up in natural rows and columns like you've come to expect of tables, unless you tell them to - yet they do offer infinitely more possibilities.

    A good tip when you're learning is to make a black and white version of your Photoshop layout and set that into your body background, as a guide. Then colour-code the backgrounds of your divs to help you see them during the positioning stage. You can also take precise measurements in Photoshop, either with the measure tool or by making slices to determine margins and widths. Slices can have many uses, apart from image-slicing.

    Remember though - the key to web-designing is flexibilty. Always design so that things can move around a little, without breaking up your layout, ruining your careful design. Ideally, you want to plan for a number of possible changes which can occur when people view your page in different browsers, at different screen resolutions and with different text zoom sizes.

    Learning the CSS Box Model is really the most important step in getting to grips with CSS. Once you have that, you're on the road to success. I've still got a lot to learn myself.

    Read as many tutorials as you can, starting with the one teedoff has linked.

    And good luck!

    Dr. V
    Last edited by Doctor_Varney; 09-14-2010 at 03:19 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #4
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    This was done really quickly, and far from perfect. But it might help get you on your way...

    Code:
    <html>
    <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;">
    </head>
    
    <body>
    
    <div id="wrapper" style="width:800px; margin:0 auto; background-color:#7E8079;">
      <div id="header" style="height:120px;">
        <div style="float:left; width:195px;"><img name="index_r1_c1" src="images/index_r1_c1.gif" width="195" height="118" border="0"></div>
        <div style="color:#000; width:605px; float:left;">Title</div>
      </div>
      
      <div id="content">
        <div id="sidebar-left" style="width:120px; background-color:#DCDDDB; margin:0 10px; float:left; display:inline;">
        <p style="text-align:center; background-color:#FF9;">Main Menu</p>
        <ul style="text-decoration:none; list-style-type:none; margin:0; padding-left:5px;">
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
          <li>Link 4</li>
        </ul>
        </div>
        
        <div id="content-center" style="width:520px; padding:0 10px; float:left; display:inline; background-color:#DCDDDB;">
        <h1 style="text-align:center;">Welcome</h1>
        <p>Our site is in developement and will be live shortly.<br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
        </p>
        </div>
        
        <div id="sidebar-right" style="width:120px; background-color:#DCDDDB; margin:0 10px; float:left; display:inline;">
        <p style="text-align:center; background-color:#FF9;">Link / News Box</p>
        <ul style="text-decoration:none; list-style-type:none; margin:0; padding-left:5px;">
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
          <li>Link 4</li>
        </ul>
        
        <p style="text-align:center; background-color:#FF9;">Text Box</p>
        <p>Text text text text...</p>
        </div>
      </div>
      
      <br clear="all">
      <div id="footer">
        <p>Footer content</p>
      </div>
      
    </div>
    
    </body>
    </html>
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • Users who have thanked optimus203 for this post:

    jasonpc1 (09-14-2010)

  • #5
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    Thank you for your help, this has helps me on my way to getting the same sort of look as the original template i had.

    cheers

    Quote Originally Posted by optimus203 View Post
    This was done really quickly, and far from perfect. But it might help get you on your way...

    Code:
    <html>
    <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;">
    </head>
    
    <body>
    
    <div id="wrapper" style="width:800px; margin:0 auto; background-color:#7E8079;">
      <div id="header" style="height:120px;">
        <div style="float:left; width:195px;"><img name="index_r1_c1" src="images/index_r1_c1.gif" width="195" height="118" border="0"></div>
        <div style="color:#000; width:605px; float:left;">Title</div>
      </div>
      
      <div id="content">
        <div id="sidebar-left" style="width:120px; background-color:#DCDDDB; margin:0 10px; float:left; display:inline;">
        <p style="text-align:center; background-color:#FF9;">Main Menu</p>
        <ul style="text-decoration:none; list-style-type:none; margin:0; padding-left:5px;">
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
          <li>Link 4</li>
        </ul>
        </div>
        
        <div id="content-center" style="width:520px; padding:0 10px; float:left; display:inline; background-color:#DCDDDB;">
        <h1 style="text-align:center;">Welcome</h1>
        <p>Our site is in developement and will be live shortly.<br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
        </p>
        </div>
        
        <div id="sidebar-right" style="width:120px; background-color:#DCDDDB; margin:0 10px; float:left; display:inline;">
        <p style="text-align:center; background-color:#FF9;">Link / News Box</p>
        <ul style="text-decoration:none; list-style-type:none; margin:0; padding-left:5px;">
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
          <li>Link 4</li>
        </ul>
        
        <p style="text-align:center; background-color:#FF9;">Text Box</p>
        <p>Text text text text...</p>
        </div>
      </div>
      
      <br clear="all">
      <div id="footer">
        <p>Footer content</p>
      </div>
      
    </div>
    
    </body>
    </html>


  •  

    Posting Permissions

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