在Tumblr的固定鏈接頁面上張貼幻燈片

在我的tumblr博客上，我使用的是自定義砌體主題，其中的帖子應該在固定鏈接頁面的帖子下面。首先它滑過帖子，不讓觀衆在固定鏈接頁面查看帖子。然後我降低了帖子css的z-index，現在在帖子下張貼了註釋幻燈片。例如：Click here在Tumblr的固定鏈接頁面上張貼幻燈片

#content { 
 
    {block:IndexPage} 
 
    width:66%; 
 
    {/block:IndexPage} 
 
    {block:PermalinkPage} 
 
    width: 55%; 
 
    {/block:PermalinkPage} 
 
    top:170px; 
 
    {block:IndexPage} 
 
    left: 1%; 
 
    {/block:IndexPage} 
 
    {block:PermalinkPage} 
 
    left: 10%; 
 
    {/block:PermalinkPage} 
 
    float: left; 
 
    position: absolute; 
 
    border-right:1px solid #2b2b2b; 
 
} 
 
.entry { 
 
    float:center; 
 
    {block:indexpage} 
 
    width: 43%; 
 
    overflow:hidden; 
 
    {/block:indexpage} 
 
    margin: 2%; 
 
    {block:permalinkpage} 
 
    width: 500px; 
 
    {/block:permalinkpage} 
 
    padding: 10px; 
 
    background: {color:box}; 
 
    display: inline-block; 
 
    position: relative; 
 
    z-index:2; 
 
    -webkit-border-radius:3px; 
 
     -moz-border-radius:3px; 
 
     border-radius:3px; 
 
} 
 
.entry img { 
 
    display: block; 
 
    width:auto; 
 
    max-width: 100%; 
 
} 
 
.perma2, .perma2 a { 
 
    margin-top: 5px; 
 
    font-family: 'Coda', sans-serif; 
 
    font-size:15px; 
 
    color: #40c143; 
 
} 
 
.prmlnk { 
 
    background:{color:box}; 
 
    font-size:15px; 
 
    margin-left:10px; 
 
    margin-top:5px; 
 
    width: 500px; 
 
    padding: 10px; 
 
    z-index:2; 
 
    display: block; 
 
    overflow:hidden; 
 
    position: relative; 
 
     -webkit-border-radius:3px; 
 
     -moz-border-radius:3px; 
 
     border-radius:3px; 
 
} 
 

 
.wrap {position: fixed; bottom:10px; left:0px;} 
 
    
 
.wrap:hover .cred a {width: 130px; height: 20px; text-align: right;} 
 
    
 
.cred a { 
 
    height: 100%; width: 80px; height: 20px; margin-left:-65px; 
 
    background-color: #000; font-size: 13px; text-align: right; 
 
    overflow: hidden; 
 
    z-index: 9999999; padding-top: 3px; 
 
    top: -2px; 
 
    color: #fff; padding-right: 5px; 
 
    -moz-border-radius: 2px; 
 
    border-radius: 2px; 
 
    display: inline-block; 
 
    text-transform: capitalize; 
 
    -webkit-transition: all 0.5s ease-out; 
 
    -moz-transition: all 0.5s ease-out; 
 
    opacity: .7; 
 
    filter: alpha(opacity = 70); 
 
    font-family: 'Lato', sans-serif; 
 
    line-spacing: 1px; 
 
    } 
 

 
ol.notes { 
 
    padding: 0px; 
 
    margin: 25px 0px; 
 
    
 
    list-style-type: none; 
 
    border-bottom: solid 1px #5a5a5a; 
 
} 
 

 
ol.notes li.note { 
 
    border-top: solid 1px #5a5a5a; 
 
    padding: 10px; 
 
} 
 

 
ol.notes li.note img.avatar { 
 
    vertical-align: -4px; 
 
    margin-right: 10px; 
 
    width: 16px; 
 
    height: 16px; 
 
} 
 

 
ol.notes li.note span.action { 
 
    font-weight: normal; 
 
    color:#f2f2f2; 
 
} 
 

 
ol.notes li.note .answer_content { 
 
    font-weight: normal; 
 
} 
 

 
ol.notes li.note blockquote { 
 
    border-color: #eee; 
 
    padding: 4px 10px; 
 
    margin: 10px 0px 0px 25px; 
 
} 
 

 
ol.notes li.note blockquote a { 
 
    text-decoration: none; 
 
}

<div id="content"> 
 
<div class="autopagerize_page_element"> 
 
{block:Posts} 
 
<div class="entry"> 
 
    .....POSTS..... 
 
</div> 
 
    
 
    {block:permalinkpage}{block:NoteCount} 
 
<div class="prmlnk"><div class="perma2"> 
 
Posted: <a href="{Permalink}">{TimeAgo}</a> 
 
{/block:NoteCount} 
 
{block:PostNotes} 
 
    {PostNotes} 
 
{/block:PostNotes} 
 
</div> 
 
</div> 
 
{/block:permalinkpage} 
 
{/block:Posts} 
 
</div> <!------------autopagerise page element ends here----------------> 
 
    </div><!----------------------Content div ends here-------------------->

來源

2016-05-23 Sachin Sintu

在鏈接頁面，如果我添加top: 100%;到.prmlnk CSS，音符則顯示下面的職位，而不是在同樣的位置被帖子。

來源

2016-05-23 20:47:13

謝謝，它的工作。非常感謝 –

在Tumblr的固定鏈接頁面上張貼幻燈片

回答

相關問題