-1

多年来,我一直在使用 DreamWeaver 构建简单的网站,并且从未遇到过使用表格来分隔页面上的文本的任何困难。

在我最近的项目中,我在一个 1 x 1 表(1 x 1 包含一个 Photoshop 生成的 HTML 切片作为背景)中创建了一个 7(行)乘 2(列)表,我打算在其中输入一个标签(第 1 列)和相关信息(第 2 列)。当我在 DW Live View 或浏览器中查看结果时,第 2 列的内容写在第 1 列的顶部。

如果我提取 7 x 2 表的代码并将其粘贴到空白页中,它可以正常工作。

我已将违规页面上传到:http ://www.onthepeninsula.biz/new/lucyscafe/index.html

底行包含四列(仅针对该行,第二列已拆分为三个单元格。第 2 列和第 3 列中的内容均已写入第 1 列。

页面链接错误 - 应该是http://www.onthepeninsula.biz/new/lucyscafe/index.html

<html>
<head>
<title>On The Peninsula | Lucy's Cafe</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
    background-color: #2A599E;
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}
</style>
<link href="../otp.css" rel="stylesheet" type="text/css">
<script language="javascript">

<!--//BEGIN Script

function map(url) {

link =
window.open(url,"Link","toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=640,height=565,left=100,top=150");

}
//END Script-->
</script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="MM_preloadImages('../images/buttons/home4.jpg','../images/buttons/name4.jpg','../images/buttons/category4.jpg','../images/buttons/pricing4.jpg','../images/buttons/join4.jpg','../images/buttons/contact4.jpg','../images/buttons/social4.jpg')">
<!-- Save for Web Slices (shop.psd) -->
<table width="719" height="280" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td colspan="5">
            <img src="../images/shop/shop_01.jpg" width="1040" height="40" alt=""></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="40" alt=""></td>
    </tr>
    <tr>
        <td rowspan="18">
            <img src="../images/shop/shop_02.jpg" width="40" height="1000" alt=""></td>
        <td colspan="3">
            <img src="heading.jpg" width="960" height="80" alt=""></td>
        <td rowspan="18">
            <img src="../images/shop/shop_04.jpg" width="40" height="1000" alt=""></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="80" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="../images/shop/shop_05.jpg" width="960" height="31" alt=""></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="31" alt=""></td>
    </tr>
    <tr>
        <td><a href="../index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image42','','../images/buttons/home4.jpg',1)"><img src="../images/buttons/home3.jpg" alt="On The Peninsula Home" width="220" height="58" border="0" id="Image42"></a></td>
        <td rowspan="16">
            <img src="../images/shop/shop_07.jpg" width="20" height="889" alt=""></td>
<td width="720" height="298" rowspan="6" align="left" valign="top" background="../images/shop/shop_08.jpg"><table width="720" height="290" border="0" cellpadding="5">
  <tr>
    <td><table width="700" height="280"border="0" cellpadding="5">
      <tr>
        <td width="170" height="38">Business Name:</td>
        <td width="504" height="38">Lucy's Cafe</td>
      </tr>
      <tr>
        <td width="170" height="38">Address:</td>
        <td width="504" height="38">26 Talford Street, Mitchell Valley VIC 3999</td>
      </tr>
      <tr>
        <td width="170" height="38">Telephone:</td>
        <td width="504" height="38">(03) 9999 9999</td>
      </tr>
      <tr>
        <td width="170" height="38">&nbsp;</td>
        <td width="504" height="38">&nbsp;</td>
      </tr>
      <tr>
        <td width="170" height="38">&nbsp;</td>
        <td width="504" height="38">&nbsp;</td>
      </tr>
      <tr>
        <td width="170" height="38">&nbsp;</td>
        <td width="504" height="38">&nbsp;</td>
      </tr>
      <tr>
        <td width="170" height="38">&nbsp;</td>
        <td width="504" height="38">&nbsp;</td>
      </tr>
    </table></td>
  </tr> 
</table></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="58" alt=""></td>
    </tr>
    <tr>
        <td><a href="../name.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image','','../images/buttons/name4.jpg',1)"><img src="../images/buttons/name3.jpg" alt="Browse by Business Name" width="220" height="60" border="0" id="Image"></a></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="60" alt=""></td>
    </tr>
    <tr>
        <td><a href="../category.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','../images/buttons/category4.jpg',1)"><img src="../images/buttons/category3.jpg" alt="Browse by Category" border="0" width="220" height="61" id="Image2"></a></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="61" alt=""></td>
    </tr>
    <tr>
        <td><a href="../pricing.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','../images/buttons/pricing4.jpg',1)"><img src="../images/buttons/pricing3.jpg" alt="Pricing" border="0" width="220" height="59" id="Image3"></a></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="59" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="../images/shop/shop_12.jpg" width="220" height="1" alt=""></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td><a href="../join.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','../images/buttons/join4.jpg',1)"><img src="../images/buttons/join3.jpg" alt="Join On The Peninsula" width="220" height="59" border="0" id="Image4"></a></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="59" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="../images/shop/shop_14.jpg" width="220" height="1" alt=""></td>
        <td rowspan="2">
            <img src="../images/shop/shop_15.jpg" width="720" height="31" alt=""></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2"><a href="../contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','../images/buttons/contact4.jpg',1)"><img src="../images/buttons/contact3.jpg" alt="Contact On The Peninsula" border="0" width="220" height="59" id="Image5"></a></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="30" alt=""></td>
    </tr>
    <tr>
        <td width="720" height="519" rowspan="6" valign="top" background="../images/shop/shop_17a.jpg"><table width="720" border="0" cellpadding="10">
          <tr>
            <td width="700"><p>This is an example of one of the business pages in On The Peninsula. </p>
            <p>The top section of each business page contains the important contact and location details for your business, including a link to a location map, if your business has a public-friendly workplace.</p>
            <p>Please note that this is an example page and that the email and web addresses listed above are not real - if you click on either, you'll be directed to the email address and Facebook page for On The Peninsula.</p>
            <p>In this section of the page, you have the opportunity to provide an overview of your business, what you do, what you sell, your trading hours - pretty much anything that you wish to tell a visitor to your site.</p>
            <p>You might be wondering about that black and white square on the bottom left corner of this page. This is called a Quick Response (or QR) code. These are very similar to a barcode and can be read by any one of several QR readers available for smartphones and tablets. These QR readers can be downloaded at no cost.</p>
            <p>The codes themselves can be linked to just about any piece of information - web addresses, contact cards, photos ... you name it. We have chosen to use them to create contact records in iPhones, Androids and any other device. We will link the QR code on your page to your contact details so that if someone scans the code on your page, your contact details will be saved on their device. Try it on this page and you'll find that our contact details get loaded into your phone!</p>
            <p>Finally, you'll notice that we are supporters of <a href="http://www.starlight.org.au" target="_blank">Starlight Children's Foundation</a> and you can be too. If you would like to have the Starlight Support's badge on your page, it will cost you $10 per year. Every dollar rasied via this process will be matched by us and donated directly to Starlight Children's Foundation.</p>
            <p>&nbsp;</p></td>
          </tr>
          </table>
      </td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="29" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="../images/shop/shop_18.jpg" width="220" height="1" alt=""></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td><a href="../social.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','../images/buttons/social4.jpg',1)"><img src="../images/buttons/social3.jpg" alt="Facebook & Twitter" width="220" height="60" border="0" id="Image6"></a></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="60" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="../images/shop/shop_20.jpg" width="220" height="30" alt=""></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="30" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="../images/shop/shop_21.jpg" width="220" height="190" alt=""></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="190" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="../images/shop/shop_22.jpg" width="220" height="220" alt=""></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="209" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="../images/shop/shop_23.jpg" width="720" height="41" alt=""></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="11" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="../images/shop/shop_24.jpg" width="220" height="30" alt=""></td>
        <td>
            <img src="../images/shop/spacer.gif" width="1" height="30" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
4

1 回答 1

1

您的问题出在样式表中。您的opt.css文件包括:

#Table_01 tr td table tr td {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 12px;
    color: #FFF;
    position: absolute;
}

这会将td表格中的所有单元格设置为具有绝对定位。位置值未设置,因此它们都以彼此重叠的 (0, 0) 结束。

更改position: absoluteposition: relative修复它。

顺便说一句,我使用 Chrome 中的开发人员工具发现了问题。Firefox 和 Internet Explorer 也有类似的工具。值得学习如何使用这些,以便您可以追踪此类问题。

于 2012-10-14T10:50:12.583 回答