Hi there,
I’m trying to design my own tumblr theme, but I’m hacking my way through it. I would really appreciate it if someone would mind taking the time to just look over what I have and point out the problems or reasons why a few things are not working or are not turning out like I thought they should. (I should note the gaudy colors are just so I could tell what is what.)
The first problem I have is, I don’t understand why the tags will not display inline? Am I not referencing them correctly?
The second problem simply is, why is there such a gap between the .post(blue) and the green? I’d like the .post to line up with the top of the postMeta on the left and the only way I can get the .post to align is to give it a negative margin and I didn’t know if that was bad practice or if there was just something else I have in the code that is causing the gap.
It’d be wonderful if someone would just take a look at what I have and give a little feedback.
Many thanks. 
What the theme looks like so far…
What I would like it to look like…
And the code I have so far…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" tyoe="application/rss+xml" href="{RSS}" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0;}
body{font-size: 13; font-family: helvetica neue, helvetica, arial, sans-serif;}
/*h1, h2, h3, h4, h5, h6 {
color: green;
}*/
p{margin: 0px 10px 10px}
a{display: block; text-decoration: none; color: #222;}
a img{border: none;}
a:hover{color: #79B30B;}
fieldset { border: none; }
/*ul li, ol li {
line-height: 25px;
}*/
div#header {height: 170px; margin-bottom: 70px; background: url('http://www.wbsite.com/assets/astrobryoheader.jpg') no-repeat;}
div#header h1{font: helvetica neue; font-size: 24px; line-height: 30px; margin:0; padding-left: 5px; color: #222222;} /*#79B30B green color*/
h1 a{
color: #f3f3f3;
}
div#container{width:800px; margin:0 auto; text-align:left; background: grey;}
div#content{float:left; width: 600px; margin: 0px; background: yellow;}
div#content p{line-height:1.4}
div#navigation{float:right; width: 190px; text-align: right; font-size: 14px; line-height: 16px; padding: 5px; background: white}
div#navigation ul{list-style: none; padding-right: 10px}
div#extra{float:right; clear:right; width: 190px; text-align: right; font-size: 14px; padding: 5px; background: white;}
div#footer{clear:both; width:100%; text-align: center; color: #222;}
div#footer p{font-size: 11px; margin:0;padding:5px 10px}
.link, .photo, .text, .video {
overflow: hidden;
background: green;
margin: 0px;
}
/* POST */
.post {
float: left;
margin-top: -81px;
margin-left: 45px;
/*margin-right: 10px;*/
position: relative;
width: 550px;
padding: 10px 0px 60px 0px;
background: blue;
border-bottom: 1px solid #777777;
}
.postMeta {
float: left;
width: 40px;
padding: 1px;
margin-right: 10px;
color: white;
}
.postMeta li {
font-size: 14px;
line-height: 16px;
text-align: center;
list-style: none;
color: #222222;
background: #79B30B;
text-transform: uppercase;
}
.postMeta li.note {
background: url(http://static.tumblr.com/wbmzvfi/TiPldi1ow/heart.png) no-repeat;
padding-left: 15px;
}
/* POST TAGS */
.post .tags {
clear: both;
font-size: 11px;
padding-left: 0;
position: absolute;
bottom: 10px;
}
.tags li {
display: inline;
margin-right: 7px;
line-height: 10px;
}
.post h2 a {
color: red;
}
.post a {
color: red;
}
/* PHOTO */
.photo .post {
text-align: center;
}
.photo .post ul {
text-align: left;
}
.photo img {
padding: 5px;
width: 500px;
background: #222222;
border: 1px solid #444;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1><a href="/">{Title}</a></h1></div>
<div id="content">
{block:Posts}
{block:Text}
<div class="text">
{block:Date}
<ul class="postMeta">
<li> {ShortMonth} </li>
<li> {DayOfMonth} </li>
{block:NoteCount} <li class="note"> {NoteCount} Notes </li> {/block:NoteCount}
</ul>
{/block:Date}
<div class="post">
{block:Title}
<h2> <a href="{Permalink}">{Title}</a></h2>
{/block:Title}
{Body}
{block:HasTags}
<ul class="tags">
<li><strong>Tags: </strong></li>
{block:Tags} <li><a href="{TagURL}">{Tag}</a></li> {/block:Tags}
</ul>
{/block:HasTags}
</div> <!-- end post-->
</div> <!-- end text-->
{/block:Text}
{block:Photo}
<div class="photo">
{block:Date}
<ul class="postMeta">
<li> {ShortMonth} </li>
<li> {DayOfMonth} </li>
{block:NoteCount} <li class="note"> {NoteCount} Notes </li> {/block:NoteCount}
</ul>
{/block:Date}
<div class="post">
<img src="{PhotoURL-500}" alt="{PhotoAlt}" />
{block:Caption}
{Caption}
{/block:Caption}
{block:HasTags}
<ul class="tags">
<li><strong>Tags: </strong></li>
{block:Tags} <li><a href="{TagURL}">{Tag}</a></li> {/block:Tags}
</ul>
{/block:HasTags}
</div> <!-- end post-->
</div> <!-- end photo-->
{/block:Photo}
{block:Video}
<div class="video">
{block:Date}
<ul class="postMeta">
<li> {ShortMonth} </li>
<li> {DayOfMonth} </li>
{block:NoteCount} <li class="note"> {NoteCount} Notes </li> {/block:NoteCount}
</ul>
{/block:Date}
<div class="post">
{Video-500}
{block:Caption}
<p> {Caption} </p>
{/block:Caption}
{block:HasTags}
<ul class="tags">
<li><strong>Tags: </strong></li>
{block:Tags} <li><a href="{TagURL}">{Tag}</a></li> {/block:Tags}
</ul>
{/block:HasTags}
</div> <!-- end video post-->
</div> <!-- end video-->
{/block:Video}
{/block:Posts}
</div> <!-- end content-->
<div id="navigation">
<p> A collection of various work including illustration, photography, concept art, and matte painting. Consider this a sketchbook of my progression.</p>
<ul id="Links">
<li><a href="#" title="http://website.com">www.website.com</a></li>
</ul>
</div>
<div id="extra">
<form id="search" method="get" action="/search">
<fieldset>
<input type="text" value="" id="search_field" name="q" class="empty">
<input type="submit" value="Search" id="search_button">
</fieldset>
</form>
<!-- ADD ARCHIVE HERE -->
<p>archive</p>
<a href="#" title="http://mytumblr.tumblr.com/rss"><img class="tenleft" src="http://static.tumblr.com/wbmzvfi/TREldhwd8/rss.gif"/></a>
</div> <!-- end extra-->
<div id="footer"><p>2011 ©</p></div>
</div>
</body>
</html>
