1

我正在研究一个 Tumblr 主题，我试图弄清楚为什么这些帖子在侧边栏下。另外，我的帖子背景怎么了？它是完全透明的。

这是代码（很长）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>

<link rel="shortcut icon" href="{image:favicon}">
<!--
this awesome theme is brought to you by boysjpeg

ps: you can use this as a base code just credit me pls n thnk
-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{Title}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

    <!-- colors  -->      
    <meta name="color:background" content="#ffffff"/>
    <meta name="color:description text" content="#000000"/>
    <meta name="color:links" content="#000000"/>
    <meta name="color:text" content="#000000"/>
    <meta name="color:link hover" content="#000000"/>
    <meta name="color:border" content="#000000"/>

    <!-- images -->
    <meta name="image:Background" content="http://media.tumblr.com/816570c2eef396d30cd1cb35ab6cf7b6/tumblr_inline_mw4mkvBJ231s9ui6i.jpg" />

    <meta name="image:favicon" content="http://media.tumblr.com/a64d6c4128012e7141034d583c4a3810/tumblr_inline_mvcf5ceA9V1s9ui6i.png">

    <meta name="image:sidebar" content="http://31.media.tumblr.com/1d196d005a4ec399629cbd82b88f28c2/tumblr_msmmmt12351ql5dzio1_500.jpg" />

    <!-- links -->
    <meta name="text:link 1 url" content="" />
    <meta name="text:link 1 title" content="" />

    <meta name="text:link 2 url" content="" />
    <meta name="text:link 2 title" content="" />

    <meta name="text:link 3 url" content="" />
    <meta name="text:link 3 title" content="" />

    <meta name="text:link 4 url" content="" />
    <meta name="text:link 4 title" content="" />

    <!-- ifs -->
    <meta name="if:bg" content="1">
    <meta name="if:captions" content="1">
    <meta name="if:link 1" content="1">
    <meta name="if:link 2" content="1">
    <meta name="if:link 3" content="1">
    <meta name="if:link 4" content="1">

<style type="text/css">

@font-face {

font-family: "pixel";

src: url('http://static.tumblr.com/ofgksh6/md0mkd9yd/bitxmap_font_tfb.ttf');
}

a:link, a:visited {
color: {color:links};
text-decoration: none;
}

a:hover {
color: {color:link hover};
text-decoration: none;
}

body {
margin-top:50px;
margin-left:100px;
padding: 10px;
{block:ifbg}
background-image:url('{image:Background}');
background-repeat:none;
background-size:cover;
background-attachment:fixed;
{/block:ifbg}
background-color: {color:Background};
font-family: "pixel";
font-size: 10px;
color: {color:Text};
}

#sidebar {
margin-top:125px;
margin-left:-50px;
background-color: rgba(255,255,255,0.3);
position: fixed;
float: left;
width: 160px;
font-family: "pixel";
font-size: 10px;
}

#sidebar img{
max-width:145px;
}

#posts {
margin-top:100px;
margin-left: 240px
border-style:solid {color:border};
border-width:1px;
border-radius:none;
padding: 7px;
background-color: #ffffff
float: right;
width: 400px;
}

#posts img {
opacity: 0.3;
}

#posts img:hover {
opacity:1.0;
filter:alpha(opacity=100);
}

#posts blockquote {
border-left: 2px solid {color:Text};
padding: 0 0 0 15px;
margin-left: 0px;
}

h1 {
font: italic 16px "pixel";
text-align: center;
}

h1 a{
color: {color:links};
text-decoration: none;
}

#quote {
font: italic 13px "pixel";
text-align: center;
}

#asks {
border-style:solid {color:border};
border-radius:none;
border-width:1.6px;
}

.pagination {
position: absolute;
top: -47px;
}

</style>

<body>

<div id="sidebar">
<p><center><a href="/"><img src="{image:sidebar}" width="145"></a></center></p>
<p><center> <a href="/">home</a> /
<a href="/ask">ask</a> {block:iflink1}/
<a href="{text:link 1 url}">{text:link 1 title}</a> /{/block:iflink1}
{block:iflink2}<a href="{text:link 2 url}">{text:link 2 title}</a> /{/block:iflink2}
{block:iflink3}<a href="{text:link 3 url}">{text:link 3 title}</a> /{/block:iflink3}
{block:iflink4}<a href="{text:link 4 url}">{text:link 4 title}</a>{block:iflink4 </center></p>

<p><center>{block:Pagination}
      {block:PreviousPage}
            <a href="{PreviousPage}">back</a>
      {/block:PreviousPage}
      /
      {block:NextPage}
            <a href="{NextPage}">next</a>
      {/block:NextPage}
{/block:Pagination}</center>
</div>

{block:Posts}
<div id="posts">
{block:Text}
{block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
{body}
{/block:Text}

{block:Photo}
<a href="{PhotoURL-HighRes}"><img src="{PhotoURL-400}" /></a>
{block:ifcaptions}{block:Caption}<span class="caption">{Caption}</span>{/block:Caption}{/block:ifcaptions}
{/block:Photo}

{block:Photoset}
{Photoset-400}
{block:ifcaptions}{block:Caption}<span class="caption">{Caption}</span>{/block:Caption}{/block:ifcaptions}
{/block:Photoset}

{block:Quote}
<div id="quote">"{Quote}"</div>
<br/>{block:Source}<center>- {Source}</center>{/block:Source}
{/block:Quote}

{block:Link}
<h1><a href="{URL}" target="{Target}">{Name}</a></h1>
{block:Description}{Description}{/block:description}
{/block:Link}

{block:Chat}
{block:Title}<h1>{Title}</h1>{/block:Title}
{block:Lines} {block:Label}<b>{Label}</b>{/block:Label} {Line}<br />{/block:Lines}
{/block:Chat}

{block:Audio}
<center><p>{block:AlbumArt}
<img src="{AlbumArtURL}" width="100" height="100">
{/block:AlbumArt}</p>

<p><strong>Track</strong>:
{block:TrackName}
{TrackName}
{/block:TrackName}

<p><strong>Artist</strong>:
{block:Artist}
{Artist}
{/block:Artist}

<p><strong>Album</strong>:
{block:Album}
{Album}
{/block:Album}

<p>{AudioplayerBlack}</p></center>
   {block:ifcaptions}{block:Caption}<span class="caption">{Caption}</span>{/block:Caption}{/block:ifcaptions}
{/block:Audio}

{block:Video}
{Video-400}
{block:ifcaptions}{block:Caption}<span class="caption">{Caption}</span>{/block:Caption}{/block:ifcaptions}
{/block:Video}

{block:Answer}
<div id="asks">
<p><a href="{AskerURL}">{Asker}</a> said: <i><bold>{Question}</bold></i></p>
</div>
<p>{Answer}</p></center>
{/block:Answer}

<p>
{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}

/

<a href="{Permalink}">{NoteCount}♡&lt;/a></center>{block:ifpermalinkicons}<img src="" width="15" />

/

<a href="{ReblogURL}" target="_blank" class="details">reblog</a>


{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}

{block:PermalinkPage}
<p>
{block:PostNotes}{PostNotes}{/block:PostNotes}
{block:PermalinkPage}

</div>
{/block:Posts}

</body>
</html>
4

1 回答 1

3

这是因为你有 position:fixed 在你的侧边栏。如果您要拥有固定宽度的侧边栏，您可以添加margin-left: 150px;到您的postsdiv 中。

下次发帖时请使用http://jsfiddle.net/ :)

编辑：关于您的 Post div 的透明背景。您没有在样式规则后添加分号background-color: #ffffff

于 2013-11-12T07:23:34.430 回答