3

我正在构建一个站点布局，无论出于何种原因，标题都不会出现在文档的 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;
}
4

4 回答 4

1

我不确定您要在这里实现什么，但是 Header 未显示的原因是您已将其定位在与其他元素完全相同的位置；他们正在掩盖它。

我强烈建议您阅读一些 CSS 教程，其中有一些非常容易理解的教程，它们解释了如何完全按照我认为您正在努力实现的目标进行操作。

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

于 2012-08-30T16:28:14.463 回答
1

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

于 2012-08-30T16:36:01.857 回答
0

问题是您的左侧和主 div 都设置为，这top: 0意味着它们与也设置为top: 0. 因为left并且main具有不透明（白色）的背景，它们会阻挡后面的内容。

以下是我刚刚玩过背景颜色的小提琴。我已将标题设为红色（以便于准确查看它的位置）left和main透明。这里的标题是可见的。

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

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

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

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

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

于 2012-08-30T16:26:05.843 回答
0

您在 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

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

background: #00ff00 url('gradient.jpg') no-repeat center;
于 2012-08-30T16:10:35.300 回答