0

开始创建我自己的 Wordpress 博客后,我一直坚持将我的 Header 固定到位。

我只对 CSS/JavaScript 有过一点了解,所以我在学习的过程中不断改进!我想要实现的大部分目标已经完成,但我只想在添加帖子等之前尝试修复此标题。

在互联网上搜索后,我只能真正找到以下内容并将其添加到我的 style.css 文件中;

#masthead {position:fixed; top:0px; margin:auto; z-index:100000; width:100%;}

这现在修复了标题图像和导航,但稍微偏离中心,但我的页面的其余部分现在仍然落后于此。一个问题是 Image 和 Nav 的实际背景是不透明的。请看下面的截图

Before code - http://tinypic.com/r/2vxm69t/6
After code - http://tinypic.com/r/34jd2t1/6

我相信我可能需要在我的 header.php 中创建一个单独的“div”,或者以某种方式对其进行修改,但tbh,我不能 100% 确定实际上什么会使这项工作成为可能,因为我以前从未这样做过。理想情况下,我在导航链接下方添加的行显示在添加此代码之前的屏幕截图中,这将指示标题的底部,并且当您滚动时,其余部分将在此下方消失。整个背景将保持白色,并位于页面其余部分的中心,仍然包括顶部的间隙,该间隙与背景相得益彰。

!!我必须为截图道歉,它不是很清楚,但我希望这能说明正在发生的事情并且足够清楚,我会尽快主持这个!

我的 'style.css' 和 'header.php' 的链接如下 - 如果您需要其他任何内容,请告诉我;

style.css - http://codepad.org/c4BnqxlF
header.php - http://codepad.org/w4z19VLW

我希望有人可以提供帮助,因为我认为这在我的博客上看起来很棒,然后我可以发布!


编辑

修改后的代码,现在显示正确的对齐和背景,但仍然在标题图像上方显示一个白色部分 - 最好在以下屏幕截图中显示http://tinypic.com/view.php?pic=126bd7c&s=6

#masthead {background: #FFF;position:fixed; top:0px; height: 350px; z-index:100000; width:960px;} 
#main {margin-top:335px;}

.

4

2 回答 2

0

您将不得不调整您的代码以使其适合,但这里有一个示例,说明如何执行我认为您正在尝试实现的目标。

在您的代码中,您需要定义图像 + 导航的背景颜色和高度。之后,您需要为 id="main" 创建一个边距,使其低于其余信息,即图像 + 导航链接的边距顶部。

更新:将 Margin-top 添加到 24px

#masthead {background: #FFF;position: fixed; top: 0px; height: 350px; z-index: 100000; width: 100%;margin-top: 24px;} 
#main {margin-top:350px;}

参考:http: //jsfiddle.net/6VcZe/1/

于 2013-04-04T23:49:16.730 回答
0

要正确居中对齐标题,您需要为标题 div 定义宽度:'#masthead { width: 900px }`

这将允许自动保证金技术正常工作,即使没有 position 属性。

于 2013-04-05T00:14:41.300 回答