Question

我的页面有一个顶部，中间和底部的布局（它们都是div。）到目前为止，我只能让顶部和底部区域正确显示。虽然中间的内容与底部完全相同但它不会出现，因此我假设一个简单而明显的语法时代最有可能发生，事情是我花了一小时阅读和故障排除无济于事，所以请帮助！

这是我的HTML ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    <title>Saspadidious</title>
    <link rel="stylesheet" type="text/css" href="CSS\home.css">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
    <a href="home.html">
        <div id="top">
            <h1 class="header9">Sarspadidious</h1>
        </div>
    </a>
    <div id="middle">
        <div class="subOrange">
            <h1 class="header6">Who?</h1>
        </div>
        <div class="subOrange">
            <h1 class="header6">What?</h1>
        </div>
        <div class="subOrange">
            <h1 class="header6">Why?</h1>
        </div>
    </div>
    <div id="bottom">
        <div class="subRed">
            <a href="software.html">
                <h1 class="header4">Software</h1>
            </a>
        </div>
        <div class="subRed">
            <a href="support.html">
                <h1 class="header4">Support</h1>
            </a>
        </div>
        <div class="subRed">
            <a href="about.html">
                <h1 class="header4">About</h1>
            </a>
        </div>
        <div class="subRed">
            <a href="news.html">
                <h1 class="header4">News</h1>
            </a>
        </div>
    </div>
</body>
</html>

我的CSS

body {
margin:0;
padding:0;
background-image:url('../Images/arches.PNG');
font-size:100%;
}

a {
text-decoration:none;
color:rgb(44,44,44);
}

@font-face {
font-family:"Mission Script";
src:url('../Other/Mission-Script.OTF');
}

#top {
position:relative;
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:5%;
padding-top:4%;
padding-bottom:3%;
background-color:rgb(197,129,84);
border-color:rgb(44,44,44);
border-style:solid;
border-width:5px;
border-radius:15px;
-moz-border-radius:15px;
}

#middle {
position:relative;
width:95%;
margin-top:5%;
margin-left:2.5%;
margin-right:2.5%;
}

#bottom {
position:relative;
width:95%;
margin-top:5%;
margin-bottom:5%;
margin-left:2.5%;
margin-right:2.5%;
}

.subOrange {
position:relative;
width:26.6%;
margin-left:2.5%;
margin-right:2.5%;
padding-top:3%;
padding-bottom:3%;
background-color:rgb(255,159,72);
border-color:rgb(44,44,44);
border-style:solid;
border-width:5px;
border-radius:15px;
-moz-border-radius:15px;
float:left;
}

.subRed {
position:relative;
width:18.75%;
margin-left:2.5%;
margin-right:2.5%;
padding-top:3%;
padding-bottom:3%;
background-color:rgb(255,69,70);
border-color:rgb(44,44,44);
border-style:solid;
border-width:5px;
border-radius:15px;
-moz-border-radius:15px;
float:left;
}

.header4 {
font-family:"Mission Script";
font-size:4em;
text-align:center;
margin:0;
color:rgb(44,44,44);
}

.header6 {
font-family:"Mission Script";
font-size:6em;
text-align:center;
margin:0;
color:rgb(44,44,44);
}

.header9 {
font-family:"Mission Script";
font-size:9em;
text-align:center;
margin:0;
padding:0;
color:rgb(44,44,44);
}

所以就是这样，中间div中的文本也没有正确显示，它没有成为正确的大小或使用任务脚本作为其字体。

编辑：以下是我的浏览器渲染时的屏幕截图。

Chrome Linux (Ububtu 10.04)

Safari Mac OSX (Dunno what version I hate my iMac)

Answer 1

我已经弄明白了！是的，问题很简单。有问题的页面是关于页面的，（about.html。）

在创建过程中，我从主页（home.html）复制并粘贴了大部分代码。我忘了做的是将它链接到我为它创建的新CSS表单（about.css），你可以在我上面的原始代码中看到它仍然链接到home.css。

我知道这很明显！救济是无所不能的！

以下是代码中的问题......

<link rel="stylesheet" type="text/css" href="CSS\home.css">

更改为

<link rel="stylesheet" type="text/css" href="CSS\about.css">

谢谢大家，抱歉在这样一个明显错误上浪费你的专业知识。血淋淋的地狱。

Answer 2

对于我来说，在Chrome的Windows上工作正常。但是，它无法以html中指定的doctype进行w3c验证，id从此处开始http://validator.w3.org/并确保您的标记与您要使用的文档类型相匹配。

首先，您需要更改此内容：

<a href="home.html">

    <div id="top">
        <h1 class="header9">Sarspadidious</h1>
    </div>

</a>

到此：

<div id="top">
    <h1 class="header9"><a href="home.html">Sarspadidious</a></h1>
</div>

容器Div不会出现

2 个答案: