I'm trying to make a custom Tumblr theme. I know HTML as well as CSS.
I want my images and text postings to be displayed side by side, no spaces in between them with each posting a width of 200px and a height of 200px. I have some of the code completed, but my images are not displaying correctly. I have tried awhile and this is the end result:
http://testingmyborders.tumblr.com/
I have tried to fix this for 2 days and realize I cant do this alone. All suggestions and tips will be taken into consideration and tested. I appreciate you taking the time to read this.You can email me with coding corrections and suggestions here:
twoguanine@yahoo.com
Once again, I thank you for reading this.
Here is my unfinished theme code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>{Title}</title>
<style type="text/css">
.grid
{
margin-left:30px;
margin-right:30px;
height:200px;
width:200px;
float:left;
text-align:center;
display:inline;
}
body
{
color:#fff;
background-color:#000;
margin-left:5px;
margin-bottom:5px;
margin-right:5px;
margin-top:5px;
width:500px;
height:500px;
}
</style>
</head>
<body>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
</head>
<body>
<h1>{Title}</h1>
{block:Description}
<p id="description">{Description}</p>
{/block:Description}
<div class="grid">
{block:Posts}
{block:Text}
<div class="grid">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
</li>
{/block:Text}
{block:Photo}
<div class="grid">
<img src="{PhotoURL-250}" alt="{PhotoAlt}"/>
</div>
{/block:Photo}
</div>
</body>
</html>
Before you post, read our: 
