Posted by: nineeightyfive Jan 5 2011, 03:42 PM
Hi,
I just tried making myself a Tumblr-page, but it didn't go as expected.
This is the page:
http://nineeightyfive.tumblr.com/
There are two problems:
1. The images aren't centered.
2. The images follow up crooked.
I'm a total noob in these things, so maybe someone else sees the problem?
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
. .o8 oooo
.o8 "888 `888
.o888oo oooo oooo ooo. .oo. .oo. 888oooo. 888 oooo d8b
888 `888 `888 `888P"Y88bP"Y88b d88' `88b 888 `888""8P
888 888 888 888 888 888 888 888 888 888
888 . 888 888 888 888 888 888 888 888 888 .o.
"888" `V88V"V8P' o888o o888o o888o `Y8bod8P' o888o d888b Y8P
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- DEFAULT VARIABLES -->
<meta name="color:Background" content="#3b627e" />
<meta name="font:Title" content="Arial" />
<meta name="font:Body" content="Arial" />
<meta name="font:Accent" content="Lucida Sans" />
<meta name="if:Show People I Follow" content="1" />
<meta name="if:Show Tags" content="1" />
<meta name="if:Show Album Art on Audio Posts" content="1" />
<meta name="if:Enable Jump Pagination" content="0" />
<meta name="text:Disqus Shortname" content="" />
<meta name="image:Header" content="" />
<meta name="image:Background" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{Title}{block:SearchPage}, {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />
<link rel="apple-touch-icon" href="{PortraitURL-128}"/>
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<style type="text/css">
body {
background: {color:Background} url('{image:Background}') top left fixed repeat;
margin: 0;
padding: 0;
font-family: {font:Body};
}
.clear {
clear: both;
height: 0px;
overflow: hidden;
}
a img {
border: none;
}
#wrapper {
width: 645px;
margin: 0 auto;
}
#wrapper #title {
margin: 30px 0;
color: #fff;
font-size: 25px;
font-weight: bold;
font-family: {font:Title};
text-shadow: 1px 3px 5px rgba(0,0,0, 0.5);
letter-spacing: -1px;
}
#wrapper #title a {
color: #FFFFFF;
text-decoration: none;
}
#wrapper #content {
width: 700px;
float: left;
}
#wrapper #content .post {
font-family: {font:Body};
background: #00000;
padding: 10px;
position: relative;
}
#wrapper #content .post .media {
text-align: center;
margin-bottom: 10px;
}
#wrapper #content .post .quotebg {
font-family: georgia, serif;
font-size: 150px;
color: {color:Background};
opacity: 0.2;
filter: alpha(opacity=20);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
position: absolute;
top: 70px;
left: 10px;
}
#wrapper #content .post .quote {
color: {color:Background};
font-weight: bold;
padding: 20px 20px 5px 20px;
}
#wrapper #content .post .quote.short {
font-size: 33px;
line-height: 35px;
}
#wrapper #content .post .quote.medium {
font-size: 25px;
line-height: 28px;
}
#wrapper #content .post .quote.long {
font-size: 18px;
line-height: 22px;
}
#wrapper #content .post .quote_source *:first-child {
margin-top: 0px;
}
#wrapper #content .post .quote_source *:last-child {
margin-bottom: 0px;
}
#wrapper #content .post .quote *:first-child {
margin-top: 0px;
}
#wrapper #content .post .quote *:last-child {
margin-bottom: 0px;
}
#wrapper #content .post .copy {
color: #FFFFFF;
padding: 10px;
font-size: 13px;
line-height: 15px;
}
#wrapper #content .post .copy a {
color: #FFFFFF;
text-decoration: underline;
}
#wrapper #content .post .copy p {
margin: 10px 0 0 0;
padding: 0;
}
#wrapper #content .post .copy pre {
margin: 10px 0px 10px 0px;
padding: 10px;
background-color: #000000;
font: normal 11px Courier, monospace;
overflow: auto;
}
#wrapper #content .post .copy > p:first-child {
margin-top: 0;
}
#wrapper #content .post .copy img {
max-width: 100%;
}
#wrapper #content .post .audio {
background: #000000;
float: left;
padding: 7px;
margin-bottom: 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#wrapper #content .post .audio .player {
float: left;
}
#wrapper #content .post .audio .player .audio_player embed {
border: 1px solid #c8c8c8;
}
#wrapper #content .post .audio .meta {
padding: 8px 13px;
height: 13px;
float: left;
color: #666;
font-family: {font:Accent};
font-size: 11px;
text-transform: lowercase;
}
#wrapper #content .post .audio .meta a {
color: #666;
text-decoration: none;
}
#wrapper #content .post .album_art {
text-align: center;
}
#wrapper #content .post .question {
color: #494949;
font-size: 16px;
font-weight: bold;
background: #000000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
margin: 0 0 15px 0;
padding: 15px 20px;
position: relative;
}
#wrapper #content .post .question .nipple {
width: 13px;
height: 7px;
background: #000000 url('http://assets.tumblr.com/themes/redux/ask-mask.png');
position: absolute;
bottom: -7px;
left: 30px;
}
#wrapper #content .post .asker_container {
margin: 0 0 20px 24px;
}
#wrapper #content .post .asker_container a.asker {
color: {color:Body};
}
#wrapper #content .post .title {
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
padding: 10px 10px 0 10px;
}
#wrapper #content .post img {
width: 700px;
}
#wrapper #content .post .chat {
background-color: #fff;
border-left: 5px solid #dedddd;
margin: 10px 10px 0 10px;
font-size: 14px;
}
#wrapper #content .post .chat .lines {
margin-left: 1px;
}
#wrapper #content .post .chat .lines .line {
background-color: #000000;
color: #494949;
margin-bottom: 1px;
padding: 3px 5px;
}
#wrapper #content .post .chat .lines .line.even {
background-color: #000000;
}
#wrapper #content .post .link {
margin: 4px 0 2px 0;
font-size: 16px;
line-height: 25px;
}
#wrapper #content .post .link a {
background-color: {color:Background};
color: #000000;
padding: 5px 7px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#wrapper #content .post .link a:hover {
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
#wrapper #content .post .footer {
background: #000000;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
font-family: {font:Accent};
font-size: 11px;
color: #666;
padding: 5px 10px;
margin-top: 10px;
}
#wrapper #content .post .footer.for_permalink:hover {
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
#wrapper #content .post .footer .date {
width: 67%;
float: left;
color: #666;
}
#wrapper #content .post .footer .notes {
width: 33%;
float: right;
text-align: right;
color: #666;
}
#wrapper #content .post .footer .notes a {
color: #666;
}
#wrapper #content .post .footer .tags a {
color: #4a4a51;
text-decoration: underline;
}
#wrapper #content .post .footer .tags .tag-commas:last-child {
display: none;
}
#wrapper #content .post .footer.with_source_url .tags {
max-width: 330px;
float: left;
}
#wrapper #content .post .footer.with_source_url .source_url {
float: right;
max-width: 160px;
overflow: hidden;
white-space: nowrap;
}
#wrapper #content .post .footer.with_source_url .source_url img {
vertical-align: top;
-moz-opacity: 0.5;
opacity: 0.5;
}
#wrapper #content .post .footer.with_source_url .source_url:hover img {
-moz-opacity: 0.7;
opacity: 0.7;
}
#wrapper #content .post a {
color: #6e7173;
text-decoration: none;
}
#wrapper #content .post .copy blockquote {
margin: 10px 0px 10px 10px;
padding-left: 15px;
border-left: solid 0px #dcdcdc;
}
#wrapper #content .post .copy blockquote blockquote {
border-left: solid 0px #cccccc;
}
#wrapper #content .post .copy blockquote blockquote blockquote {
border-left: solid 0px #bcbcbc;
}
#wrapper #content .post .copy blockquote blockquote blockquote blockquote {
border-left: solid 0px #acacac;
}
Posted by: Darin McGrew Jan 5 2011, 03:56 PM
Each div.post element has 10px padding. You nest one div.post element inside another repeatedly. Each div.px element contributes 10px padding. The first div.px element has a total of 10px padding. The second, 20px padding. The third, 30px padding. And so on.
Posted by: nineeightyfive Jan 5 2011, 04:04 PM
That problem is solved now, thank you very much!
Any idea how to center the posts?
Posted by: pandy Jan 5 2011, 04:55 PM
http://www.w3.org/Style/Examples/007/center.html
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)