Question

This is the site I'm working on并且CSS位于名为saucy.css的同一目录中（抱歉，我只能发布一个超链接）。

首先，为我非常无效的HTML和CSS道歉。我保证，一旦网站启动并运行，我就会解决所有问题！但是，如果这导致问题，我现在就会这样做。

我目前的问题：

当我向Twitter添加超链接时它会移动到左上方的图标就是现在。正如您从HTML中看到的那样它应该在主盒子下面（in 与版权标志等）左边。
我出现了这个奇怪的文字在我的页面底部：â€<。我被告知这是因为无法正确显示角色，但我看不出它可能是什么角色。
当我尝试编辑CSS时删除上的链接格式导航栏，没有任何反应。
我无法添加边框页面中央的框。作为沮丧是桌子的一部分，我只想要或的边框这是灰色的。是否有可能这样做？

非常感谢您的阅读！

Answer 1

哇，看起来你急于将它们放在一起......你真的应该花时间去做它，这样你就不会犯错误。我看到你已经倒置了一个应该有TR标签的TD标签。我也看到你已经关闭了一个TR标签，并决定只使用一个TD标签，我不确定这是故意还是不是lol。我将对你的一些代码发表评论并问你是否有意，但我会先把它清理一下。

你永远不应该只是将所有代码放在一起，这是非常糟糕的做法，会导致你忘记关闭标签。你可以随时缩进。无论你是否可以写colspan = 4是无关紧要的，你应该总是把它放在这样的引号中：colspan =“4”和所有其他属性。

对于你所处的级别，你应该使用xhtml。这将迫使浏览器使用标准化，并防止您的网站在一个浏览器上看起来“怪异”，但在另一个浏览器上看起来很完美。

这是我评论过的代码。你真的需要通过它并正确匹配所有的开/关标签。你为自己弄得很糟糕大声笑。玩得开心。

<table align="center" width="60%" cellspacing="0" cellpadding="5"> 
 <tr>
  <td colspan=4>
   <div class="logo">saucydares</div> 
   <div class="slogan">fun and games for couples everywhere!</div>
   </td>
 </tr>
 <tr class="links"> 
  <td class="links" colspan=4 width="100%" align=center><a href="#">HOME</a> | <a href="/about.html">ABOUT</a> | <a href="#">ARCHIVE</a> | <a href="#">DARE BOX</a></td> 
 </tr> 
 <tr>
  <td colspan=4 class="main" cellpadding=10> 
   <br><br> <!-- Breaks should always be <br /> XHTML only //-->


    <table height="270px" width="450px" align=center cellpadding="5"> 
        <tr class="box">
         <td align=center>
          <div id="dare">Welcome to Saucy Dares! To get going, adjust the settings below and click "Dare me!".</div>
         </td>
        </tr>
        <!-- There is no TR tag here. 
             Was it on purpose? //-->
        <td height="20px" align=right cellpadding="0">
            <form name="form"> 

            <select id="mode" name="mode"> 
            <option value="classic">Classic Collection</option> 
            <option value="long">The Long Game</option> 
            </select> 

            <select name="player"> 
            <option value="him">For him</option> 
            <option value="her">For her</option> 
            <option value="double">Double dare</option> 
            </select> 

            <input type="button" value="Dare me!" onClick="get();"> 
            </form> 
         </tr> <!-- You closed the parent TR before the child TD //-->
        </td>  <!-- This TD no longer applies to anything because you
                    closed its parent row //-->
    </table> 


<br><br> <!-- Breaks should always be <br /> XHTML only //-->
<b>Latest news</b> 
<UL> 
<LI> Welcome to the new look Saucy Dares! Now you can take things to the next level with the new game mode, The Long Game. You can also both get involved by selecting 'Double dare' from the second drop down box. Read more about the new game modes on the <a href="/about.html">About page</a>.
<LI>Dares now appear without needing to refresh the page meaning your settings aren't reset every time you view a new dare.
<LI> What do you like about the new design? What is still missing? Let us know on Twitter! You can also follow @SaucyDares to receive updates whenever new features and dares are added.
<LI> You can now share your favourite dares with us by putting them in the <a href="/darebox.html">Dare Box</a>!
</UL> 
 </tr> <!-- Because you already closed the TR in your
            child table, this is going to cause some
            weird effects lol //-->
</td> <!-- More weird effects are going to occur until
           you match the correct closing tags to
           their opening tags //-->

<tr class="footer"><img src="facebook_border.gif">&nbsp;

<a href="http://www.twitter.com/saucydares" target="_blank"><img src="twitter_border.gif" alt="Twitter" border="0"></a> 

</td><td width="33%" align=center>&copy; 2010 Saucy Dares</td><td width="33%" align=right>Click <a href="mailto:saucydares@yahoo.com">here</a> to report an error</td></tr> 
</table>

Answer 2

以下是您用于网站的相同代码但是，我删除了所有表格元素以帮助您，让它看起来有点不错，请查看它并告诉我您的想法或者您是否需要其他任何内容。我可能犯了一些小错误或达不到网站标准，但这是在飞行中完成的。

   <h3 class="logo" style="text-align:center; weight:bold;">saucydares</h3> <!--center these in your css file. or inline style it like I did. -->
   <h3 class="slogan" style="text-align:center;">fun and games for couples everywhere!</h3><!--center these in your css file. or inline style it like I did. -->

 <div class="links" style="text-align:center;"> 
    <br /><a href="#">HOME</a> | <a href="/about.html">ABOUT</a> | <a href="#">ARCHIVE</a> | <a href="#">DARE BOX</a><br /> <br />
   </div>

<h5 id="dare" style="text-align:center;">Welcome to Saucy Dares! To get going, adjust the settings below and click "Dare me!".</h5><br />

            <form name="form" style="text-align:center;"> 

            <select id="mode" name="mode"> 
            <option value="classic">Classic Collection</option> 
            <option value="long">The Long Game</option> 
            </select><br />

            <select name="player"> 
            <option value="him">For him</option> 
            <option value="her">For her</option> 
            <option value="double">Double dare</option> 
            </select> 
            <br />

            <input type="button" value="Dare me!" onClick="get();"> 
            </form> 


<br /><br /> <!-- Breaks should always be <br />-->
<b>Latest news</b> 
<UL> 
<LI> Welcome to the new look Saucy Dares! Now you can take things to the next level with the new game mode, The Long Game. You can also both get involved by selecting 'Double dare' from the second drop down box. Read more about the new game modes on the <a href="/about.html">About page</a>.
<LI>Dares now appear without needing to refresh the page meaning your settings aren't reset every time you view a new dare.
<LI> What do you like about the new design? What is still missing? Let us know on Twitter! You can also follow @SaucyDares to receive updates whenever new features and dares are added.
<LI> You can now share your favourite dares with us by putting them in the <a href="/darebox.html">Dare Box</a>!
</UL> 

<div style="text-align:center;" class="footer"><img src="facebook_border.gif"><br />

<a style="text-align:center;" href="http://www.twitter.com/saucydares" target="_blank"><img style="text-align:center;" src="twitter_border.gif" alt="Twitter" border="0" /></a> 

<h3 width="33%" style="text-align:center;">&copy; 2010 Saucy Dares</h3><p width="33%" style="text-align:center;">Click <a style="text-align:center;" href="mailto:saucydares@yahoo.com">here</a> to report an error</p> 
</div>

HTML超链接图像移动等

2 个答案: