Tumblr主题:帖子页脚

时间:2015-07-10 22:56:50

标签: html css tumblr tumblr-themes

这是我第一次制作Tumblr主题,而且我遇到了帖子页脚的问题。我调整了页面上帖子/内容的宽度,这反过来意味着我还必须调整帖子页脚的宽度。然而,一旦我这样做了,页脚的位置在大多数帖子上都没有 - 但不是全部。也就是说,页脚似乎只能正确定位在答案和视频帖子上。在所有其他帖子上,它应该在右侧/上方。谁能解释如何解决这个问题?主题是实时here。以下是我正在使用的内容:

<html>
<head>

<meta name="color:Background" content="#000000" />
<meta name="color:Links" content="000000" />
<meta name="color:Sidebar background" content="#000000" />
<meta name="color:Sidebar text" content="#000000" />
<meta name="color:Text" content="#000000" />
<meta name="font:Body" content="Arial, Helvetica, sans-serif"/>
<meta name="if:Following in sidebar" content="1"/>
<meta name="if:Likes in sidebar" content="1"/>
<meta name="if:Search and description in sidebar" content="1"/>
<meta name="image:Background" content=""/>
<meta name="image:Sidebar" content=""/>

    <title>{block:TagPage}{Tag} - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}
    <link rel="stylesheet" href="http://static.tumblr.com/hznqxps/ivOmgjf8v/normalize.css" />
        <meta name="description" content="{MetaDescription}" />
    {/block:Description}

    <style>
body {
background: {color:Background} url('{image:Background}') repeat;
color: {color:Text};
font-family: {font:Body};
font-size: 0.7em;
}
a {
color: {color:Links};
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
padding: 0.5% 2%;
}
#sidebar nav li a {
margin-right: 0.5%;
padding: 0.2%;
}
#sidebar {
margin-top: 5%;
margin-bottom: 5%;
margin-left: 5%;
width: 500px;
}
.item {
position: fixed;
height: 80%;
background: #fff;
padding: 1% 5%;
}
.item .even {
background: #f2f2f2;
}
#content {
margin-left: 50%;
width: 543.5px;
}
#content article {
background: #fff;
margin-bottom: 5%;
}
article .inner {
display: inline-block;
padding: 4%;
width: 92%;
}
.title a {
color: {color:Text};
}
.photo img {
display: block;
}
.html_photoset {
text-align: center;
padding: 6% 0;
}
.link .title a {
border-bottom: 1px solid;
}
.chat ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.chat li {
padding: 0.5% 2%;
}
.chat .even {
background: #f2f2f2;
}
blockquote {
border-left: 1px solid #d1d1d1;
margin: 0;
padding: 2%;
}
.metadata {
background: rgba(233, 233, 233, 0.76);
border-top: 1px solid #ADADAD;
font-size: 0.9em;
padding: 2% 4%;
width: 500px;
}
.metadata ul {
width: 100%;
display: inline-block;
}
.metadata ul, #notes ol {
list-style: none;
margin: 0;
padding: 0;
}
.tags {
margin-top: 1% !important;
}
.tags li {
border: 1px solid #353535;
padding: 0.5%;
background: rgba(37, 37, 37, 0.84);
}
.index li, .tags li {
float: left;
margin-right: 2%;
}
.note {
border-bottom: 1px solid white;
padding: 1% 0;
}
#pagination li a {
background: #fff;
float: right;
margin: 0 0 2% 1%;
padding: 1%;
}
#content article, .item, #pagination a {
box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.33);
}
footer {
box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.11) inset;
}
.item form input {
border: none;
border-bottom: 1px solid #d1d1d1;
padding: 2% 1%;
width: 96%;
margin-bottom: 2%;
}
#likes {
list-style: none;
margin: 0;
padding: 0;
}
#followed ul {
display: inline-block;
list-style: none;
margin: 0 0 4% 0;
padding: 0;
width: 100%;
}
#followed img {
display: block;
float: left;
}
{CustomCSS}
    </style>
</head>
<body>
<aside id="sidebar">
<div class="item">
    <h1><a href="/">{Title}</a></h1>

    {block:IfSearchAndDescriptionInSidebar}
{block:Description}
<p>{Description}</p>
{block:Description}

<form action="/search" method="get">
    <input type="text" name="q" value="{SearchQuery}" placeholder"{lang:Search}"/>
</form>
{/block:IfSearchAndDescriptionInSidebar}
    {block:IfLikesInSidebar}
{block:Likes}
<h2>{lang:Likes}</h2>
{Likes limit="1" summarize="100" width="150"}
<a href="http://www.tumblr.com/liked/by/{Name}">
{lang:More liked posts}
</a>
{/block:Likes}
{/block:IfLikesInSidebar}
    {block:IfFollowingInSidebar}
{block:Following}
<h2>{lang:People I follow}</h2>
<div id="followed">
    <ul>
    {block:Followed}
    <li>
        <a href="{FollowedURL}"><img src="{FollowedPortraitURL-48}"/></a>
    </li>
    {/block:Followed}
    </ul>
</div>
{/block:Following}
{/block:IfFollowingInSidebar}

    <nav>
        <ul>
    {block:HasPages}
    {block:Pages}
        <li> <a href="{URL}">{Label}</a></li>
    {/block:Pages}
    {/block:HasPages}
    {block:SubmissionsEnabled}
        <li> <a href="/submit">{SubmitLabel}</a></li>
    {/block:SubmissionsEnabled}
    {block:AskEnabled}
        <li> <a href="/ask">{AskLabel}</a></li>
    {/block:AskEnabled}
        <li> <a href="/archive">Archive</a></li>
        </ul>
    </nav>
</div>
</aside>
    <div id="content">
    {block:Posts}
            <article>
                    {block:Text}
                <div class="text inner">
                    {block:Title}<h1 class="title"><a href="{Permalink}"                      >{Title}</a></h1>{/block:Title}
                    {Body}
            {/block:Text}{block:Photo}
                <div class="photo inner">
                    {LinkOpenTag}<img src="{PhotoURL-500}" alt                        ="{PhotoAlt}" />{LinkCloseTag}
                {block:Caption}{Caption}{/block:Caption}
            {/block:Photo}{block:Panorama}
                <div class="panorama inner">
                    {LinkOpenTag}
                        <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
                    {LinkCloseTag}{block:Caption}{Caption}
                    {/block:Caption}
            {/block:Panorama}{block:Photoset}
                <div class="photoset inner">
                    {Photoset}
                {block:Caption}{Caption}{/block:Caption}
            {/block:Photoset}{block:Quote}
                <div class="quote inner">
                    <blockquote>{Quote}</blockquote>
                {block:Source}<p><cite> {Source} </cite></p>{/block:Source}
            {/block:Quote}{block:Link}
                <div class="link inner">
                    <h1 class="title"><a href="{URL}">{Name}</a></h1>
                {block:Description}{Description}{/block:Description}
            {/block:Link}{block:Chat}
                <div class="chat inner">
                    <ul>
                {block:Lines}<li class="{Alt}"><p>{block:Label}<strong                             >{Label}</strong>{/block:Label} {Line} </p></li>{/block:Lines}
                </ul>
            {/block:Chat}{block:Video}
                <li class="post video">
                    {Video-500}{block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                </li>
            {/block:Video}{block:Audio}
                <div class="audio inner">
                    {block:TrackName}<h1 class="title"><a href="{Permalink}                     ">{TrackName}</a></h1>{/block:TrackName}
                    {block:AlbumArt}<img src="{AlbumArtURL}" width="500"       height="500"/>{/block:AlbumArt}
                    {AudioPlayerBlack}
                {block:Caption}{Caption}{/block:Caption}
            {/block:Audio}{block:Answer}
    <div class="answer inner">
    <p>{Question} <strong>- {Asker}</strong></p>
        {Answer}
    </div>{/block:Answer}

{block:Date}
    <footer class="metadata">
        <ul class="index">
            <li><a href="{Permalink}"> <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}">{DayOfMonth} {Month} {Year}</time> </a></li>

            {block:NoteCount}<li><a class="notecount" href="{Permalink}#notes">{NoteCountWithLabel}</a></li>{/block:NoteCount}

            {block:ContentSource}
            <li><a href="{SourceURL}">{lang:Source}:{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}
            {block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}</a></li>
            {/block:ContentSource} 
        </ul>

        {block:PermalinkPage}
        {block:HasTags}
        <ul class="tags">
            {block:Tags}<li><a href="{TagURL}">{Tag}</a> </li>{/block:Tags}
        </ul>
        {/block:HasTags}

        {block:PostNotes}
        <div id="notes">
            {PostNotes}
        </div>
        {/block:PostNotes} 
        {/block:PermalinkPage} 
    </footer>
    {/block:Date}
</article>
{/block:Posts}
{block:Pagination}
<nav id="pagination">
    <ul>
        {block:PreviousPage}<li><a href="{PreviousPage}">Previous page</a></li>{/block:PreviousPage}
        {block:NextPage}<li><a href="{NextPage}">Next page</a></li>{/block:NextPage}
    </ul>
</nav>
{/block:Pagination}

    <p id="footer">
        {block:PreviousPage}
            <a href="{PreviousPage}">&#171; Previous</a>
        {/block:PreviousPage}{block:NextPage}
            <a href="{NextPage}">Next &#187;</a>
        {/block:NextPage}

    </p>
</body>
</html>

任何帮助将不胜感激!我知道目前主题还有其他一些问题,但这真让我感到沮丧。非常感谢!

1 个答案:

答案 0 :(得分:0)

从来没有,我修好了!事实证明,我忘了关闭一些&lt; div&gt; s,导致页脚被视为帖子内容的一部分,并与内容的边缘对齐,而不是我想要的内容。但我修好了它:)