初学者博客：将标题锚定到网站的最顶部答案

【问题标题】：Beginner Blogger: Anchoring header to very top of website初学者博客：将标题锚定到网站的最顶部
【发布时间】：2014-04-27 16:27:34
【问题描述】：

我是 Blogger 和 HTML 新手，我正在尝试在 Blogger 上建立一个时尚博客网站。

我已经成功地将标题图片设为静态（也就是说，在滚动浏览帖子时不会移动），但不幸的是它没有在网站的最顶部对齐。这使得它看起来很奇怪，因为内容在标题图像下方滚动时会消失，而在标题图像和页面顶部之间滚动时会短暂重新出现。

我研究了一些基本的 HTML，但是当我尝试直接在我的 Blogger 网站上编辑 HTML 时，从基本 HTML 到我看到的 HTML 有一个巨大的跳跃。我只希望标题图像在最顶部对齐。

有人可以帮忙吗？任何事情都值得赞赏。

【问题讨论】：

尝试将这个：margin-left:-80px; 添加到您在标题中放置的图像中。
这里看起来卡在顶部。
@j08691 是的，回答已解决！
@j08691 只需要等待接受答案:)
您应该始终在此处发布您的代码，正是出于这个原因。当我访问您的网站时，您已经解决了这个问题。所以我（以及这个问题的未来访问者）无法看到原始状态。

标签： html blogger

【解决方案1】：

将 css top:0 添加到 ID 为“header-outer”的 DIV

加号

为什么你有这么多不必要的标记？您可以替换所有这些：

<div class="header-outer">
<div class="header-cap-top cap-top">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
<div class="fauxborder-left header-fauxborder-left">
<div class="fauxborder-right header-fauxborder-right"></div>
<div class="region-inner header-inner">
<div id="header" class="header section"><div id="Header1" class="widget Header">
    <div id="header-inner">
        <a style="display: block" href="http://monsemble.blogspot.ca/">
            <img width="833px; " height="216px; " style="display: block" src="http://2.bp.blogspot.com/-91QDCMg_EsU/UcsYVdMvLQI/AAAAAAAAACw/Oa727KfuuBk/s1600/header.jpg" id="Header1_headerimg" alt="MONSEMBLE">
        </a>
    </div>
</div>
</div>
</div>
</div>
<div class="header-cap-bottom cap-bottom">
    <div class="cap-left"></div>
    <div class="cap-right"></div>
</div>
</div>

与：

<div class="header-outer">
    <a style="display: block" href="http://monsemble.blogspot.ca/">
        <img width="833px; " height="216px; " style="display: block" src="http://2.bp.blogspot.com/-91QDCMg_EsU/UcsYVdMvLQI/AAAAAAAAACw/Oa727KfuuBk/s1600/header.jpg" id="Header1_headerimg" alt="MONSEMBLE">
    </a>
</div>

【讨论】：

【解决方案2】：

我在我的 Blogger 博客上遇到了类似的情况，我注意到尽管我关闭了 Blogger 网站附带的导航栏，但在 HTML 代码中，导航栏的页面顶部仍然有一个分区。我从模板中删除了它，并且能够将标题图像移动到网页的顶部。

我删除了这部分代码-

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
    <b:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
    if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
        function(){ object[attribute] = val; }, false);
    } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
    }
    }
&lt;/script&gt;
&lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
        gapi.load(&quot;gapi.iframes:gapi.iframes.style.bubble&quot;, function() {
        if (gapi.iframes &amp;&amp; gapi.iframes.getContext) {
            gapi.iframes.getContext().openChild({
                url: &#39;https://www.blogger.com/navbar.g?targetBlogID\0752197236978911214706\46blogName\75MahekMody.com\46publishMode\75PUBLISH_MODE_HOSTED\46navbarType\75DISABLED\46layoutType\75LAYOUTS\46searchRoot\75http://www.mahekmody.com/search\46blogLocale\75en\46v\0752\46homepageUrl\75http://www.mahekmody.com/\46vt\0753008633957882384298&#39;,
                where: document.getElementById(&quot;navbar-iframe-container&quot;),
                id: &quot;navbar-iframe&quot;
            });
        }
        });
    &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
&lt;/script&gt;
</b:includable>
    </b:widget>
</b:section>

【讨论】：