Tumblr problems |
Tumblr problems |
nineeightyfive |
Jan 5 2011, 03:42 PM
Post
#1
|
Group: Members Posts: 2 Joined: 5-January 11 Member No.: 13,534 |
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; } This post has been edited by nineeightyfive: Jan 5 2011, 03:44 PM |
Darin McGrew |
Jan 5 2011, 03:56 PM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
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.
|
nineeightyfive |
Jan 5 2011, 04:04 PM
Post
#3
|
Group: Members Posts: 2 Joined: 5-January 11 Member No.: 13,534 |
That problem is solved now, thank you very much!
Any idea how to center the posts? |
pandy |
Jan 5 2011, 04:55 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
|
Lo-Fi Version | Time is now: 28th March 2024 - 01:44 PM |