I’ve been screwing around with this design for a Tumblr photoblog for little while, off and on. I changed some things, decided to have the date overlay the photo on hover. I’ve done this on other sites a million times before, I know how to do it, it’s not complicated. I’m guessing I screwed it up somewhere with my tinkering and now I’m just too irritated with it to see.
If anyone has the patience to check out my css/markup and point out the obvious.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
<link rel="shortcut icon" href="http://media.tumblr.com/bN8JmTIVwbozhj4aTZvE9HtJ_100.gif"/>
<style type="text/css">
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/* GENERAL*/
body {
font: 12px/1em Helvetica, Arial, sans-serif;
text-align: center;
background: #FFF;
}
a {
color: #000;
text-decoration: underline;
}
a:hover {
color: #999999;
text-decoration: none;
}
#content {
background: #FFF;
color: #000;
margin: 10px auto;
width: 800px;
text-align: left;
}
#posts li{
list-style: none;
}
P {
margin-left:0;
}
/* NAVBAR */
h1 {
color: inherit;
font-size: inherit;
text-transform: uppercase;
display: inline;
float: left;
}
h1 span {
font-weight: normal;
font-stretch: wider
}
.slash {
color: inherit;
}
#navbar .sort {
font-weight: normal;
display: inline;
float: right;
padding: 0 0 0 10px;
}
#navbar {
color: #999999;
font-size: inherit;
font-weight: bold;
text-transform: uppercase;
margin: 0 0 10px; 0;
padding: 0;
height: 30px;
}
#navbar:hover {
color: #000;
}
#navbar a {
color: inherit;
text-decoration: none;
}
#navbar a:hover {
border-bottom: 2px solid #000;
padding: 0 0 2px 0;
}
#menu {
padding: 9.5px 0 0 0px;
}
#menu li {
list-style-type: none;
padding: 0;
}
/* PHOTO POST*/
#hovertext {
font-weight: bold;
padding: 5px;
width: 100%;
position: relative;
bottom: 267.5px;
margin-left: auto;
margin-right: auto;
background: #FFF;
z-index: 5;
}
#caption {
margin-top: 10px;
color: #000;
background: #FFF;
}
#caption:hover {
z-index: 3;
}
#bigphoto .desc {
margin-top: 10px;
}
#bigphoto .date {
background: url("http://www.websiteicons.com/icons_src/5/6/date_time_06.gif") no-repeat;
padding-left: 16px;
}
#bigphoto .tags {
background: url("http://www.websiteicons.com/icons_src/7/9/folders_03.gif") no-repeat;
padding-left: 16px;
}
#bigphoto .permalink {
background: url("http://www.websiteicons.com/icons_src/10/16/pages_06.gif") no-repeat;
padding-left: 16px;
}
#bigphoto .date, #bigphoto .tags, #bigphoto .permalink {
padding-bottom: 5px;
margin-bottom: 5px;
}
.tags span {
padding-right: 5px;
}
#bigphoto .photolink {
padding-bottom: 5px;
margin-bottom: 5px;
}
#bigphoto .label {
font-weight: bold;
}
#bigphoto img {
position: relative;
border: 4px solid #000;
width: 792px;
z-index: 2;
}
.linktext {
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
text-align: center;
color: #000;
width: 700px;
position: relative;
top: -250px;
z-index: -1;
}
/* TEXT POST */
#posttext {
text-align: justify;
padding: 0;
color: #000;
width: 600px;
line-height: 120%;
}
#posttext ul li{
margin-bottom: 10px;
list-style-type: square;
list-style-position: inside;
}
#posttext img {
padding: 0 0 10px 10px;
width: 350px;
float: right;
}
h3 {
font-weight: bold;
color: inherit;
font-size: inherit;
text-transform: uppercase;
letter-spacing: .15em;
font-stretch: wider;
margin: 15px 0 5px;
padding: 0;
}
/* FOOTER*/
#footer {
color: #999999;
margin-top: 0px;
font-size: inherit;
text-transform: uppercase;
height: 30px;
}
#footer:hover {
color: #000;
}
#footer a {
color: inherit;
text-decoration: none;
margin: 5px 0 5px 0;
}
#footer #next:hover {
border-bottom: 2px solid #000;
padding: 0 0 4px 0;
}
#footer #prev:hover {
border-bottom: 2px solid #000;
padding: 0 0 4px 0;
}
#footer #prev {
float: left;
margin: 10px 0 0 0px;
}
#footer #next {
float: right;
margin: 10px 0px 0 0;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#navbar, #footer, .bigphoto .caption {
width: 500px;
}
#menu li {
display: inline;
}
</style>
<![endif]-->
<script type="text/javascript" src="http://static.tumblr.com/txv6iau/xrIkg2ucg/tooltips.js"></script>
</head>
<body>
<div id="content">
<div id="navbar">
<ul id="menu">
<li><h1><a href="/">Andrew West</a><span> <span class="slash">/</span> Photography{block:TagPage} / {Tag} {/block:TagPage} {block:PermalinkPage}{block:HasTags}{block:Tags} / {Tags}{/block:Tags}{/block:HasTags} {/block:PermalinkPage} {block:PostTitle} / {PostTitle}
{/block:PostTitle} </span></h1></li>
{block:IndexPage}<li><span class="sort"><a href="/rss">RSS</a></span></li>
<li><span class="sort"><a href="/archive">Archive</a></span></li>
<li><span class="sort"><a href="/about">About</a></span></li>
</ul>{/block:IndexPage}
</div>
<div id="posts">
{block:Posts}
{block:Text}
<li id="posttext">
{block:Title}
<h3>{Title}</h3>
{/block:Title}
{Body}
</li>
{/block:Text}
{block:Photo}
<div id="bigphoto">
{block:NextPage}<a href="{NextPage}">{/block:NextPage}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></a>
{block:Caption}
<div id="caption">
{block:IndexPage}<div id="hovertext">{DayOfMonth} {Month} {Year}</div>{/block:IndexPage}
{block:PermalinkPage}<div class="date"><span class="label">Date: </span>{ShortMonth}. {DayOfMonth} ’{ShortYear}</div> <div class="tags"><span class="label">Tags:</span> {block:HasTags}{block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}</div><div class="permalink"><span class="label">Link:</span> <a href="{Permalink}">{ShortURL}</a></div><div class="desc">{Caption}</div></div>{/block:PermalinkPage}
{/block:Caption}
</div>
{/block:Photo}
{/block:Posts}
</div>
{block:IndexPage}<div id="footer">
{block:PreviousPage}
<a href="{PreviousPage}" id="prev">Prev</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}" id="next">Next</a>
{/block:NextPage}
</div>{/block:IndexPage}
</div>
</body>
</html>
Thanks, I really appreciate the help and I’ll be around to reciprocate.
