初學者博客：將標題錨定到網站頂部

我是Blogger新手，並且嘗試在Blogger上設置時尚博客網站。初學者博客：將標題錨定到網站頂部

我已經成功地將頭部圖像製作爲靜態（即在滾動文章時不移動），但不幸的是它並沒有在網站的頂部對齊。這使得它看起來很奇怪，因爲它在標題圖像下滾動時內容消失，並且在標題圖像和頁面頂部之間滾動時短暫地重新出現。

我已經研究過一些基本的HTML，但是當我嘗試在我的Blogger網站上直接編輯HTML時，從基本HTML跳轉到HTML所看到的巨大跳躍。我只想把標題圖像對齊在最上面。

任何人都可以幫忙嗎？任何感謝。

來源

2013-06-26 Mon

嘗試增加這樣的：'保證金左：-80px;'到設置在頭圖像。 –

看起來卡在這裏的頂部。 – j08691

@ j08691是的，回答固定它！ – Mon

的CSS top:0添加到DIV ID爲「頭 - 外」

加

你爲什麼有這麼多不必要的標記？你可以取代這一切：

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

來源

2013-06-26 17:20:40

我遇到了類似的事情在我的Blogger博客，我發現我的inspite關閉自帶的博客網站的導航欄，在那裏的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>

來源

2014-04-27 08:27:34 MechMody

初學者博客：將標題錨定到網站頂部

回答

相關問題