Log In · Register

 
 
 Closed TopicStart new topic
sidebar too short
rockaxbella
post Jan 31 2010, 07:21 PM
Post #1


Newbie
*

Group: Member
Posts: 3
Joined: May 2007
Member No: 525,251
hey guys i need your help! :)
can anyone help me out and tell me how i can get the sidebar on the right on my blog, as long as the other content on the left site?
that would be really awesome, i tried for over an hour now and i just can’t figure it out :(

http://tanyafavitta.tumblr.com

here's the code:

I REALLY HOPE ANYONE FINDS THE TIME TO HELP ME! THANK YOU :)

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- DEFAULT VARIABLES -->
<meta name="color:Background" content="#FF6EC7" />
<meta name="font:Title" content="baskerville" />
<meta name="font:Body" content="baskerville" />
<meta name="font:Accent" content="baskerville" />
<meta name="if:Show People I Follow" content="1" />
<meta name="if:Show Tags" content="1" />
<meta name="text:Disqus Shortname" content="" />
<meta name="image:Header" content="http://i739.photobucket.com/albums/xx32/tanyafavitta/header.jpg" />
<meta name="image:Background" content="http://i739.photobucket.com/albums/xx32/tanyafavitta/wood.jpg" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{Title}{block:SearchPage}, 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="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: 1px;
}

a img {
border: none;
}

#wrapper {
width: 850px;
margin: 0 auto;

}

#wrapper #title {
margin: 30px 0;
color: #fff;
font-size: 50px;
font-weight: bold;
font-family: {font:palatino};
text-shadow: #2f2f2f 1px 3px 5px;
letter-spacing: -1px;
}

#wrapper #title a {
color: #fff;
text-decoration: none;
}

#wrapper #content {
width: 580px;
float: left;


}





#content {
width: 800px;
margin: -30px 0px 0px 0px;
padding: 50px 10px 10px 10px;
background: #fff;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
}

#main {
float: left;
width: 500px;
margin: 0px 0px 0px 49px;
padding: 0px 0px 0px 0px;
}







#wrapper #content .post {
font-family: {font:Body};
background: #fff;
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;
}

#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: #9C9C9C;
padding: 10px;
font-size: 13px;
line-height: 15px;
}

#wrapper #content .post .copy a {
color: #9C9C9C;
text-decoration: underline;
}

#wrapper #content .post .copy p:first-child {
margin-top: 0;
}

#wrapper #content .post .copy p:last-child {
margin-bottom: 0;
}

#wrapper #content .post .copy img {
max-width: 100%;
}

#wrapper #content .post .audio {
background: #eaeaea;
float: left;
padding: 7px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-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;
}

#wrapper #content .post .audio .meta a {
color: #666;
text-decoration: none;
}

#wrapper #content .post .title {
color: #494949;
font-size: 16px;
font-weight: bold;
padding: 10px 10px 0 10px;
}

#wrapper #content .post img {
max-width: 500px;
}

#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: #eaeaea;
color: #494949;
margin-bottom: 1px;
padding: 3px 5px;
}

#wrapper #content .post .chat .lines .line.even {
background-color: #dedddd;
}

#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: #fff;
padding: 5px 7px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-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 {
font-family: {font:Accent};
font-size: 11px;
color: #ff8fb4;
padding: 5px 10px;
margin-top: 10px;
}



#wrapper #content .post a {
color: #a9b7c0;
text-decoration: none;
}

#wrapper #content .post .copy blockquote {
margin: 10px 0px 10px 10px;
padding-left: 15px;
border-left: solid 4px #dcdcdc;
}

#wrapper #content .post .copy blockquote blockquote {
border-left: solid 4px #cccccc;
}

#wrapper #content .post .copy blockquote blockquote blockquote {
border-left: solid 4px #bcbcbc;
}

#wrapper #content .post .copy blockquote blockquote blockquote blockquote {
border-left: solid 4px #acacac;
}

#wrapper #content .post .copy blockquote blockquote blockquote blockquote blockquote {
border-left: solid 4px #9c9c9c;
}

#wrapper #content .post .copy blockquote blockquote blockquote blockquote blockquote blockquote {
border-left: solid 4px #8c8c8c;
}

#wrapper #content .bottom {
background: url(http://i510.photobucket.com/albums/s345/ryuu_echizen/divider.jpg) top center no-repeat transparent;
width: 513px;
height: 70px;
margin: 0 auto;
}

#wrapper #content #navigation {
text-align: right;
padding-bottom: 35px;
}

#wrapper #content #navigation a {
background-color: #fff;
color: #9C9C9C;
padding: 5px 10px;
text-decoration: none;
margin-left: 25px;
}

#wrapper #content #navigation a:hover {
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}

#wrapper #content .post .notecontainer {
background: #eaeaea;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
font-family: {font:Accent};
font-size: 11px;
color: #666;
margin-top: 10px;
margin-bottom: -10px;
}

#wrapper #content .post .notecontainer a {
color: #666;
text-decoration: underline;
}

#wrapper #content .post .notecontainer ol.notes {
padding: 0px 0 10px 0;
list-style-type: none;
font-size: 11px;
}

#wrapper #content .post .notecontainer ol.notes li.note {
padding: 10px 10px 0 10px;
}

#wrapper #content .post .notecontainer ol.notes li.note img.avatar {
vertical-align: -4px;
margin-right: 10px;
width: 16px;
height: 16px;
}

#wrapper #content .post .notecontainer ol.notes li.note span.action {
font-weight: normal;
}

#wrapper #content .post .notecontainer ol.notes li.note .answer_content {
font-weight: normal;
}

#wrapper #content .post .notecontainer ol.notes li.note blockquote {
border-left: 2px solid #666;
padding: 4px 10px;
margin: 10px 0px 0px 25px;
}

#wrapper #content .post .notecontainer ol.notes li.note blockquote a {
text-decoration: none;
}



#wrapper #sidebar {
width: 250px;
float: right;
height: auto;
margin: 0;
color: {color:Background};
font-family: {font:Accent}
}

#wrapper #sidebar a {
color: {color:Background};
}

#wrapper #sidebar #top {
background: #fff;
padding: 20px;
margin: -30px -2px 0px 0px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
}

#wrapper #sidebar #top #avatar {
width: 220px;
height: 310px;
padding: 8px 0 0 9px;
background: url(http://i739.photobucket.com/albums/xx32/tanyafavitta/avatar.jpg) top left no-repeat transparent;
position: relative;
top: 15px;
left: -10px;
}

#wrapper #sidebar #top #description {
font-size: 10px;
color: #9C9C9C;
font-family: arial;
position: relative;
top: 30px;
}

#wrapper #sidebar #top #description a {
color: {color:Background};
text-decoration: underline;
}




#wrapper #sidebar #top .heading {
color: #fff;
font-family: helvetica, arial, sans-serif;
font-size: 17px;
margin-top: 20px;
padding: 10px;
background-color: {color:Background};
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
}

#wrapper #sidebar #top a .heading {
color: #fff;
text-decoration: none;
}

#wrapper #sidebar #top .heading#followontumblr {
background: url(http://assets.tumblr.com/themes/redux/sidebar-follow- on-verbose.png) 10px center no-repeat {color:Background};
text-indent: -9999px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
margin-top: 50px;

}


#wrapper #sidebar #top .heading#followontumblr:hover,
#wrapper #sidebar #top .heading#twitter:hover {
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}

#wrapper #sidebar #top .heading#twitter {
background: url(http://assets.tumblr.com/themes/redux/sidebar-twitter.png) right center no-repeat {color:Background};
}

#wrapper #sidebar #top .heading#following {
background: url(http://assets.tumblr.com/themes/redux/sidebar-following.png) right center no-repeat {color:Background};
}

#wrapper #sidebar #top .content {
margin-top: 0px;
padding: 7px 10px;
background: #eaeaea;
color: #666;
font-size: 11px;
overflow: hidden;
}

#wrapper #sidebar #top a {
text-decoration: none;
}

#wrapper #sidebar #top #following-avatars.content {
padding: 4px;
}

#wrapper #sidebar #top #following-avatars.content a img {
margin: 5px;
}

#wrapper #sidebar #top #buttons {
padding: 20px 0 0 0;
}

#wrapper #sidebar #top #buttons .button {
width: 35%;
height: 21px;
float: left;
background: left center no-repeat transparent;
padding: 2px 0 0 30px;
font-size: 14px;
}

#wrapper #sidebar #top #buttons a {
color: {color:Background};
text-decoration: none;
}

#wrapper #sidebar #top #buttons div {
padding-bottom: 10px;

}

#wrapper #sidebar #top #buttons .button#button-rss {
background-image: url(http://assets.tumblr.com/themes/redux/button-rss.png?2);
}

#wrapper #sidebar #top #buttons .button#button-random {
background-image: url(http://assets.tumblr.com/themes/redux/button-random.png?2);
}

#wrapper #sidebar #top #buttons .button#button-archive {
background-image: url(http://assets.tumblr.com/themes/redux/button-archive.png?2);
}

#wrapper #sidebar #top #buttons .button#button-mobile {
background-image: url(http://assets.tumblr.com/themes/redux/button-mobile.png?2);
}


#wrapper #sidebar #copyright {
text-align: center;
color: #fff;
font-size: 12px;
margin-bottom: 10px;
}

#wrapper #sidebar #copyright a {
color: #fff;
margin-left: 15px;
}

</style>
<!--[if lt IE 7.]>

<![endif]-->

<!--[if lt IE 8.]>
<style type="text/css">
#wrapper #content .bottom {
background: transparent;
}

#wrapper #content .post .footer {
background: transparent;
color: #000;
}

#wrapper #content .post .audio {
float: none;
background: transparent;
}

#wrapper #content .post .notecontainer .notes {
padding: 0;
margin: 0;
}
</style>

<style type="text/css">
#wrapper #sidebar #bottom {
background: transparent;
}

#wrapper #sidebar #top #avatar {
background: none;
}

#wrapper #sidebar #top #avatar img {
border: 0px solid #f1f1f1;
}

#wrapper #sidebar #top .heading#followontumblr {
background-image: none;
text-indent: 0;
}

#wrapper #sidebar #top .heading#twitter {
background-image: none;
}

#wrapper #sidebar #top .heading#following {
background-image: none;
}

#wrapper #content .post .audio .player {
float: none;
}

#wrapper #content .post .audio .meta {
display: none;
float: none;
}
</style>
<![endif]-->
<style type="text/css">{CustomCSS}</style>
</head>
<body>
<div id="wrapper">
<div id="title">
<a href="/">
{block:IfHeaderImage}<img src="{image:Header}" />{/block:IfHeaderImage}
{block:IfNotHeaderImage}{Title}{/block:IfNotHeaderImage}
</a>
</div>
<!--2-->
<div id="content">

{block:SearchPage}
<div id="searchresults" class="searchresultcount">{SearchResultCount} results for <strong>"{SearchQuery}"</strong></div>
{/block:SearchPage}

{block:NoSearchResults}
<style type="text/css">
.searchresultcount {
display: none;
}
</style>
<div id="searchresults">No results for <strong>"{SearchQuery}"</strong></div>
{/block:NoSearchResults}

{block:Posts}
<div class="post">

{block:Photo}
<div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}</div>
{block:Caption}<div class="copy">{Caption}</div>{/block:Caption}
{/block:Photo}

{block:Video}
<div class="media">{Video-500}</div>
{block:Caption}<div class="copy">{Caption}</div>{/block:Caption}
{/block:Video}

{block:Audio}
<div class="audio">
<div class="player">{AudioPlayerWhite}</div>
<div class="meta">{PlayCountWithLabel}{block:ExternalAudio} &bull; <a href="{ExternalAudioURL}">download</a>{/block:ExternalAudio}</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
{block:Caption}<div class="copy">{Caption}</div>{/block:Caption}
{/block:Audio}

{block:Quote}
<div class="quote {Length}">{Quote}</div>
<div class="copy">
<div class="quotebg">“</div>
{block:Source}
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" style="width: 20px">&mdash;</td>
<td valign="top" class="quote_source">
{Source}
</td>
</tr>
</table>
{/block:Source}
</div>
{/block:Quote}

{block:Text}
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="copy">{Body}</div>
{/block:Text}

{block:Chat}
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="chat">
<div class="lines">
{block:Lines}
<div class="line {Alt}">{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</div>
{/block:Lines}
</div>
</div>
<div class="clear"></div>
<div style="height: 20px"></div>
{/block:Chat}

{block:Link}
<div class="link"><a href="{URL}" {Target}>{Name} &raquo;</a></div>
{block:Description}<div class="copy">{Description}</div>{/block:Description}
{/block:Link}

<a href="{Permalink}">
<div class="footer">
<div class="date">
{block:Reblog}Reblogged{/block:Reblog}
{block:NotReblog}Posted{/block:NotReblog}

{TimeAgo}

{block:Reblog}from {ReblogParentName} {block:RebloggedFromReblog}(originally from {ReblogRootName}){block:RebloggedFromReblog}{/block:Reblog}
{block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
{block:FromMobile}from mobile{/block:FromMobile}
</div>
<div class="notes">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount} {block:IfDisqusShortname}{block:NoteCount}&bull;{/block:NoteCount} <a href="{Permalink}#disqus_thread">view comments</a>{/block:IfDisqusShortname}</div>
<div class="clear"></div>
</div>
</a>

{block:IfShowTags}
{block:HasTags}<div class="footer"><div class="tags">Tagged: {block:Tags}<a href="{TagURL}">{Tag}</a><span class="tag-commas">, </span>{/block:Tags}.</div></div>{/block:HasTags}
{/block:IfShowTags}

{block:PostNotes}<div class="notecontainer">{PostNotes}</div>{/block:PostNotes}

{block:IfDisqusShortname}
{block:Permalink}
<div class="notecontainer" style="margin: 20px 0 1px 0; padding: 1px 10px 10px 10px;">
<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
<noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">View the discussion thread.</a></noscript>
</div>
<div style="text-align: right; margin-top: 5px">
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
{/block:Permalink}
{/block:IfDisqusShortname}

</div>
<div class="bottom"></div>
{/block:Posts}

{block:Pagination}
<div id="navigation">
{block:PreviousPage}<a href="{PreviousPage}">&larr; previous page</a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}">next page &rarr;{/block:NextPage}
</div>
{/block:Pagination}

</div>

<div id="sidebar">
<div id="top">
<div id="avatar"></div></a>
<div id="description">{Description}</div>






{block:Twitter}
<div id="twitterwrapper" style="display: none">
<a href="http://twitter.com/{TwitterUsername}" style="text-decoration: none"><div class="heading" id="twitter">Latest Tweets</div></a>
<div id="tweetcontainer"></div>
<script type="text/javascript">
function recent_tweets(data) {
document.getElementById("twitterwrapper").style.display = "block";
for(i = 0; i < data.length; i++) {
document.getElementById("tweetcontainer").innerHTML = document.getElementById("tweetcontainer").innerHTML + '<a href="http://twitter.com/{TwitterUsername}/status/' + data[i].id + '"><div class="content">' + data[i].text + '</div></a>';
}
}
</script>
</div>
{/block:Twitter}

{block:IfShowPeopleIFollow}
{block:Following}
<div class="heading" id="following">get inspired</div>
<div class="content" id="following-avatars">
{block:Followed}<a href="{FollowedURL}"><img src="{FollowedPortraitURL-24}" /></a>{/block:Followed}
</div>
{/block:Following}
{/block:IfShowPeopleIFollow}

<div id="buttons">
<div class="row">
<div class="button" id="button-rss"><a href="{RSS}">RSS Feed</a></div>
<div class="button" id="button-random"><a href="/random">Random</a></div>
</div>
<div class="clear"></div>
<div class="row">
<div class="button" id="button-archive"><a href="/archive">Archive</a></div>
<div class="button" id="button-mobile"><a href="/mobile">Mobile</a></div>
</div>
<div class="clear"></div>
</div>

</div>

<div id="bottom"></div>

</div>

<div class="clear"></div>
</div>

{block:Twitter}
<script type="text/javascript" src="/tweets.js"></script>
{/block:Twitter}

{block:IfDisqusShortname}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
</body>
</html>
 
« Next Oldest · Tumblr Resolved Topics · Next Newest »
 

Closed TopicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic