 Tumblr: Need help with adding a sidebar, I have a simple single column blog that I would like to add a sidebar |
| ferryll |
 Jan 4 2012, 09:08 AM
Post
#1
|
|
Group: Members Posts: 3 Joined: 4-January 12 Member No.: 16,185  |
I hope someone can help out with my question. I would like to add that I have consulted this forum many times with success, and this is one of my first posts that I place myself. My knowledge of coding/html/css is very, very limited so I hope someone can help me out.
I run a simple blog on tumblr which you can see here: http://iloveyourvideo.tumblr.com Now as you can see it has a single column (875 px wide) that is centered in the browser. So the blog stays in the center no matter how you scale the browser window. What I would like to do know is add small sidebar to the right of this main column. Now, I have managed to create a sidebar myself but if you scroll to the bottom of my blog, you can see that the sidebar also stay centered no matter how you scale your browser window, which is perfect. However, it is below the content of the main column and it needs to be next to it, as any kind and good listening sidebar should  But, I am not good at this, and whatever I try I can't get it next to each other... Sorry for extensively explaining it, I just want to make myself perfectly clear so someone can help. And to be sure, I've added a photoshopped screenshot so you can see the result that I'm looking for. What changes do I have to make to the HTML code to get the sidebar nxt to the main content and keep them both centered next to each other? I've added the code below. Many thanks in advance to anyone that can help!! NOTE: you can find the placing of the sidebar under '#rightside' and the content of the sidebar at the bottom of the code under '<div id="rightside">' NOTE2: To actually see where the sidebar is now on the site, please follow the link provided above. 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> <!-- "Quite Big" theme designed by | | | _` | _ \ _ \ __| _` | _ \ _` | | | __ \ | / | _ \ | | ( | __/ ( | | ( | __/ ( | | | | | < | __/ | | \__, |\___|\___/ _| \__, |\___| \__,_|\__,_|_| _|_|\_\_|\___|\__, | |___/ |___/ ____/ http://www.tumblr.com/theme/3531 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="color:Background" content="#ffffff"/> <meta name="color:Title" content="#000000"/> <meta name="color:Text" content="#202020"/> <meta name="color:Minor Text" content="#999999"/> <meta name="color:Line" content="#EEEEEE"/> <meta name="color:Link" content="#49D28D"/> <meta name="color:Hover Link" content="#3FB67A"/> <meta name="color:audio" content="#000000"/> <meta name="color:TopLine" content="#eeeeee"/> <meta name="color:BottomLine" content="#eeeeee"/> <meta name="if:CenterAll" content="0"/> <meta name="font:Heading" content="Futura"/> <meta name="image:Header" content="0"> <meta name="if:Show notes on permalink pages" content="1"> <meta name="if:Show Album Art on Audio Posts" content="1" /> <meta name="if:Ask Enabled" content="0" /> <meta name="font:Description" content="Georgia"/> <meta name="font:Body" content="Georgia"/> <meta name="text:Disqus Shortname" content=""/> <title>{Title}{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" title="RSS" href="{RSS}"/> <style type="text/css"> body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,dl,dt,dd,ul,ol,li,th,td,form,fi eldset,legend,input,textarea{margin:0;padding:0;} html{font-size:14px;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;} h1,h2,h3,h4,h5,h6{font-size:14px;font-weight:normal; padding:5px 0;} abbr,acronym{border:0;} body {background:{color:Background}; color:{color:Text}; font:1em/1.5 {font:Body}; margin:0 0 0 0;} h1, h3 {font-family:{font:Heading};} pre,code {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif} a:link, a:visited {color:{color:Link}; text-decoration:none;} a:hover, a:active {color:{color:Hover Link};} #header {color:{color:Minor Text}; position:relative; margin:-49 auto; padding-top:25px; width:875px;} #header h1 {color:{color:Title}; font-weight:bold; text-align:center; font-size:80px; line-height:65px; margin-bottom:15px; margin-top:-30px; letter-spacing:-.05em;} #header h1 a:link, #header h1 a:visited {color:{color:Title}; display:block;} #header h1 a:hover, #header h1 a:active {color:{color:Hover Link};} #description {font-family:{font:Description}; font-size:12px; text-align:center; line-height:16px; margin-bottom:20px; margin-top:-5px;} #header form {margin-bottom:20px;} #header form input {width:630px;} #header ul {margin:0 -0.25em 1.5em;} #header li {list-style:none; text-transform:lowercase;} #header li a {background:{color:Background}; display:block; padding:0 0.25em; text-decoration:none;} #header li a:hover {background:none;} #container {background-color:{color:Container}; margin:30px auto; padding-top:5px; width:875px} #rightside { width:140px; left:1010px; top:190px; padding-left:10px; padding-bottom:20px; margin: 10px auto; line-height:150%;} #posts {background-color:{color:Background}; border-top:1px solid {color:TopLine}; border-bottom:1px solid {color:BottomLine}; margin:0px; padding:0px; {block:IfCenterAll}text-align:center;{/block:IfCenterAll}font-size:14px;} #posts .post {list-style:none; padding-bottom:10px; max-width:875px; clear:both;} #posts .content {color:{color:Text}; padding:0; margin-left:0px;} #footer {margin:0 auto; max-width:875px; padding-bottom:30px;} #pagination p {font-size:14px; min-width:150px; line-height:16px; margin:0 0 10px; white-space:nowrap;} #pagination p.back {display:inline; text-align:right; float:right; margin-left:20px;} #pagination p.forward {display:inline; float:left; margin-right:1.5em;} #pagination a {font-style:italic;} #pagination .page {text-align:center; font:12px {font:Body}; margin-bottom:20px; text-transform:lowercase;} #credits {clear:both; display:inline; text-align:center; font-size:12px; color:{color:Minor Text}; margin:0; padding:1.5em 0;} #footer a:hover, #footer a:active {text-decoration:none;} p {margin-bottom:25px;} form .submit {height:0; overflow:hidden; display:block;} .meta {float:left; clear:left; width:65px; {block:IfCenterAll}width:875px{/block:IfCenterAll}; font-size:14px; text-align:left; line-height:10px;} .meta h2 {font-size:14px; margin-bottom:5px; border-bottom:1px solid {color:Line};} .meta h2 a {text-decoration:none; display:block; padding:0px 0px;} .meta h2 a:hover {background:none;} .meta p {color:{color:Minor Text}; font-style:italic; margin:0 0 0 1em; text-indent:-0.75em; text-transform:lowercase;} p.meta {color:{color:Minor Text}; font-style:italic; margin:0; width:150px; text-indent:-0.75em; text-transform:lowercase;} .meta a {font-style:normal; white-space:nowrap;} .meta .plays {font-weight:bold; font-style:normal;} h3 {font-size:16px; line-height:20px; padding-bottom:10px; font-weight:bold;} .content a {border-bottom:1px solid {color:Line};} .content a:hover {border-bottom-width:2px;} .content .photo a {border:none !important;} .content ul, .content ol {margin:20px;} .content ul li {list-style:square;} blockquote {margin:0 20px 20px; font-style:italic;} blockquote i, blockquote em, blockquote [lang="ja"] {font-style:normal;} pre, code {font-size:14px; line-height:12px;} pre {background:#e1e1e1; margin:15px; padding:10px; overflow-x:auto;} pre code {display:block;} pre i, code i {font-style:normal; color:{color:Minor Text};} ins {text-decoration:none; font-style:italic;} blockquote ins, em ins, ins em {font-style:normal;} abbr, acronym, .caps {font-size:12px; letter-spacing:0.1em; word-spacing:0.1em;} abbr, acronym {text-transform:uppercase;} .caps {text-transform:uppercase;} .text, .caption {margin-bottom:20px;} .post img, .post object, .post embed {max-width:100%;} .link-post h3 {padding:0; margin-bottom:15px;} .photo-post .photo, .video-post .video {margin-bottom:20px; margin-top:20px; } .quote-post .quote {font-family:{font:Body};} .quote-post .source, .cite {float:right; margin:0 40px 20px 50px; text-indent:-1.5em;} .quote-post .source a:first-child, .cite {letter-spacing:0;} .short-quote .quote, .medium-quote .quote {font-size:14px; line-height:16px; margin:20px 40px 20px 0;} .long-quote .quote {margin:20px;} .audio-post .audio {height:27px; background: {color:audio}; display: block; margin-bottom: 5px; padding: 0px;} .audio-post .audio_player {width:auto;} .chat-post ol {list-style:none; margin:15px 0;} .chat-post li {margin-left:1.5em; text-indent:-1.5em;} .chat-post .label {font-weight:bold; padding-right:0.125em;} .chat-post .speaker {font-style:italic;} .chat-post .speaker2 .label, .chat-post .speaker4 .label, .chat-post .speaker6 .label, .chat-post .speaker8 .label {color:{color:Minor Text};} .chat-post .speaker3 .label, .chat-post .speaker4 .label, .chat-post .speaker7 .label, .chat-post .speaker8 .label {text-transform:uppercase; letter-spacing:0.1em;} .chat-post .speaker5 .label, .chat-post .speaker6 .label, .chat-post .speaker7 .label, .chat-post .speaker8 .label {font-family:{font:Heading};} .day .month {text-transform:uppercase;} {block:DayPage}.day {font-weight:bold;}{/block:DayPage} .content.text-post img { max-width: 100%; } .multi {margin-bottom:30px; margin-right:15px; {block:IfCenterAll}margin-right:10px; margin-left:10px;{/block:IfCenterAll};} .inst { background-color: #49d28d; } .video embed, .video object, .video iframe {width:875px; height:500px;} #comment { font-size: 14px; text-align: left; line-height: 18px; margin: 0px 0px 0px 0px; } #comment a { text-decoration: none; color: {color:Caption}; } #comment a:hover { text-decoration: none; color: {color:Link Hover}; } #dsq-content { background: rgba(0, 0, 0, .30); background: url(' '); padding: 5px 20px 20px 20px; margin-top: 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } {block:PermalinkPage} p.answer_form_container { width: 512px; } ol.notes { width: 875px; list-style-type: none; margin:20px auto; padding: 0; } ol.notes li.note { background: #F7F7F7; margin: 0 0 0px 0; padding: 0 4px; } ol.notes a { color: {color:Links In Notes}; } ol.notes img.avatar { display: none; } ol.notes blockquote { margin: 0; } ol.notes blockquote a { text-decoration: none; } {/block:PermalinkPage} a.install { width: 96px; height: 20px; background: url(http://static.tumblr.com/thpaaos/dHHkt0jor/install_theme.png); display: block; position: absolute; top: 26px; right: 3px; } a { outline: none; } {CustomCSS} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="http://static.tumblr.com/xz44nnc/zNHlmnd4b/jquery.killphotoset.js"></script> <script> $(function () { $(".html_photoset").killPhotoset({ photoSize: 1280 }); }); </script> </head> <body> <div id="container"> <div id="header"> <a href="/"> {block:IfHeaderImage}<h1><img src="{image:Header}" class="logo" /></h1>{/block:IfHeaderImage} {block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}</a> {block:Description}<p id="description"> {Description} </p>{/block:Description} <p> {block:IfCenterAll}<center>{/block:IfCenterAll} {block:Pages} <a class="multi" href="{URL}">{Label}</a> {/block:Pages} {block:IfAskEnabled} <a class="multi" href="/ask">{AskLabel}</a> {block:IfAskEnabled} {block:IfCenterAll}</center>{/block:IfCenterAll}</p> </div> <ol id="posts"><br> {block:Posts} <li class="post" id="post{PostID}"> {block:Text} <div class="meta"> {block:IfCenterAll}<center>{/block:IfCenterAll}<h2> <a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a> </h2>{block:IfCenterAll}</center>{/block:IfCenterAll} </div><br><br> <div class="content text-post"> {block:Title}<h3><span>{Title}</span></h3>{/block:Title} <div class="text">{Body}</div> </div> {/block:Text} {block:Photo} <div class="meta"> {block:IfCenterAll}<center>{/block:IfCenterAll}<h2> <a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a> </h2>{block:IfCenterAll}</center>{/block:IfCenterAll} </div><br> <div class="content photo-post"> <div class="photo"> {block:IndexPage}<a href="{Permalink}">{/block:IndexPage} {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage} <img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}"> {block:IndexPage}</a>{/block:IndexPage} {block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage} </div> {block:Caption}<div class="caption">{Caption}</div>{/block:Caption} </div> {/block:Photo} {block:Photoset} <div class="meta"> {block:IfCenterAll}<center>{/block:IfCenterAll}<h2> <a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a> </h2>{block:IfCenterAll}</center>{/block:IfCenterAll} </div><br> <div class="content photo-post"> <div class="photo"> {Photoset-500} </div> {block:Caption}<div class="caption">{Caption}</div>{/block:Caption} </div> {/block:Photoset} {block:Quote} <div class="meta"> {block:IfCenterAll}<center>{/block:IfCenterAll}<h2> <a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a> </h2>{block:IfCenterAll}</center>{/block:IfCenterAll} </div><br><br> <div class="content quote-post {Length}-quote"> <blockquote class="quote">{Quote}</blockquote> {block:Source}<div class="source">— {Source}</div>{/block:Source} </div> {/block:Quote} {block:Link} <div class="meta"> {block:IfCenterAll}<center>{/block:IfCenterAll}<h2> <a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a> </h2>{block:IfCenterAll}</center>{/block:IfCenterAll} </div><br><br> <div class="content link-post"> <h3 class="link"><a href="{URL}">{Name}</a></h3> {block:Description}<div class="caption">{Description}</div>{/block:Description} </div> {/block:Link} {block:Chat} <div class="meta"> {block:IfCenterAll}<center>{/block:IfCenterAll}<h2> <a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a> </h2>{block:IfCenterAll}</center>{/block:IfCenterAll} </div><br><br> <div class="content chat-post"> {block:Title}<h3>{Title}</h3>{/block:Title} <ol class="chat"> {block:Lines}<li class="{Alt} speaker{UserNumber}"> {block:Label}<span class="label">{Label}</span>{/block:Label} <span class="line">{Line}</span> </li>{/block:Lines} </ol> </div> {/block:Chat} {block:Video} <div class="meta"> {block:IfCenterAll}<center>{/block:IfCenterAll}<h2> <a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a> </h2>{block:IfCenterAll}</center>{/block:IfCenterAll} </div><br> <div class="content video-post"> <div class="video">{Video-500}</div> {block:Caption}<div class="caption">{Caption}</div>{/block:Caption} </div> {/block:Video} {block:Audio} <div class="meta"> {block:IfCenterAll}<center>{/block:IfCenterAll}<h2> <a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a> </h2>{block:IfCenterAll}</center>{/block:IfCenterAll} </div><br><br> {block:IfShowAlbumArtOnAudioPosts} {block:AlbumArt} <div class="album_art"> <img src="{AlbumArtURL}" alt="{block:Artist}{Artist}{/block:Artist}{block:TrackName} - {TrackName}{/block:TrackName}" style="margin-bottom: 5px"/> </div> {/block:AlbumArt} {/block:IfShowAlbumArtOnAudioPosts} <div class="content audio-post"> <div class="audio"> <script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?7"></script> <span id="audio_player_{PostID}">[<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Flash 9</a> is required to listen to audio.]</span> <script type="text/javascript" src="/api/read/json?id={PostID}"></script> <script type="text/javascript"> var color = "FFF700"; var player = tumblr_api_read['posts'][0]['audio-player'].replace("color=FFFFFF", "color=" + color); replaceIfFlash(9, "audio_player_{PostID}", player); </script> </div> <p>plays: <span class="plays">{FormattedPlayCount}</span></p> {block:Caption}<div class="caption">{Caption}</div>{/block:Caption} </div> {/block:Audio} <div class="clear"> </div> </li> {/block:Posts} {block:IfDisqusShortname} {block:Permalink} <div id="disqus"> <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> {/block:Permalink} <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} </div> <!-- .box --> {/block:Posts} </div> <!-- .posts --> <div style="clear: both"></div> {block:PermalinkPage} {block:IfShowNotesOnPermalinkPages} {PostNotes} {/block:IfShowNotesOnPermalinkPages} {block:PermalinkPage} <div style="clear: both;"></div> </ol> <div id="footer"> <div id="pagination"> {block:Pagination} <p class="back"> {block:NextPage} <a href="{NextPage}">next</a> >>> {/block:NextPage}</p> <p class="forward">{block:PreviousPage} <<< <a href="{PreviousPage}">prev</a> {/block:PreviousPage} </p> {/block:Pagination} {block:PermalinkPagination} {block:PreviousPost}<p class="back"> <a href="{PreviousPost}">next</a> >>> </p>{/block:PreviousPost} {block:NextPost}<p class="forward"> <<< <a href="{NextPost}">prev</a> {/block:NextPost}</p> {/block:PermalinkPagination} {block:DayPagination} {block:PreviousDayPage}<p class="back"> <a href="{PreviousDayPage}">next</a> >>> {/block:PreviousDayPage}</p> {block:NextDayPage}<p class="forward"> <<< <a href="{NextDayPage}">prev</a> </p>{/block:NextDayPage} {/block:DayPagination} </div> <br><br /> <center> <a href="/archive">archive</a> // <a href="/random">random post</a> // <a href="{RSS}">RSS</a> <br /> <font size="2"><i>powered by <a href="http://www.tumblr.com/">tumblr</a> - <a href="http://www.tumblr.com/theme/9601">Quite Big theme</a> by <a href="http://georgedunkley.tumblr.com/">George Dunkley</a></i></font></center> </div> </div> </div> <div id="rightside"> <div class="widget"> </div> <p>This column needs to align to the right of the main container. But I can't get it to work...</p> <p>Maybe some links <a href="http://twitter.com/">twitter</a></br> <a href="http://facebook.com/">facebook</a></br> <a href="http://www.flickr.com/">flickr</a></br> <a href="/">website</a></p> <p>Tick a box in the appearance menu to show a list of the blogs you follow (on primary blog only)</p> <p>Advertisement</p> <img src="http://i188.photobucket.com/albums/z152/dunkley2007/ad-2.png" border="0"</a> </div> </div> </div><!--/rightside--> </body> </html> Attached thumbnail(s) 
|
  |
 
|
  |
Replies(1 - 3)
| Darin McGrew |
Jan 4 2012, 12:47 PM
Post
#2
|
|
WDG Member  Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Please see the FAQ entry How do I put links along the left side of my page? It talks about putting the navbar along the left, but the same thing applies for putting it on the right.
|
|
|
|
| ferryll |
Jan 6 2012, 05:34 AM
Post
#3
|
|
Group: Members Posts: 3 Joined: 4-January 12 Member No.: 16,185 |
Dear Darin,
Thank you for the link you provided. I've read the entire FAQ and tried adding the 'table-align' code that is mentioned in the Web Authoring FAQ to the code of my sidebar (identified as #rightside in the html code) However, I'm not getting it to work. Could you, or anyone else, please help with some more specific information on to how to adjust the HTML code accordingly? I've searched the forum for other solutions, but haven't come across any. Thanks again in advance! |
|
|
|
| Darin McGrew |
Jan 6 2012, 10:34 AM
Post
#4
|
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
You've specified the left and top properties, but not the position property.
The online tools report markup and CSS errors: http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes http://jigsaw.w3.org/css-validator/validat...ng=&lang=en Many of the markup errors are caused by mixing HTML into an XHTML document. Pick one or the other, but don't mix them. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 16th April 2024 - 05:05 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC