Go Back   Computer Forums > Web Design | Website Development > Web Programming
Click Here to Login
Join Computer forums Today


Reply
 
Thread Tools Search this Thread Display Modes
 
Old 01-27-2009, 07:07 AM   #1
Bogan
 
Neodude112320's Avatar
 
Join Date: Feb 2006
Location: Australia
Posts: 8,471
Send a message via MSN to Neodude112320
Default Table issues



This is the site im meant to make for TAFE,Yet THIS is the closest i can get:



Now i have everything sorted EXCEPT The spaced between the Tables? Any ideas?

Here is the HTML Source:

<html>
<head>
<title>Insert Title here</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<body bgcolor="#999999">
<td>
<tr>
<table>
<td width="780" height="75" background="images/bg.jpg" >
<logo>&nbsp; Your Company Name</logo>
</tr>
</td>
</table>
<table>
<tr>
<td>
<td width="780" height="20" bgcolor="FFCC67" >
<center><a href="#">Home</a>|
<a href="">Company</a>|
<a href="">Services</a>|
<a href="">Products</a>|
<a href="">Clients</a>|
<a href="">Downloads</a>|
<a href="">Site Map</a>|
<a href="#">Contact Us</a></center>
</tr>
</td>
</table>
<table>
<td width="160" height="580" bgcolor="#CCCCCC" >
<center> Lorum Ipsem
<td width="620" height="580" align=center valign=top bgcolor="#FFFFF">
<p><center><img src="images/main.jpg" align="texttop"></center></p>
<text><h1>Welcome To Company Website!</h1></text>
</table>



Now the Thing is,I have to do it all by hand so im not allowed to use a HTML Editor....
__________________

__________________
Desktop:BitFenix Survivor~Gigabyte GA-P67A-UD3R~ i7 2600K @ 4hz~AMD 6870 1GB~12gb Team Elite DDR3 1333~3xWD In RAID5~W7 Ult
Laptop:Alienware M11x~ i7-2637M 1.7GHz~16GB 1333MHz DDR3~GeForce GT 540M~W7 Ult
Neodude112320 is offline   Reply With Quote
Old 01-27-2009, 10:57 AM   #2
In Runtime
 
Daeva's Avatar
 
Join Date: Dec 2005
Posts: 407
Send a message via AIM to Daeva Send a message via MSN to Daeva Send a message via Yahoo to Daeva
Default Re: Table issues

Here is what I got. I don't have your images, but I tried to match colors as best I could. It works in FF 3, IE 7, and passes w3 validation. None of this was done using an editor, except for my trusty textpad . You were missing three key elements to make your border woes dissapear:
1.) border="0"
2.) cellpadding="0"
3.) cellspacing="0"

Hope this helps!
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us" dir="ltr">
 <head>
  <title>Insert Title here</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" />
  <style type="text/css">
   @media screen {
    BODY
    {
      background-color: #898989;
      color: #efefef;
      font-family: Arial, Verdana, Sans-Serif;
      margin: 0px;
    }
    #mainTable
    {
      display: block;
      width: 90%;
      margin: 0px auto;
      height: auto;
      max-width: 1200px;
      min-width: 1024px;
    }
    #mainTable TH
    {
      line-height: 90px;
      height: 90px;
      width: 100%;
      min-width: 1024px;
      max-width: 1280px;
      color: #aec3e5;
      text-align: left;
      vertical-align: middle;
      background: #577abc url('images/bg.jpg') no-repeat left;
    }
    #mainTable TH H1
    {
      margin: 0px;
      padding: 0px;
      width: 100%;
      text-indent: 20px;
    }
    UL#navigation
    {
      display: block;
      list-style-type: none;
      margin: 0px 30%;
      width: 600px;
      height: 20px;
      text-align: center;
      padding: 0px;
    }
    UL#navigation LI
    {
      float: left;
      clear: none;
      max-width: 120px;
      margin: 0px 2px 0px 2px;
      color: navy;
    }
    UL#navigation A
    {
      color: #3e3530;
    }
    #leftCol
    {
      background-color: #CCCCCC;
      color: #232323;
      text-align: left;
      width: 200px;
      max-width: 200px;
      min-width: 140px;
      min-height: 300px;
      max-height: 600px;
      height: 100%;
    }
    #contentCol
    {
      background-color: #ffffff;
      color: #121212;
      width: 800px;
      max-width: 950px;
      padding: 3px 5px 3px 5px;
      height: 400px;
    }
    #companyNewsHeader
    {
      text-align: left;
      text-indent: 10px;
      margin: 8px auto 0px auto;
      padding: 0px;
      color: #444537;
      font-size: 95%;
    }
    .contentHeader
    {
      background: #ffffff url('images/main.jpg') no-repeat top center;
      padding-top: 130px;
      color: #4e76be;
      display: block;
    }
    .mainContent
    {
      color: #232323;
      background-color: transparent;
      font-family: Verdana, Arial, Sans-Serif;
    }
   }
  </style>
 </head>
 <body>
  <table cellpadding="0" cellspacing="0" border="0" id="mainTable">
   <thead>
    <tr>
      <th colspan="2" valign="middle" align="center">
       <h1>Your Company Name</h1>
      </th>
    </tr>
    <tr>
      <td colspan="2" valign="top" align="center" style="text-align: center; background-color: #FFCC67;">
       <ul id="navigation">
        <li><a href="index.html" target="_self">Home</a>&nbsp;|&nbsp;</li>
        <li><a href="company.html" target="_self">Company</a>&nbsp;|&nbsp;</li>
        <li><a href="services.html" target="_self">Services</a>&nbsp;|&nbsp;</li>
        <li><a href="products.html" target="_self">Products</a>&nbsp;|&nbsp;</li>
        <li><a href="clients.html" target="_self">Clients</a>&nbsp;|&nbsp;</li>
        <li><a href="siteMap.html" target="_self">Site Map</a>&nbsp;|&nbsp;</li>
        <li><a href="contactus.html" target="_self">Contact Us</a></li>
       </ul>
      </td>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td colspan="1" valign="top" align="left" id="leftCol">
        <h3 id="companyNewsHeader">Company News</h3>
        <span class="newsStuff">
        </span>
       </td>
       <td colspan="1" valign="top" align="left" id="contentCol">
        <h2 class="contentHeader">Welcome to Company Website!</h2>
        <span class="mainContent">Text</span>
       </td>
     </tr>
   </tbody>
  </table>
 </body>
</html>
Not sure what you're using this for, but you should always use lists for links because it is semantically correct, and it's easier for search engines to pick up. If you turn the css off on this page, it looks fine if you view it from a mobile phone also.
__________________

__________________
**Official Self-proclaimed glorified excessive (insert additional adjectives here) post editor/modifier.
Edit = Best feature ever
http://www.twitter.com/xDaevax
Daeva is offline   Reply With Quote
Old 01-27-2009, 06:35 PM   #3
Bogan
 
Neodude112320's Avatar
 
Join Date: Feb 2006
Location: Australia
Posts: 8,471
Send a message via MSN to Neodude112320
Default Re: Table issues

Basically it's for an assignment,so i feel like im cheating just copying and pasting yours SO I'll read through your code and compare it too mine and see if i can find what mine is missing

Thanks HEAPS!



EXCELLENT! I Simply had to add this line to below the <table> line:

<table cellpadding="0" cellspacing="0" border="0">

And it works great!
__________________
Desktop:BitFenix Survivor~Gigabyte GA-P67A-UD3R~ i7 2600K @ 4hz~AMD 6870 1GB~12gb Team Elite DDR3 1333~3xWD In RAID5~W7 Ult
Laptop:Alienware M11x~ i7-2637M 1.7GHz~16GB 1333MHz DDR3~GeForce GT 540M~W7 Ult
Neodude112320 is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

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
Trackbacks are On
Pingbacks are On
Refbacks are Off



All times are GMT -5. The time now is 03:37 AM.


Powered by vBulletin® Version 3.8.8 Beta 4
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0