Question

我正在构建网站布局，无论出于何种原因，标题都不会出现在文档的html版本中（文本根本不显示）。我正在试图弄清楚如何分割页面，以便可以快速且相对容易地插入文本（有点像构建模板）。我还试图添加一个菜单栏和一个小页脚。布局应该如下：渐变，与内容重叠。内容布局包含一个标题，其下方有一个菜单栏，其余内容分为两个部分（“左”和“主”），底部是一个非常小的页脚（刚好足以保留版权））。代码如下：

HTML：

<!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <title>Welcome to AskMeMore.Org!</title>
</head>
<body>
    <div id="background">
        <img src="gradient.jpg" height="50%" width="100%" />
    </div>
    <div id="overlay">
        <div id="content">
            <div id="body">
                <div id="header">Header</div>
                <div id="left">Hi</div>
                <div id="main">Welcome</div>
            </div>
        </div>
    </div>
</body>
</html>

CSS：

#background {
    background-repeat:repeat-x;
    position:relative;
    z-index:1;
}
#overlay {
    position:relative;
    top:-975px;
    left:15%;
    z-index:10;
    background-color:#FFFFFF;
    width:70%;
}
#content {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    background-color:#FFFFFF;
}
#header {
    background-color:#FFFFFF;
    position:absolute;
    top:0;
    left:0;
}
#body {
    background-color:#FFFFFF;
}
#left {
    position:absolute;
    top:0;
    left:0;
    background-color:#FFFFFF;
    width:25%;
    padding-top: 20px;
    padding-left: 20px;
}
#main {
    position:absolute;
    top:0;
    right:0;
    background-color:#FFFFFF;
    width:71%;
    padding-top: 20px;
    padding-left: 20px;
}

Answer 1

我不确定你要在这里完成什么，但是Header没有显示的原因是因为你把它放在与其他元素完全相同的位置;他们正在掩盖它。

我强烈建议您阅读一些CSS教程，有一些非常容易理解的教程，解释如何完成我认为您想要实现的目标。

快速谷歌提供：http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Answer 2

设置top:-975px会将您的overlay-div（及其整个内容）移动到浏览器窗口顶部975像素。

Answer 3

您在div＃background之后立即使用图像。我想你想要整个页面的背景，所以删除它：

<div id="background">
    <img src="gradient.jpg" height="50%" width="100%" />
</div>

    #background {
    ..remove all styles
    background-repeat:repeat-x; // not required because you never used a background

仅使用overlay div并将其用作#overlay的样式：

background: #00ff00 url('gradient.jpg') no-repeat center;

Answer 4

问题是你的左边和主要div都设置为top: 0，这意味着它们与标题重叠，标题也设置为top: 0。由于left和main具有不透明（白色）背景，因此会阻止后面的内容。

下面是一个小提琴，我刚刚玩了一些背景颜色。我已经将标题设置为红色（以便更容易看到它的确切位置）以及left和main透明。标题是可见的。

http://jsfiddle.net/chrisvenus/RVxqM/

如果你注释掉将left设置为透明的行，那么上面的行会将其设置为绿色，你可以立即看到它如何阻挡红色标题单元格。

有两种解决方案。首先，可能最好的做法是使渐变成为适当的CSS背景图像，而不是将内容移到其上的img。

第二个选项可能是创建一个包含div以进行绝对定位，然后更传统地定位其子节点（即标题为正常，左侧和主要浮动或任何适当的。

确切的解决方案取决于您自己的情况，但这会告诉您为什么会出错，并希望能够找到最适合您的解决方案。

标题不会出现在网页上

4 个答案: