...

View Full Version : Tumblr posts overlapping



psychowave
01-13-2013, 06:47 AM
Hello,

I need some help with my Tumblr layout, which can be seen here: http://bootypizza.tumblr.com/

As shown, there are two columns of posts. My problem is I keep finding the two columns overlapping with each other in the middle.

You can also see several photos that appear to be stacked up on top of each other for some reason in the page titled "Me"

I'd really appreciate if someone is able to fix this problem for me, as I have very little experience with HTML/CSS and have no idea what to do

Here is the current code:





<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{Title}</title>

<meta name="color:Background" content="#FFFFFF"/>
<meta name="color:Text" content="#000"/>
<meta name="color:Titles" content="#000"/>
<meta name="color:Blog Title" content="#000"/>
<meta name="color:Links" content="#7a7a7a">
<meta name="image:Background" content=""/>
<meta name="if:Infinite Scrolling" content="1"/>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>


<script src="http://static.tumblr.com/me5sfsd/1YFl414t0/jquery142.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="toggle.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".info").hide();
$(".lala").click(function(){
$('.info').slideToggle(500);
return true;
});
});
</script>

{block:IndexPage}
<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<script src="http://static.tumblr.com/twte3d7/C5Bllzh32/masonry.js"></script>
{block:IfInfiniteScrolling}<script src="http://static.tumblr.com/twte3d7/0pellzh2t/infinitescroll.js"></script>{/block:IfInfiniteScrolling}

<script type="text/javascript">
$(window).load(function () {
$('#posts').masonry(),
$('.masonryWrap').infinitescroll({
navSelector : "#nav",
nextSelector : "#nav a#next",
itemSelector : ".entry",
bufferPx : 10000,
extraScrollPx: 11000,
loadingImg : "http://static.tumblr.com/plngtrn/ieqlmwwlc/ajax-loader.gif",
loadingText : "<em></em>",
},
function() { $('#posts').masonry({ appendedContent: $(this) }); }
);
});
</script>
{/block:IndexPage}

<script type="text/javascript" src="scrolltopcontrol.js">
</script>

<script type="text/javascript">


var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://i39.tinypic.com/688s8w.gif" style="filter:alpha(opacity=70); -moz-opacity:0.7; width:50px; height:50px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:10, offsety:10}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},

keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},

togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}

scrolltotop.init()

</script>

<style type="text/css">

body {font-family: verdana; line-height:90%; font-size: 10px; color: {color:Text}; background-color: {color:Background}; background-image:url('{image:Background}'); background-attachment: fixed;}

p{margin:0px; padding-bottom:2px; padding-top:2px;}

blockquote {margin:5px 0 5px 4px;padding:0 5px 0 4px;border-left:2px solid {color:Border}}

h1{margin:0px; padding:0px; color:{color:titles}; font-family: georgia; font-size: 12px; line-height:100%; font-weight:normal; text-transform:camelcase; text-align:left; font-style:italic;}

h2{margin:0px; padding:0px; color:{color:titles}; font-family: georgia; font-size: 12px; line-height:100%; font-weight:normal; text-transform:camelcase; text-align:justify; text-indent:10px; font-style:italic;}

{block:IndexPage}

.top{top:5px; width:520px; text-align:center;}

#center {margin: auto; width: 520px; padding-bottom:20px;}

.entry {margin:0px 3px 6px 3px; width: 250px; float: left;}

.entry img {width: 250px; height: auto; -moz-border-radius: 6px; -webkit-border-radius: 6px;}

img{-webkit-transition: opacity 0.8s linear; opacity: 0.8; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}

img:hover{-webkit-transition: opacity 1.0s linear; opacity: 1.0; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
{/block:IndexPage}

{block:PermalinkPage}
.top{top:5px; width:500px; text-align:center;}

#center {margin: auto; width: 500px; padding-bottom:20px;}

.entry {width: 500px;}

{/block:PermalinkPage}

a:link, a:visited, a:active{color:{color:links}; text-decoration:none; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; transition: color 0.5s ease-out;}

a:hover{color:{color:Text};}

.post_title {font-family: {font:Heading}; text-transform: uppercase; font-size: 13px; letter-spacing: -1px;}

.blogtitle {color: {color:Blog Title}; font-family: lobster; font-size:24px; line-height:24px; text-transform:lowercase; font-style:italic; letter-spacing:1px; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; transition: color 0.5s ease-out;}

.blogtitle:hover{color: {color:text};}

.wordy{word-spacing:5px;}

.links{font-family: cambria; font-size:10px; line-height:100%; letter-spacing:2px;}

.links a:hover{color:{color:titles}; font-style:italic;}

.label {font-weight: bold; margin-right: 10px;}

#posts {padding: 10px 0px 0px 0px;}

.date{font-size:100%; color:{color:text}; font-style:normal; display:inline; margin:0px 5px 0px 5px;}

.permapage{text-align:center; margin-top:10px;}

ol.notes {list-style-type: none; border-bottom: dotted 0px #000; width: 500px; margin-left: 0px; margin-left: -35px; font-size: 10px; margin-top: -5px; margin-bottom: -5px;}

ol.notes a {font-weight: normal;}

ol.notes li.note {border-top: dotted 0px #000; padding: 0px; text-align: justify; margin-bottom: -1px; opacity: .7; -webkit-transition-duration: .4s;}

ol.notes li.note:hover {opacity: 1;}

ol.notes li.note img.avatar {display: none;}

ol.notes li.note span.action {font-weight: normal;}

ol.notes li.note .answer_content {font-weight: normal;}

ol.notes li.note blockquote {margin: 0px;}

ol.notes li.note blockquote a {decoration: none;}

#nav {padding: 10px 20px 10px 20px; font-family: {font:Heading}; {block:IfInfiniteScrolling}display: none;{/block:IfInfiniteScrolling}}

.left {text-align: center; width: 100%; display: inline-block;}

.right {text-align: right; width: 50%; display: inline-block;}

#nav a {border: none; text-transform: uppercase; font-weight: bold; font-size: 12px; -webkit-transition-duration: 1s;}

#nav a:hover {opacity: .7;}

.bod blockquote, .caption blockquote {margin: 0px; border-left: 2px solid; padding-left: 5px; margin-left: 5px;}

.perma {padding: 4px 4px 2px 4px; width:242px; font-size: 12px; font-family: georgia; opacity: 0; font-style:italic; background-color: {color:background}; color:#000; position: absolute; bottom:0px; -webkit-transition-duration: 1s; -webkit-transition: opacity 0.0s linear; opacity: 0.0; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}

.dates{float:left;}

.entry:hover .perma {opacity: 1; -webkit-transition: opacity 0.8s linear; opacity: 0.8; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}

.audio{width:250px; background-color:black;}

{block:IndexPage}
div.vid_photoset embed, div.entry div.vid_photoset object {width:250px !important; height:170px !important;}
{/block:IndexPage}

{block:PermalinkPage}
div.vid_photoset embed, div.entry div.vid_photoset object {width:500px !important; height:340px !important;}
{/block:PermalinkPage}

::-webkit-scrollbar-thumb:vertical {background-color: {color:Font}; height:100px;}

::-webkit-scrollbar-thumb:horizontal {background-color: {color:Font}; height:10px !important;}

::-webkit-scrollbar {height:10px; width:7px; background-color: {color:Background};}

.credit{top:5px; left:5px; position:fixed; background:#000; -moz-border-radius: 9px; -webkit-border-radius: 9px; padding:4px; color:#fff;}


{CustomCSS}

img, a img {

max-width:400px !important;


border: 0px !important;

</style>

</head>

<body>


<div id="center">

<div class="top">
<a href="/"><div class="blogtitle">{Title}</div></a><p>

{description}<p>

<div class="wordy">
<span class="links"><a href="/archive">archive</a></span>
{block:AskEnabled}<span class="links"><a href="/ask">message</a></span>{/block:AskEnabled}
<span class="links"><a href="/me">me</a></span>
</div>

</div>

<div id="posts">

{block:Posts}

{block:Text}
<div class="entry">
{block:Title}<h1>{Title}</h1>{/block:Title}<div class="bod">{Body}</div>
{block:IndexPage}<div class="perma"> <span class="dates"><a href="{ReblogURL}" title="Reblog this Post">Reblog</a> / <a href="{Permalink}">{block:Date}{ShortMonth} {MonthNumberWithZero} {12Hour}:{Minutes}{/block:Date} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</span></a></div>{/block:IndexPage}
</div>
{/block:Text}

{block:Photo}
<div class="entry">
{LinkOpenTag}{block:indexpage}<a href="{Permalink}"><img src="{PhotoURL-500}" width="400px" alt="{PhotoAlt}"/></a>{/block:indexpage}{block:permalinkpage}{LinkOpenTag}<img src="{PhotoURL-500}" width="500px" alt="{PhotoAlt}"/>{LinkCloseTag}{/block:permalinkpage}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{block:IndexPage}<div class="perma"> <span class="dates"><a href="{ReblogURL}" title="Reblog this Post">Reblog</a> / <a href="{Permalink}">{block:Date}{ShortMonth} {DayOfMonthWithZero} {12Hour}:{Minutes}{/block:Date} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</span></a></div>{/block:IndexPage}
</div>
{/block:Photo}

{block:Photoset}
<div class="entry">
<div class="vid_photoset">{block:IndexPage}{Photoset-250}{/block:IndexPage}{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}</div>
{block:IndexPage}<div class="perma"> <span class="dates"><a href="{ReblogURL}" title="Reblog this Post">Reblog</a> / <a href="{Permalink}">{block:Date}{ShortMonth} {MonthNumberWithZero} {12Hour}:{Minutes}{/block:Date} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</span></a></div>{/block:IndexPage}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photoset}

{block:Answer}
<div class="entry" id="answer">
<h1><div class="asker">{Asker} asked: {Question}<p></div></h1>
<div style="border-top:1px solid {color:text};"><p>{Answer}</div>
{block:IndexPage}<div class="perma"> <span class="dates"><a href="{ReblogURL}" title="Reblog this Post">Reblog</a> / <a href="{Permalink}">{block:Date}{ShortMonth} {MonthNumberWithZero} {12Hour}:{Minutes}{/block:Date} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</span></a></div>{/block:IndexPage}
</div>
{/block:Answer}

{block:Quote}
<div class="entry" id="quote">
<h1>{Quote}</h1>
{block:Source}&mdash; {Source}{/block:Source}
{block:IndexPage}<div class="perma"> <span class="dates"><a href="{ReblogURL}" title="Reblog this Post">Reblog</a> / <a href="{Permalink}">{block:Date}{ShortMonth} {MonthNumberWithZero} {12Hour}:{Minutes}{/block:Date} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</span></a></div>{/block:IndexPage}
</div>
{/block:Quote}

{block:Link}
<div class="entry">
<h1><a href="{URL}" class="link" {Target}>{Name}</a></h1>
{block:Description}{Description}{/block:Description}
{block:IndexPage}<div class="perma"> <span class="dates"><a href="{ReblogURL}" title="Reblog this Post">Reblog</a> / <a href="{Permalink}">{block:Date}{ShortMonth} {MonthNumberWithZero} {12Hour}:{Minutes}{/block:Date} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</span></a></div>{/block:IndexPage}
</div>
{/block:Link}

{block:Chat}
<div class="entry" id="chat">
{block:Title}<div class="post_title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
{block:Lines}<span style="align:left"><div class="{Alt} user_{UserNumber}">{block:Label}
<span class="label">{Label}</span>{/block:Label}{Line}</div>{/block:Lines}</span>
{block:IndexPage}<div class="perma"> <span class="dates"><a href="{ReblogURL}" title="Reblog this Post">Reblog</a> / <a href="{Permalink}">{block:Date}{ShortMonth} {MonthNumberWithZero} {12Hour}:{Minutes}{/block:Date} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</span></a></div>{/block:IndexPage}
</div>
{/block:Chat}

{block:Video}
<div class="entry">
<div class="vid_photoset">{Video-500}</div>
{block:IndexPage}<div class="perma"> <span class="dates"><a href="{ReblogURL}" title="Reblog this Post">Reblog</a> / <a href="{Permalink}">{block:Date}{ShortMonth} {MonthNumberWithZero} {12Hour}:{Minutes}{/block:Date} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</span></a></div>{/block:IndexPage}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Video}

{block:Audio}
<div class="entry">
<div class="audio">{AudioPlayerBlack}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{block:IndexPage}<div class="perma"> <span class="dates"><a href="{ReblogURL}" title="Reblog this Post">Reblog</a> / <a href="{Permalink}">{block:Date}{ShortMonth} {MonthNumberWithZero} {12Hour}:{Minutes}{/block:Date} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</span></a></div>{/block:IndexPage}
</div>
{/block:Audio}

{block:PermalinkPage}
<div class="permapage">

{block:RebloggedFrom}(source: <a href="{ReblogRootURL}">{ReblogRootName}</a>, via:
<a href="{ReblogParentURL}">{ReblogParentName}</a>)<p><p>{/block:RebloggedFrom}

<span class="date">{block:Date}{ShortMonth} {DayOfMonth}, {Year}{/block:Date}</span>


<span class="date">{block:HasTags}Tags: {block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}</span>{/block:HasTags}


<span class="date">{block:ContentSource}
<a href="{SourceURL}">
{block:SourceLogo}
<img src="{BlackLogoURL}" width="{LogoWidth}"
height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}
{/block:NoSourceLogo}
</a>
{/block:ContentSource}</span>


<span class="date">{block:NoteCount}&hearts; {NoteCountWithLabel}{/block:NoteCount}</span>


<span class="date">{block:Date}@{12Hour}: {Minutes}{AmPm}{/block:Date}</span>
<p><p><p>

</div>
{/block:PermalinkPage}

{block:PostNotes}
{PostNotes}
{/block:PostNotes}

{/block:Posts}

</div>

{block:Pagination}<div id="nav"><div class="left">{block:NextPage}<a href="{NextPage}" id="next">Next</a>{/block:NextPage} {block:PreviousPage}<a href="{PreviousPage}" id="previous">Previous</a>{/block:PreviousPage}</div></div>{/block:Pagination}

</div>


<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js"></script>


</body>

Excavator
01-13-2013, 08:59 AM
Hello psychowave,
You should know about the box model.

See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum