Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 10-29-2010, 09:35 AM   PM User | #1
jasonpc1
Regular Coder

 
Join Date: Apr 2010
Posts: 417
Thanks: 4
Thanked 1 Time in 1 Post
jasonpc1 is on a distinguished road
please help me convert table to CSS layout

I have this template that i have tried to convert but just can not get my head around css fully.

I tried to put a blue background and place two white div's, one left and right side. but all seem to go down the page and once i got the sizes right the blue colors all went. ?!

Here is the original code that i had, can anyone help out?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<table cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" width="1065">
  <tr>
    <td width="1061" valign="top" bgcolor="#0000FF" style="border-style: none; border-width: medium">

      <table cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0; width: 100%; height: 72px;">

        <tr>
          <td width="33%" class="headerimage"><p style="margin-left: 7"> <b><font face="Arial" size="5" color="#FFFFFF"></font></b>
		  </td>
          <td width="16%" class="headerimage">&nbsp;</td>
          <td width="51%" class="headerimage"><p align="center" style="margin-top: 0; margin-bottom: 0"><b><i><font face="Verdana" color="#FFFFFF">header text</font></i></b></p>
		  <p align="center" style="margin-top: 0; margin-bottom: 0"><b><i> <font face="Verdana" color="#FFFFFF">on the net!'</font></i></b>
		  </td>

        </tr>
      </table>

	 </td>
  </tr>
  <tr> 
    <td width="1061" style="border-style: none; border-width: medium" height="41">

      <table cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" width="100%">
        <tr> 
          <td class="topmenu"> 
            <b><font face="Arial" size="2" color="#FFFFFF">Button</font></b></td>

          <td class="topmenu"> 
            <b><font face="Arial" size="2" color="#FFFFFF">Button</font></b></td>
          <td class="topmenu"> 
            <b><font face="Arial" size="2" color="#FFFFFF">Button</font></b></td>
          <td class="topmenu"> 
            <b><font face="Arial" size="2" color="#FFFFFF">Button</font></b></td>
          <td class="topmenu"> 
            <b><font face="Arial" size="2" color="#FFFFFF">Button</font></b></td>
        </tr>

      </table>

	  </td>
  </tr>
  <tr> 
    <td width="1061" style="border-style: none; border-width: medium" valign="top">

      <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0">
        <tr> 
          <td width="210" valign="top" bgcolor="#003399" style="border-style: none; border-width: medium">
		  <p align="center">MENU<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

		  </td>
          <td width="634" style="border-style: none; border-width: medium" valign="top"> 
		  WELCOME
          </td>
          <td width="211" style="border-style: none; border-width: medium" bgcolor="#003399" valign="top">
		  <div align="center">right side<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
		  </td>
        </tr>
      </table>

	  </td>
  </tr>
  <tr> 
    <td width="1061" style="border-style: none; border-width: medium" height="45">

      <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0; height: 1px;" width="100%">
        <tr> 
          <td width="100%" style="border-style: none; border-width: medium; height: 3px;" valign="top" bgcolor="#FF0066">&nbsp;</td>
        </tr>
        <tr> 
          <td width="100%" height="18" style="border-style: none; border-width: medium" bgcolor="#003399">

		  <p align="center"><b><font face="Arial" size="1" color="#FFFFFF">footer.</font></b>
		  </td>
        </tr>
      </table>

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

</body>

</html>
jasonpc1 is offline   Reply With Quote
Old 10-29-2010, 01:17 PM   PM User | #2
cdorob
New to the CF scene

 
Join Date: Sep 2010
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
cdorob is an unknown quantity at this point
Well, it's a bit hard to help you with the code unless someone will make the layout for you. But you could have a look at Flexi CSS Layouts - a Dreamweaver Extension that help you create Css layouts in Dreamweaver without coding.
cdorob is offline   Reply With Quote
Old 10-30-2010, 06:55 AM   PM User | #3
Major Payne
Regular Coder

 
Join Date: Aug 2005
Location: MS
Posts: 745
Thanks: 7
Thanked 65 Times in 63 Posts
Major Payne is an unknown quantity at this point
Might help...

Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
Why tables for layout is stupid: http://www.hotdesign.com/seybold/
How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/co...-tables-to-css
Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Ima...ysterious_Gaps
__________________
☠ ☠RON☠ ☠
Major Payne is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 03:11 PM.


Advertisement
Log in to turn off these ads.