The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Tumblr problems
nineeightyfive
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 5 2011, 03:56 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,279
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
nineeightyfive
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 5 2011, 04:55 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,023
Joined: 9-August 06
Member No.: 6



http://www.w3.org/Style/Examples/007/center.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 15th October 2018 - 02:36 PM