Question

我正在尝试将doctype添加到索引页面，但每次执行此操作都会将div移动到屏幕的左上角。

我可以看到类似的问题，但无法理解它们与我的关系。

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    <head>
    <title>Crafty Pixies</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


    <script type="text/javascript">
    <!-- hide from none JavaScript Browsers 
    if (document.images) {
    img1 = new Image();
    img1.src = "images/bac01.png";
    img2 = new Image();
    img2.src = "images/05_01.png";
    img3 = new Image();
    img3.src = "images/05_03.jpg";
    img4 = new Image();
    img4.src = "images/buttons/05_04.png";
    img5 = new Image();
    img5.src = "images/buttons/05_04-over.png";
    img6 = new Image();
    img6.src = "images/buttons/05_06.png";
    img7 = new Image();
    img7.src = "images/buttons/05_06-over.png";
    img8 = new Image();
    img8.src = "images/buttons/05_07.png";
    img9 = new Image();
    img9.src = "images/buttons/05_07-over.png";
    img10 = new Image();
    img10.src = "images/buttons/05_08.png";
    img11 = new Image();
    img11.src = "images/buttons/05_08-over.png";
    img12 = new Image();
    img12.src = "images/05_11.png";
    img13 = new Image();
    img13.src = "images/05_02.png";
    img14= new Image();
    img14.src = "images/Cards/06_01s.png";
    img15= new Image();
    img15.src = "images/Cards/06_02s.png";
    img16 = new Image();
    img16.src = "images/Cards/06_04s.png";
     img17 = new Image();
    img17.src = "images/Cards/06_05s.png";
    img18 = new Image();
    img18.src = "images/Bags/08_01s.png";
    img19 = new Image();
    img19.src = "images/Bears/10_01s.png";
    img20= new Image();
    img20.src = "images/Babies/12_01s.png";
    img21 = new Image();
    img21.src = "images/cases/09_01s.png";
    img22 = new Image();
    img22.src = "images/logos/twitlog.png";
    img23 = new Image();
    img23.src = "images/logos/fbbadge.bmp";
    // End Hiding -->
    </SCRIPT> 


    <style type="text/css">
    body.noScroll { 
       background-color: #AF8750;
       background-attachment: absolute;
    }


    { font-family: 'Lucida Casual', 'Comic Sans MS'; color: #8C6A3E
    }
    h1
    { font-family:'Lucida Casual', 'Comic Sans MS';
    }
    h2
    { font-family:'Lucida Casual', 'Comic Sans MS';
    }
    h3
    { font-family:'Lucida Casual', 'Comic Sans MS';
    }
    h4
    { font-family:'Lucida Casual', 'Comic Sans MS';
    }
    p
    { font-family:'Lucida Casual', 'Comic Sans MS';
    }
    img
    {  border-style: none;
    }
    table { border: 2px double #AF8750;  background-color: #DEA862; font-family: 'Lucida     Casual', 'Comic Sans MS'; color: #8C6A3E
    }
td { border: 2px double #AF8750; font-family: 'Lucida Casual', 'Comic Sans MS'; color: #8C6A3E
    }
tr { border: 2px double #AF8750; font-family: 'Lucida Casual', 'Comic Sans MS'; color: #8C6A3E
    }
    a:link {font-family: 'Lucida Casual', 'Comic Sans MS'; color:#8C6A3E;} /* unvisited link */
    a:visited {font-family: 'Lucida Casual', 'Comic Sans MS'; color:#ffffff;;} /* unvisited link */
    a:hover {font-family: 'Lucida Casual', 'Comic Sans MS'; color:#ffffff;;} /* unvisited link */
    a:active {font-family: 'Lucida Casual', 'Comic Sans MS'; color:#ffffff;;} /* unvisited link */
    </style>
    </head>


    <BODY bgcolor="#AF8750">

    <div id="layer2" style="position:absolute; top:188; left:35; width:280; height:307; z-index:2; padding:0px; background-color:#DEA862; border: 0px;">
    <table style="position:relative; top:4; left:4; width:270; cellpadding:2; cellspacing:2;">
    <tr>
    <td colspan="2" align="center">
    <h3><b>Follow Us</b></h3>
    </td>
    </tr>
    <tr>
    <td></td>
    </tr>
    <tr>
    <td align="center" valign="middle"><a href="http://twitter.com/craftypixies" target="_blank"><img src="images/logos/twitlog.png" alt="" /></a></td>
    <td align="center" valign="middle"><a href="http://en-gb.facebook.com/craftypixies" target="_blank"><img src="images/logos/fbbadge.bmp" alt="" /></a></td>
    </tr>
    </table>
    </div>
    <a href="index.htm"><img style="position:absolute; TOP:15px; LEFT:330px; WIDTH:136px; HEIGHT:56px; PADDING: 0px; BORDER: 0px" src="images/buttons/05_04.png" alt="" /></a> 
    <a href="products.htm"><img style="position:absolute; TOP:15px; LEFT:468px; WIDTH:136px; HEIGHT:56px; PADDING: 0px; BORDER: 0px" src="images/buttons/05_06.png" alt="" /></a> 
    <a href="contact.htm"><img style="position:absolute; TOP:15px; LEFT:604px; WIDTH:136px; HEIGHT:56px; PADDING: 0px; BORDER: 0px" src="images/buttons/05_07.png" alt="" /></a> 
    <a href="links.htm"><img style="position:absolute; TOP:15px; LEFT:740px; WIDTH:136px; HEIGHT:56px; PADDING: 0px; BORDER: 0px" src="images/buttons/05_08.png" alt="" /></a> 
    <img style="position:absolute; TOP:15px; LEFT:25px; WIDTH:300px; HEIGHT:56px; PADDING: 2px" src="images/05_01.png" alt="" /> 
    <img style="position:absolute; TOP:73px; LEFT:25px; WIDTH:300px; HEIGHT:110px; PADDING: 2px" src="images/logos/05_03.jpg" alt="" /> 
    <img style="position:absolute; TOP:500px; LEFT:25px; WIDTH:300px; HEIGHT:20px; PADDING: 2px" src="images/05_11.png" alt="" /> 
    <img style="position:absolute; TOP:73px; LEFT:329px; WIDTH:548px; HEIGHT:73px; PADDING: 2px" src="images/05_12.png" alt="" /> 
    <img style="position:absolute; TOP:235px; LEFT:329px; WIDTH:548px; HEIGHT:129px; PADDING: 2px" src="images/05_13.png" alt="" /> 
    <img style="position:absolute; TOP:486px; LEFT:329px; WIDTH:548px; HEIGHT:41px; PADDING: 2px" src="images/05_14.png" alt="" /> 
    <a href="cards.htm"><img style="position:absolute; TOP:150px; LEFT:332px; WIDTH:89px; HEIGHT:83px; Border: 0px" src="images/cards/06_01s.jpg" alt="" /> 
    <img style="position:absolute; TOP:150px; LEFT:423px; WIDTH:89px; HEIGHT:83px; Border: 0px" src="images/cards/06_02s.jpg" alt="" /> 
    <img style="position:absolute; TOP:150px; LEFT:514px; WIDTH:89px; HEIGHT:83px; Border: 0px" src="images/cards/06_04s.jpg" alt="" /> 
    <img style="position:absolute; TOP:150px; LEFT:605px; WIDTH:89px; HEIGHT:83px; Border: 0px" src="images/cards/06_05s.jpg" alt="" /> 
    <img style="position:absolute; TOP:150px; LEFT:697px; WIDTH:89px; HEIGHT:83px; Border: 0px" src="images/cards/06_02s.jpg" alt="" /> 
    <img style="position:absolute; TOP:150px; LEFT:787px; WIDTH:89px; HEIGHT:83px; Border: 0px" src="images/cards/06_01s.jpg" alt="" /></a> 
    <a href="bags.htm"><img style="position:absolute; TOP:365px; LEFT:332px; WIDTH:133px; HEIGHT:114px; Border: 0px" src="images/bags/08_04s.jpg" alt="" /></a> 
    <a href="bears.htm"><img style="position:absolute; TOP:365px; LEFT:468px; WIDTH:133px; HEIGHT:114px; Border: 0px" src="images/bears/10_01s.jpg" alt="" /></a> 
    <a href="baby.htm"><img style="position:absolute; TOP:365px; LEFT:605px; WIDTH:133px; HEIGHT:114px; Border: 0px" src="images/babies/12_01s.jpg" alt="" /></a> 
    <a href="cases.htm"><img style="position:absolute; TOP:365px; LEFT:742px; WIDTH:133px; HEIGHT:114px; Border: 0px" src="images/cases/09_01s.jpg" alt="" /></a>
    </body>
     </html>

Answer 1

这就是HTML文档的开头应该是：

<!doctype html>

<html>
<head>
    <title>Crafty Pixies</title>
    <meta charset="utf-8">

只需将此部分复制粘贴到文档的开头，然后将复制粘贴到<script>元素之前的所有内容中。

现在，确保一切正常，不要更改此顶部。

Answer 2

按照absolute positioning not working with XHTML?中的建议，将px添加到div id“layer2”中的top，left，width和height属性中。

当我添加doctype时，我的1个div会移动

2 个答案: