2

我的页面有一个顶部、中间和底部的布局（它们都是 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 中的文本也没有正确显示，它没有变成正确的大小或使用 Mission Script 作为其字体。

编辑：这是我的浏览器在呈现它时所做的屏幕截图。

Chrome Linux (Ubuntu 10.04)

Safari Mac OSX（不知道我讨厌什么版本的 iMac）

4

2 回答 2

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">

谢谢大家，很抱歉在如此明显的错误上浪费了您的专业知识。该死的地狱。

于 2012-11-06T00:21:44.737 回答
0

在 chrome for windows 上也适用于我。但是，无论哪种方式，它都无法对您的 html 中指定的 doctype 进行 w3c 验证，id 从这里开始http://validator.w3.org/并确保您的标记与您要使用的 doctype 匹配。

首先，您需要更改以下内容：

<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>
于 2012-11-05T22:42:50.953 回答