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

    Tumblr posts overlapping

    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:

    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>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,745
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello psychowave,
    You should know about the box model.

    See the box model here. 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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    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
    •