...

View Full Version : Can't center tumblr site



OurJud
11-11-2011, 06:43 PM
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.

Excavator
11-11-2011, 06:46 PM
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:

a valid DocType
an element with a width
that elements right/left margins set to auto

OurJud
11-11-2011, 06:53 PM
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?

Excavator
11-11-2011, 07:19 PM
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 -
<!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>

OurJud
11-11-2011, 07:36 PM
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.

OurJud
11-11-2011, 07:56 PM
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?

Excavator
11-11-2011, 07:59 PM
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.

OurJud
11-11-2011, 08:27 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum