0

我是一名学习如何编程的学生。我无法弄清楚为什么我的表格 CSS 没有任何效果。我正在尝试缩小我的单元格，以便所有这些单元格都适合屏幕，而无需侧向滚动。这是我的html代码。如果这很重要，我也会使用 Aptana Studio 3 作为编辑器。

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="utf-8">  
    <link rel="stylesheet" href="MainCSS.css">
    <link rel="stylesheet" href="IndexTableCSS.css">
        <title>Noah's Ark Pet Sanctuary</title>
</head>
<body>
<header id="header">
    <img src="SanctuaryHeader.jpg">
</header>
<nav>
    <ul>
        <li><a href="santuary.html">ANIMAL SANCTUARY</a>
        <ul>
            <li><a href="hospital.html">ANIMAL HOSPITAL</a></li>
        </ul>
        </li>
        <li> <a href="adoptDOG.html">ADOPTION CENTER</a>
        <ul>
            <li><a href="petHelth.html">PET HEALTH CARE</a></li>
            <li><a href="petTraining.html">TRAINING TIPS</a></li>
        </ul>
        </li>
        <li><a href="donations.html">DONATIONS</a>
        <ul>
            <li><a href="volteering.html">VOLUNTEERING</a></li>
        </ul>
        </li>
        <li><a href="store.html">OUR STORE</a></li>
        <li><a href="newsEvents.html">NEWS &amp; EVENTS</a></li>
    </ul>
</nav>
<br>
<br>
<table id="SanctuaryTable">
        <tr>
        <td><img src="mural.jpg"></td>
        <td><img src="santary.jpg"></td>
        </tr>
        <tr>
        <td>Noah's Ark Pet Sanctuary was founded and incorporated as an Illinois Non-Profit corporation in 1978
             by a small group of residents who care about animals.  One of our goals is to educate the public on 
             the proper care and population control of domestic dogs and cats<br>
            <br>
            <strong>What we do</strong>
            <br>
            Noah's Ark takes in adoptable cats and dogs from Rockford and the surrounding area.  
            Once at the sanctuary they receive proper medical care and are put up for adoption into qualified homes for a nominal fee
            <br>
            <br>
            <img src="dogSit.jpg">
        </td>
        <td>            
            Noah's Ark Animal Sanctuary 
            <br>
            111 North First Street
            <br>
            Rockford IL 61107
            <br>
            <br>
            <strong>Hours</strong>
            <br>
            Mon - Tue - Thurs - Fri  9:30 am - 5:00 pm
            <br>
            <br>
            Wed 9:30 am 3:30 pm
            <br>
            <br>
            Sat 9:30 am - 3:00 pm
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <img src="CatPlay.jpg"> 
        </td>
        </tr>
        <tr>
        <td><img src="ArkFooter.jpg"></td>
        </tr>
    </table>
</body> 
</html>

这是我的 IndexTableCSS ：

#SanctuaryTable
{
    border-collapse:collapse;
    word-wrap:break-word ;
    width: 500px;
}

.small
{
    width: 50%; 
}

我查看了我的 MainCSS 文件，没有看到任何应该干扰其他 CSS 的东西，但这里也是该代码：

body
{
font-family: Arial,  Verdana, sans-serif;
margin-left: 40px;
}

ul 
{
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li 
{
    display: block;
    position: relative;
    float: left;
}

li ul 
{
    display: none;
}

ul li a 
{
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover 
{
background: #3b3b3b;
}

li:hover ul 
{
    display: block;
    position: absolute;
}

li:hover li 
{
    float: none;
    font-size: 11px;
}

li:hover a 
{ 
    background: #3b3b3b;
}

li:hover li a:hover
{
    background: #1e7c9a;
}
4

3 回答 3

1

这句话给我敲响了警钟：

我查看了我的 MainCSS 文件夹，没有看到任何应该干扰其他 CSS 的内容，但这里也是该代码：

你还没有在你的href中定义一个目录到css？？它应该是这样的：

<link rel="styleheet" type="text/css" href="directory/stylesheet-name.css />

请注意您的命名约定，并确保您与 captilisation、camel-case 或全部小写一致。

于 2013-07-22T19:24:42.720 回答
0

您应该制作一个 div 包装器来将所有段落放入以限制宽度。然后将包装器的宽度写入 CSS 中，一个好的宽度通常在 960 像素左右。

<div id="wrapper">
all of your code here
</div>

as for your CSS

#div wrapper {
width:960px;
}
于 2013-07-22T19:29:43.900 回答
0

不熟悉 Aptana Studio 3，但我知道在 Visual Studio 中可能会出现严重错误：
默认情况下，它使用 Windows-1252 编码保存文件，直到文件中出现无法在 Windows-1252 中表示的字符, 然后它将它们保存为 Unicode，这意味着 UTF-16。
现在这本身不会是一场灾难，但是许多浏览器希望它们的样式表和脚本文件具有与它们的 HTML 文件相同的编码，所以如果你将一个文件保存为 Windows-1252 而另一个保存为 UTF-16，它们变得不相容。

如果 Aptana 有类似的问题，我知道的唯一解决方案是加载所有文件，然后使用相同的编码保存所有文件，最好是 UTF-8，然后问题就不会再发生了。

另一点是您可能没有意识到表格的正常行为是将其所有宽度视为最小值。以这个 fiddle为例，它将 table 和 td 都设置为 300px，但内容要宽得多，因此 table 会扩展到内容的全宽。这与大多数其他 HTML 元素（如<p>小提琴中的）形成对比，它们确实尊重宽度，但让内容溢出它们的边界。

然后是虐待的事情。好吧，只是你不应该将 HTML 元素用于它们不是为它们设计的东西。
例如，<strong>旨在引起人们对某事的注意，或者在一篇散文中，强烈强调（相当于提高你的声音），那些事情。不仅仅是让一段文字加粗。为此，请使用 CSS。或者，如果您仔细阅读 HTML5 规范，您甚至可以使用<b>. 因为<b>没有内在含义，所以它可以简单地用于使某些东西变得大胆（但我不推荐它）。
我提到的其他事情也是如此。我在我自己的网站上整理了一份 HTML 滥用指南，如果你能原谅这个插件的话。

于 2013-07-24T08:42:35.940 回答