问题描述:

I'm working on a Tumblr theme and I'm trying to figure out why the posts are under-lapping the sidebar. Also, what happened to my post background? It's completely transparent.

Here's the code (it's quite long):

<!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}♡</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>

网友答案:

It's because you have position:fixed on your sidebar. If you're going to have a fixed width of your sidebar you can add margin-left: 150px; to your posts div.

Next time you post please use http://jsfiddle.net/ :)

Edit: about your transparent background for your Post div. You haven't added a semicolon after the style rule background-color: #ffffff

相关阅读:
Top