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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with adding a sidebar/div to a TUMBLR. (personal blog for my work)

    Hey guys! Basically I have started working on trying to get a new blog up and going since wordpress got to be a bit pricey to host after a while and tumblr is free, but I will be masking my domain over it for my blog.

    My current blog address will me here for now: http://joshuakweaver.tumblr.com/

    Basically there is no real content up, just place holder stuff.

    I am trying to make it look similar to something like this:
    http://juliaariellecox.tumblr.com/

    Everything for the most part is in place kinda sorta, except the major issue I am having is adding the sidebars. Everytime I try to code in a sidebar it messes up everything, it doesn't float and stay fixed but pushes everything down or down content wise. I want to be able to just place content in here including possible widgets, photos, links, etc.



    Here is my current code for my tumblr listed


    Code:
      <!-- Smart Minimal Tumblr theme created by QBKL Studio - http://QBKL.net -->
    
    <!doctype html>
    <html lang="en">
    <head>
    
    	<title>{Title}{block:SearchPage}, {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
    
    	<link rel="shortcut icon" href="{Favicon}" />
    	<link rel="apple-touch-icon" href="{PortraitURL-128}"/>
        <link rel="alternate" type="application/rss+xml" href="{RSS}" />
    
    	<meta name="color:Background" content="#111"/>
    	<meta name="image:Background" content=""/>
    	<meta name="if:Autostretch Background Image" content="1"/>
    	<meta name="image:Header" content=""/>
    	<meta name="color:Header Background" content="#ccc"/>
    	<meta name="color:Header Text Color" content="#888"/>
    	<meta name="text:Title Font Size" content="48"/>
    	<meta name="color:Link Color" content="#f03"/>
    	<meta name="color:Link Hover Color" content="#000"/>
    	<meta name="color:Footer Text Color" content="#666"/>
    	<meta name="color:Footer Link Color" content="#cccccc"/>
    	<meta name="color:Footer Link Hover Color" content="#f03"/>
    	<meta name="text:Facebook Username" content=""/>
    	<meta name="text:Twitter Username" content=""/>
    	<meta name="text:Flickr Username" content=""/>
    	<meta name="text:Dribbble Username" content=""/>
    	<meta name="text:LinkedIn Username" content=""/>
    
    	<meta charset="utf-8" />
    	<meta name="viewport" content="width=620,user-scalable=yes" />
    	<meta name="author" content="QBKL Studio - http://qbkl.net" />
    	{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
    
    	<!-- Including jQuery -->
    	<script src="http://code.jquery.com/jquery.min.js"></script>
    
    	<!-- Including: Backstretch jQuery plugin -->
    	<script src="http://static.tumblr.com/tmrjmfe/xS0m3odmr/jquery.backstretch.min.js"></script>
    
    	<!--[if lt IE 9]>
    	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    	<![endif]-->
    
    	<!-- Including Google Fonts -->
    	<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    	<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    	<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    	<!-- Theme's stylesheet -->
    	<style type="text/css">
    
    		/* HTML5 Fix */
    		section, article, header, footer, nav, aside, hgroup { display: block; }
    
    		/* Clear fix */
    
    		.clearfix:after {
    			content: ".";
    			display: block;
    			height: 0;
    			font-size: 0;
    			clear: both;
    			visibility: hidden;
    		}
    
    		.clearfix {display: inline-block;}
    
    		/* Hides from IE5/Mac \*/
    		* html .clearfix { height: 1px; }
    
    		.clearfix { display: block; }
    		/* End hide from IE5/Mac */
    
            body {
    			background: {color:Background} url('{image:Background}') top left fixed repeat;
                margin: 0 auto;
                padding: 30px 0;
                font-family: Asap, Arial, Helvetica, sans-serif;
    			font-size: 12px;
    			color: black;
            }
    
    		#wrap {
    			width: 615px;
    			margin: 0 auto;
    			padding: 0px;
    			background: #fff;
    		}
    
    		a {
    			color: {color:Link Color};
    			text-decoration: none;
    		}
    
    		a:hover {
    			color: {color:Link Hover Color};
    			text-decoration: none;
    		}
    
    		h2 { font-size: 24px; }
    		h3 { font-size: 18px; }
    		h4 { font-size: 14px; }
    		h5 { font-size: 12px; }
    		h6 { font-size: 10px; }
    
    		/* Header */
            
            
        #social {
    			margin: 0;
    			padding: 0px 600px;
    			list-style: none;
    			display: block;
    			font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
    			text-transform: uppercase;
    			font-size: 9px;
    			font-weight: bold;
    			text-align: left;
    		}
    
    		#social a { color: #666; }
    
    		#social a:hover { color: {color:Link Hover Color}; }
    
    		#social li {
    			float: left;
    			display: right;
    			margin: 0px 0px 0px 0px;
    		}
    
    		#header {
    			padding: 200px 600px ;
                margin: -10px 0 0px -295px;
    			text-align: center;
    			border-top: 2px solid {color:Link Color};
    			border-bottom: 1px solid #ccc;
    			background: {color:Header Background} url('{image:Header}') repeat top left;
    			color: {color:Header Text Color};
    		}
    
    		#header a {
    			color: {color:Header Text Color};
    			text-decoration: none;
    		}
            
            
            .blog-title {
    			margin: 0;
    			padding: 0;
    			font-size: {text:Title Font Size}px;
    			line-height: {text:Title Font Size}px;
    			text-transform: uppercase;
    			font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
    			font-weight: 300;
    			font-weight: normal;
    			color: {color:Header Text Color};
    		}
    
    		.blog-description {
    			margin-top: 15px;
    			font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
    			font-size: 11px;
    			font-weight: bold;
    			text-transform: uppercase;
    			font-weight: bold;
    			color: {color:Header Text Color};
    		}
    
    		#nav {
    			padding: 10px 0;
    			border-bottom: 1px solid #ccc;
    			font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
    			text-transform: uppercase;
    			font-size: 11px;
    			font-weight: bold;
    		}
    
    		#nav ul {
    			margin: 0;
    			padding: 0;
    			list-style: none;
    			text-align: center;
    			display: block;
    		}
    
    		#nav ul li {
    			display: inline-block;
    			margin: 0 10px;
    		}
    
    		/* Main */
    
    		.post {
    			margin-top: 50px;
    			line-height: 1.5em;
    		}
    
    		.post-permalink-date {
    			font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
    			text-transform: uppercase;
    			border-top: 2px solid {color:Link Color};
    			margin: 0 0 10px 0;
    			padding: 0;
    			text-align: center;
    			color: {color:Link Color};
    		}
    
    		.post-permalink-date h6 {
    			position: relative;
    			top: -11px;
    			margin: 0;
    			padding: 0;
    			font-size: 10px;
    			font-weight: bold;
    		}
    
    		.post-permalink-date h6 span {
    			padding: 0 10px;
    			background: #fff;
    		}
    
    		.post .caption blockquote {
    			margin: 0;
    			padding: 5px 10px;
    			background: #f5f5f5;
    		}
    
    		/* Common post elements */
    
    		.post-text h3, .post-chat h3, .post-audio h3 {
    			font-size: 24px;
    			margin: 0 0 30px 0;
    			padding: 0;
    			text-align: center;
    			font-weight: normal;
    		}
    
    		.post-text h3 a, .post-chat h3 a, .post-audio h3 a {
    			color: #000;
    		}
    
    		.post-text h3 a:hover, .post-chat h3 a:hover, .post-audio h3 a:hover {
    			color: {color:Link Color};
    		}
    
    		/* Text post */
    
    		.post-text p:first-child {
    			margin-top: 0;
    			padding-top: 0;
    		}
    
    		/* Quote post */
    
    		.post-quote .quote {
    			font-size: 24px;
    			font-style: italic;
    			line-height: 1.2em;
    		}
    
    		.post-quote .source {
    			margin-top: 10px;
    			display: block;
    			text-align: right;
    		}
    
    		/* Chat post */
    
    		.post-chat ul.chat {
    			margin: 0;
    			padding: 0;
    			list-style: none;
    		}
    
    		.post-chat ul.chat li {
    			display: block;
    			padding: 5px 10px;
    		}
    
    		.post-chat ul.chat li span {
    			display: inline-block;
    			width: 100px;
    			font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
    			font-size: 10px;
    			font-weight: bold;
    			text-transform: uppercase;
    		}
    
    		.post-chat ul.chat li.odd {
    			background: #f5f5f5;
    		}
    
    		/* Audio post */
    
    		.audio-player {
    			width: 350px;
    			float: left;
    		}
    
    		.album-art {
    			width: 100px;
    			float: right;
    		}
    
    		/* Post meta */
    
    		.post-meta {
    			margin: 20px 0 0 0;
    			padding: 10px 0;
    			border-top: 1px solid #ccc;
    			border-bottom: 1px solid #ccc;
    			font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
    			font-size: 10px;
    			font-weight: bold;
    			text-transform: uppercase;
    		}
    
    		.post-reblog { float: left;	}
    
    		.post-tweet, .post-love, .post-note-count {
    			float: right;
    			margin-left: 20px;
    		}
    
    		.post-tweet a {
    			background: url(http://static.tumblr.com/hlp3vy9/Gdgm3tv0z/i-tweet.gif) no-repeat center left;
    		}
    
    		.post-love a {
    			background: url(http://static.tumblr.com/tmrjmfe/zPEm3odx7/i-reblog.gif) no-repeat center left;
    		}
    
    		.post-note-count a {
    			background: url(http://static.tumblr.com/tmrjmfe/xfcm3odwn/i-notes.gif) no-repeat center left;
    		}
    
    		.post-tweet a, .post-love a, .post-note-count a {
    			color: #666;			
    			padding-left: 12px;
    		}
    
    		.post-tweet a:hover, .post-love a:hover, .post-note-count a:hover { color: #000; }
    
    		.post-notes { margin-top: 50px; }
    
    		.post-notes .notes {
    			margin: 0;
    			padding: 0;
    			list-style: none;
    			font-size: 11px;
    		}
    
    		.post-notes .notes li {
    			margin: 0;
    			padding: 5px 0;
    			border-bottom: 1px solid #ccc;
    		}
    
    		.post-notes .avatar { display: none; }
    
    		.more_notes_link_container { border: none!important; }
    
    		.more_notes_link {
    			font-size: 10px;
    			font-weight: bold;
    			text-transform: uppercase;
    		}
    
    		/* Pagination */
    
    		.pagination {
    			margin-top: 50px;
    			padding: 10px 0 0 0;
    			border-top: 1px solid #ccc;
    			font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
    			font-size: 10px;
    			font-weight: bold;
    			text-transform: uppercase;
    		}
    
    		.pagination .page-previous {
    			width: 30%;
    			float: left;
    		}
    
    		.pagination .page-next {
    			width: 30%;
    			float: right;
    			text-align: right;
    		}
    
    		.pagination .page-current {
    			width: 40%;
    			float: left;
    			text-align: center;
    		}
    
    		/* Footer */
    
    		#footer {
    			width: 600px;
    			margin: 0 auto;
    			padding: 10px 0 0 0;
    			font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
    			font-size: 10px;
    			font-weight: bold;
    			text-transform: uppercase;
    			color: {color: Footer Text Color};
    		}
    
    		#footer a { color: {color:Footer Link Color}; }
    
    		#footer a:hover { color: {color:Footer Link Hover Color}; }
    
    		#footer ul {
    			margin: 0;
    			padding: 0;
    			list-style: none;
    		}
    
    		#footer ul li {
    			margin: 0 30px 0 0;
    			padding: 0;
    			float: left;
    		}
    
    		#footer ul li.copyright {
    			margin: 0;
    			padding: 0;
    			float: right;
    		}
            
         <style>
    
    		{CustomCSS}
    	</style>
    
    </head>
    
    <body>
    
    	<div id="wrap">
    	
    		<!-- Start: Header -->
    		<ul id="social" class="clearfix">
    			{block:IfLinkedInUsername}<li><a href="http://www.linkedin.com/in/{text:LinkedIn Username}" target="_blank">LinkedIn</a></li>{/block:IfLinkedInUsername}
    			{block:IfDribbbleUsername}<li><a href="http://dribbble.com/{text:Dribbble Username}" target="_blank">Dribbble</a></li>{/block:IfDribbbleUsername}
    			{block:IfFlickrUsername}<li><a href="http://www.flickr.com/people/{text:Flickr Username}" target="_blank">Flickr</a></li>{/block:IfFlickrUsername}
    			{block:IfTwitterUsername}<li><a href="http://twitter.com/{text:Twitter Username}" target="_blank">Twitter</a></li>{/block:IfTwitterUsername}
    			{block:IfFacebookUsername}<li><a href="http://www.facebook.com/{text:Facebook Username}" target="_blank">Facebook</a></li>{/block:IfFacebookUsername}
    		</ul>
    		<header id="header">
    			<h2 class="blog-title"><a href="/">{Title}</a></h2>
    			<div class="blog-description">{Description}</div>
    		</header>
    		<nav id="nav">
    			<ul>
    				{block:HasPages}
    				{block:Pages}<li><a href="{URL}">{Label}</a></li>{block:Pages}
    				{/block:HasPages}
    				{block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
    				{block:SubmissionsEnabled}<li><a href="/submit">Submit</a></li>{/block:SubmissionsEnabled}
    				<li><a href="/archive">Archive</a></li>
    				<li><a href="/random">Random</a></li>
    				<li><a href="{RSS}">RSS</a></li>
    			</ul>
    		</nav>
    		<!-- End: Header -->
      
    		<!-- Start: Main -->
          
    		<div id="main">
    			{block:Posts}
    			<div class="post">
    				<div class="post-permalink-date">{block:Date}<h6><span><a href="{Permalink}">{DayOfMOnth}{DayOfMonthSuffix} {ShortMonth} {Year}</a></span></h6>{/block:Date}</div>
    				{block:Text}
    					<div class="post-text">
    						{block:Title}
    							<h3><a href="{Permalink}">{Title}</a></h3>
    						{/block:Title}
    
    						{Body}
    					</div>
    				{/block:Text}
    
    				{block:Photo}
    					<div class="post-photo">
    						{LinkOpenTag}<img src="{PhotoURL-highres}" alt="{PhotoAlt}" />{LinkCloseTag}
    
    						{block:Caption}
    							<div class="caption">{Caption}</div>
    						{/block:Caption}
    					</div>
    				{/block:Photo}
    
    				{block:Photoset}
    					<div class="post-photoset">
    						{Photoset-615}
    
    						{block:Caption}
    							<div class="caption">{Caption}</div>
    						{/block:Caption}
    					</div>
    				{/block:Photoset}
    
    				{block:Quote}
    					<div class="post-quote">
    						<div class="quote">"{Quote}"</div>
    
    						{block:Source}
    							<div class="source"><strong>Source:</strong> {Source}</div>
    						{/block:Source}
    					</div>
    				{/block:Quote}
    
    				{block:Link}
    					<div class="post-link">
    						<h3><a href="{URL}" class="link" {Target}>{Name}</a></h3>
    
    						{block:Description}
    							<div class="description">{Description}</div>
    						{/block:Description}
    					</div>
    				{/block:Link}
    
    				{block:Chat}
    					<div class="post-chat">
    						{block:Title}
    							<h3><a href="{Permalink}">{Title}</a></h3>
    						{/block:Title}
    
    						<ul class="chat">
    							{block:Lines}
    								<li class="{Alt} user_{UserNumber}">
    									{block:Label}
    										<span class="label">{Label}</span>
    									{/block:Label}
    
    									{Line}
    								</li>
    							{/block:Lines}
    						</ul>
    					</div>
    				{/block:Chat}
    
    				{block:Video}
    					<div class="post-video">
    						{Video-615}
    
    						{block:Caption}
    							<div class="caption">{Caption}</div>
    						{/block:Caption}
    					</div>
    				{/block:Video}
    
    				{block:Audio}
    					<div class="post-audio clearfix">
    						<h3><a href="{Permalink}">{block:Artist}{Artist}{/block:Artist}{block:TrackName} - {TrackName}{/block:TrackName}</a></h3>
    						<div class="audio-player">
    							{AudioPlayerGrey}
    
    							{block:Caption}
    							<div class="caption">{Caption}</div>
    							{/block:Caption}
    						</div>
    						{block:AlbumArt}
    						<div class="album-art">						
    							<img src="{AlbumArtURL}" alt="{Artist}" title="{Artist}" width="100" />
    						</div>
    						{/block:AlbumArt}
    					</div>
    				{/block:Audio}
    
    				<!-- Start: Post meta -->
    				<div class="post-meta clearfix">
    					{block:RebloggedFrom} <div class="post-reblog">From <a href="{ReblogParentURL}">{ReblogParentTitle}</a> by <a href="{ReblogRootURL}">{ReblogRootTitle}</a></div>{/block:RebloggedFrom}
    					<div class="post-tweet"><a href="http://twitter.com/home?status={ShortURL} from '{Title}'">Tweet</a></div>
    					<div class="post-love"><a href="{ReblogURL}" title="Reblog This Post">Reblog</a></div>
    					<div class="post-note-count">{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</div>
    				</div>
    				<!-- End: Post meta -->
    
    				<!-- Start: Post notes -->
    				{block:PostNotes}
    				<div class="post-notes">
    					<div class="post-permalink-date"><h6><span>This post has {NoteCountWithLabel}</span></h6>{/block:Date}</div>
    					{PostNotes}
    				</div>
    				{/block:PostNotes}
    				<!-- End: Post notes -->
    			</div>
                {/block:Posts}
    
    			{block:Pagination}
    			<div class="pagination clearfix">
    				<div class="page-previous">{block:PreviousPage}<a href="{PreviousPage}"> Previous</a>{/block:PreviousPage}&nbsp;</div>
    				<div class="page-current">Page {CurrentPage} of {TotalPages}</div>
    				<div class="page-next">{block:NextPage}<a href="{NextPage}">Next </a>{/block:NextPage}</div>
    			</div>
    			{block:Pagination}
    		</div>
    		<!-- End: Main -->
    	</div>
    
    	<!-- Start: Footer -->
    	<footer id="footer">
    		<ul class="clearfix">
    			<li><a href="/archive">Archive</a></li>
    			<li><a href="/random">Random</a></li>
    			<li><a href="{RSS}">RSS</a></li>
    			<li class="copyright">&copy;{CopyrightYears} Powered by <a href="http://tumblr.com">Tumblr</a>. 'Smart Minimal' theme by <a href="http://qbkl.net" title="Custom theme design" target="_blank">QBKL Studio</a>.</li>
    		</ul>
    	</footer>
    	<!-- End: Footer -->
        
            
    
    	{block:IfAutostretchBackgroundImage}
    	<script>
    	jQuery(document).ready(function($) {
    		$.backstretch('{image:Background}');
    	});
    	</script>
    	{/block:IfAutostretchBackgroundImage}
    </body>
    </html>

    Help would be greatly appreciated as I have spent hours trying to make it work!

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Your page has two doctype declarations and doesn't validate. I stopped looking after this..

    But assuming this is corrected, floats will drop if they are too wide for the area you are trying to place them in. Their total width is determined by summing their margins and padding (left and right) and width.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    jweaverfl (09-10-2012)

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you, so is there anyway to fix this? Or is there a better way to possibly code this to make it work? Sorry, super new to coding but trying to learn as much as I can.


  •  

    Tags for this Thread

    Posting Permissions

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