Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Feb 2010
    Posts
    229
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Can't center tumblr site

    Hi, sorry to bother you with such a basic question, but I'm trying to center my tumblr site here: http://thisisoops.tumblr.com/

    I have access to the template's html/css, but I'm not sure what I need to add to center it all.

    Thanks.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello OurJud,
    It may be that you don't really want to give the body of your document a width. Instead, move that closing tag for #container down so it encloses #sidebar, #wrapper and the rest of your site. Then you can center #container.

    Like this -
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Feb 2010
    Posts
    229
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Sorry, Excavator. I tried to follow your instructions but nothing happened. You answer is a little too advance for me.

    Can you break it down as though you're talking to a 9 year-old?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Since #wrapper is what you are centering, it needs to wrap your entire website.

    Copy/paste this bit into a new .html document and view it in your browser -
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	background: #ffffff;
    	color: #000;
    	font: 12px 'Helvetica', 'Arial', serif;
    	margin: 2em;
    }
    #wrapper {
    	width: 500px;
    	margin: 0 auto;
    	overflow: auto;
    }
    a {
    	color: #ce3a4a;
    	text-decoration: none;
    }
    a:hover {
    	color: #222;
    }
    h1 {
    	background: url('http://26.media.tumblr.com/avatar_36e070bdc2be_64.png') no-repeat;
    	font: 5em 'Impact', 'Arial', serif;
    	font-size: 6.9em;
    	letter-spacing: -3px;
    	line-height: 65px;
    	margin: .30em 0 -8px 0;
    	padding-left: 70px;
    }
    h2 {
    	font-size: 14px;
    	letter-spacing: 0;
    	margin: .2em 5em -.5em 0;
    	border-top: 1px solid #eee;
    	padding: 2px;
    	width: 100%;
    	background-color: #eee;
    }
    h2 a {
    	color: #666;
    }
    h3 {
    	font-size: 1.5em;
    	letter-spacing: -1px;
    	margin: .75em auto;
    }
    ul.chat, ul.chat li {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    p.reblog {
    	font-size: .69em;
    }
    h3#navi {
    	text-align: left;
    }
    p#meta {
    	font-size: 1.6em;
    	text-align: left;
    	margin: 0 0 20px 0;
    	border-top: 1px solid #eee;
    	border-bottom: 1px solid #eee;
    }
    #sidebar {
    	border-top: 1px solid #eee;
    	border-bottom: 1px solid #eee;
    	height: auto;
    	width: 160px;
    	float: right;
    	margin: 184px 0 0 0;
    	padding: 5px 0 5px 8px;
    }
    p#tagcloud {
    	font-size: 11px;
    	color: red;
    }
    #tagcloud li {
    	list-style-type: none;
    }
    li {
    	margin-left: 0px;
    	padding-left: 0px;
    }
    ul {
    	margin-left: 0px;
    	padding-left: 0px;
    }
    ol.notes {
    	list-style-type: none;
    	padding: 0;
    	font-size: 11px !important;
    }
    ol.notes img.avatar {
    	width: 15px;
    	height: 15px;
    }
    ol.notes blockquote {
    	margin: 0;
    }
    ol.notes blockquote a {
    	text-decoration: none;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="sidebar"><span style="font-size: 11px; color: #555; font-style: italic;">Categories:</span>
        <p id="tagcloud"> 
          <!--Tumblr Tag Cloud [2011-11-09]--> 
          <script type="text/javascript" src="http://rive.rs/javascripts/tumblr.min.js?css=custom&minsize=100&maxsize=100&order=frequency&math=linear"></script>
      </div>
      <h1><a href="/">THIS IS OOPS</a></h1>
      <p></p>
      <p id="meta"> <a href="http://wotadolt.tumblr.com/">home</a> &middot; <a href="/archive">archive</a> &middot; <a href="http://thisisoops.tumblr.com/rss">rss</a> &middot; <a href="/random">random</a> &middot; <a href="http://www.facebook.com/share.php?u=http://wotadolt.tumblr.com/">facebook</a> &middot; <a href="http://twitter.com/home?status=You've been stupid - tell us all about it - http://wotadolt.tumblr.com/"">twitter</a> &middot; <a href="/ask">submit</a> 
    </div>
    <!--end wrapper-->
    </div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Feb 2010
    Posts
    229
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Right, thanks, Excavator. I did that and although there a few issues with sidebar positioning and width of the main part, I think I can go from there.

    Thanks very much for going to the trouble to do that.

  • #6
    Regular Coder
    Join Date
    Feb 2010
    Posts
    229
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Okay, still can't get it to work when I try to apply those changes to my actual template.

    I'll not trouble you any more, but please allow me one more question. Would it be practical to do what I'm trying by simply adding a left-margin value?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by OurJud View Post
    Okay, still can't get it to work when I try to apply those changes to my actual template.
    I'm not seeing any changes on my end. The version I see still has #wrapper in the wrong place in the markup.

    I'll not trouble you any more, but please allow me one more question. Would it be practical to do what I'm trying by simply adding a left-margin value?
    A left margin might center it in one resolution. It would not resize to different resolutions well.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder
    Join Date
    Feb 2010
    Posts
    229
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Hi. You're not seeing it because I changed it back when it failed to do what I want. It'll just have to stay as it is.

    Thanks for the help again.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •