在开始创建自己的WordPress博客后,我被困在固定标题的位置上。
我只接触过少量的CSS/JavaScript,所以我在学习的过程中一直在即兴发挥!我想要达到的大部分已经完成了,但我只是想试着在我添加帖子等之前修复这个标题。
在互联网上搜索后,我只能真正找到以下内容,并将其添加到我的style.css文件中;
# masthead {position:fixed; top:0px; margin:auto; z-index:100000; width:100%;}
这现在修复了标题图像和导航,但稍微偏离了中心,但我的页面的其余部分现在仍然落后于此。一个问题是,图像和导航的实际背景是不透明的。请看下面的截图
Before code - http://tinypic.com/r/2vxm69t/6
After code - http://tinypic.com/r/34jd2t1/6
我认为我可能需要在我的header.php中创建一个单独的‘div’,或者以某种方式修改它,但我不能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;}
。
2条答案
按热度按时间hwamh0ep1#
您将不得不调整您的代码以适合,但这里有一个例子,您可以执行我认为您正在努力实现的目标。
在您的代码中,您需要定义图像+NAV的背景颜色和高度。在此之后,您可能希望为id=“main”创建一个边距,使其位于剩余信息的下方,即图像+导航链接的边距顶部。
**更新:**将页边距-top添加到24px
参考文献:http://jsfiddle.net/6VcZe/1/
uttx8gqw2#
要正确对齐页眉,您需要定义页眉div的宽度:
这将允许自动边距技术正常工作,即使没有位置属性也是如此。