Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Web Site Functionality _ How do I keep my image within the column border? Tumblr, Posts that include usernames bleed over the column border on the right side

Posted by: lonelybabes Aug 27 2018, 08:32 PM

Hi there,

So on Tumblr I'm having an issue with posts bleeding off the column border to the right. I've noticed that they're all images that include the user's name where as the ones that are fine do not. I've tried googling it a lot but I'm not able to find the answer anywhere
Here's all the code for the page:

<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
<meta name="text:post width" content="500" />
<meta name="font:text" content="baskerville" />
<meta name="color:background" content="#ffffff" />
<meta name="text:font size" content="11" />
<meta name="if:CustomLink1" content="0">
<meta name="if:CustomLink2" content="0">
<meta name="if:CustomLink3" content="0">
<meta name="if:CustomLink4" content="0">
<meta name="if:CustomLink5" content="0">
<meta name="text:Link 1 Title" content="custom link">
<meta name="text:Link 1" content="http://">
<meta name="text:Link 2 Title" content="custom link">
<meta name="text:Link 2" content="http://">
<meta name="text:Link 3 Title" content="custom link">
<meta name="text:Link 3" content="http://">
<meta name="text:Link 4 Title" content="custom link">
<meta name="text:Link 4" content="http://">
<meta name="text:Link 5 Title" content="custom link">
<meta name="text:Link 5" content="http://">
{/block:Description}

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<style type="text/css">

iframe#tumblr_controls {
white-space:nowrap; filter: invert(100%); -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%);opacity:0.4;position:fixed;}

body {
font-family:{font:Text};
font-size:11px;
background-color:{color:Background};
}

a {
text-decoration:none;
color:black;
}

#content {
width:100%;
}


#content .posts {
width:815px;
margin-left:auto;margin-right:auto;
}
.entry {
{block:IndexPage}width:250px;margin-right:20px;margin-bottom:20px;{/block:IndexPage}
{block:PermalinkPage}width:700px;
margin-left:auto;margin-right:auto;{/block:PermalinkPage}
}
.entry img {-webkit-transition: all 0.6s linear;
{block:IndexPage}width:250px;{/block:IndexPage}
{block:PermalinkPage}width:700px;{/block:PermalinkPage}
margin-bottom:-2px;
}
}


blockquote {
margin-left:5px;
padding-left:5px;
line-height:180%;
border-left:1px solid black;
}


.perm {
color:black;
font-size:7px;
opacity: 0;
-webkit-transition-duration: 1s;
top:0px;padding:10px;
background-color: #fff;
position: absolute;
margin-top:0px;
text-align:center;
text-transform:Uppercase;
font-family:trebuchet ms;
letter-spacing:1px;
display:block;
right:0px;
}


.entry:hover .perm {
opacity:0.7;
z-index:999999;
}

.audiobox {width: 26px!important;background-color:white;top:45%;left:45%;display:block;position:absolute;padding-right:10px;padding-left:10px;padding-top:10px;padding-bottom:10px;border-radius:50px;opacity:0.7;}
{block:IndexPage}
.entry:hover {
-webkit-transition-duration:0.5s;
padding-bottom:3px;
}
{/block:IndexPage}
.cl a {
font-style:italic;padding-left:7px;padding-right:7px;
}

.cl a:hover {
font-style:normal;
}


.header {
margin-top:50px;margin-bottom:25px;
border-bottom:1px solid black;
padding:10px;width:780px;margin-left:auto;margin-right:auto;
text-align:Right;
}

.pn ul{
list-style-type: none;}
.pn li{
list-style-type: none;}
.pn {height:200px;width:700px;overflow:scroll;list-style-type: none;}
</style>


{block:IndexPage}
<script src="http://static.tumblr.com/twte3d7/0pellzh2t/infinitescroll.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/me5sfsd/12Qlmj66n/script.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $wall = $('.posts');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '.entry',
isAnimated : true
});
});
$wall.infinitescroll({
navSelector : "div#navigation",
nextSelector : "div#navigation a#nextPage",
itemSelector : '.entry',
loadingImg : "",
loadingText : " ",
donetext : " ",
extraScrollPx : 0,
bufferPx : 10000,
debug : false,
errorCallback: function() {
$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems, {isAnimated: true, animationOptions: {duration: 250, easing: 'linear', queue: false}}, function(){$newElems.fadeIn('slow');} );
});
}); $('.posts').show(500);
});
</script>
{/block:IndexPage}

<script type="text/javascript">
$(window).load(function(){
$("p").remove(":contains('(Source:')");
$("p").remove(":contains('(source:')");
$("p").remove(":contains('(via ')");
});
</script>


{block:indexpage}
<script language="JavaScript">
function function1(){
window.scrollTo(0,5);
}
function function2(){
window.scroll(0,2);
}
</script>

{/block:indexpage}

</head>
<body>
<div id="content">
<div class="header"><A href="/"><big><big><i>{Title}</i></big></big></a>{block:Description}<br><br>{Description}{/block:Description}<span class="cl">
<br><br><a href="/">home</a>
<a href="/ask">inbox</a>
{block:IfCustomLink1}
<a href="{text:Link 1}">{text:Link 1 Title}</a>
{/block:IfCustomLink1}
{block:IfCustomLink2}
<a href="{text:Link 2}">{text:Link 2 Title}</a>
{/block:IfCustomLink2}
{block:IfCustomLink3}
<a href="{text:Link 3}">{text:Link 3 Title}</a>
{/block:IfCustomLink3}
{block:IfCustomLink4}
<a href="{text:Link 4}">{text:Link 4 Title}</a>
{/block:IfCustomLink4}
{block:IfCustomLink5}
<a href="{text:Link 5}">{text:Link 5 Title}</a>
{/block:IfCustomLink5}
{block:HasPages}
{block:Pages}
<a href="{URL}">{Label}</a>
{/block:Pages}
{/block:HasPages}
<a href="http://modernise.us">theme</a>
</span></div>
<div class="posts">

{block:IndexPage}<div class="column navigation" id="navigation">
{block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}{/block:Pagination}
</div>{/block:IndexPage}

<br style="clear:both;" />


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

{block:Text}
{block:Title}
<span style="font-size:12px;"><a href="{Permalink}"> {Title}</a></span>
{/block:Title}
<div class="text">{Body}</div>
{/block:Text}

{block:Photo}
{block:IndexPage}<a href="{Permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>{/block:IndexPage}
{block:PermalinkPage}<a href="{PhotoURL-HighRes}"><img src="{PhotoURL-HighRes}"></a>{/block:PermalinkPage}
{/block:Photo}



{block:Photoset}
<div class="padding-title">
{block:IndexPage}
{Photoset-250}


{/block:IndexPage}

{block:PermalinkPage}
<div class="photoSet">{Photoset-700}</div>

{/block:PermalinkPage}
</div>
{/block:Photoset}



{block:Quote}
<i>"{Quote}"</i>
{block:Source}
<div align="right">— {Source}</div>
{/block:Source}
{/block:Quote}

{block:Link}
<span style="font-size:12px;"><a href="{URL}" class="link" {Target}>{Name}</a></span>

{block:Description}
<div class="description">{Description}</div>
{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}

<ul>
{block:Lines}
<li style="list-style-type: none;margin-left:-40px;">
{block:Label}
<span style="font-weight:bold;">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}

{block:Video}
{Video-250}
{/block:Video}

{block:Audio}
{block:AlbumArt}
<img src="{AlbumArtURL}" width="{block:IndexPage}250px;{/block:IndexPage}{block:PermalinkPage}700px;{/block:PermalinkPage}">
<div class="audiobox"><Div style="width:25px;overflow:hidden;">{AudioPlayerWhite}</div></div>
{/block:AlbumArt}
{/block:Audio}


{block:IndexPage}<a href="{Permalink}"><div class="perm">{NoteCount}</div></a>{/block:IndexPage}
</div>

{block:PermalinkPage}<div style="width:700px;margin-left:auto;margin-right:auto;"><center>
{block:Caption}{Caption}<Br>{/block:Caption}{block:Date}{TimeAgo}, {NoteCountWithLabel}{/block:Date}<i>{block:HasTags}<br>{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}</i><br><div class="pn">{PostNotes}</div></center></div>
{/block:PermalinkPage}

{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}
<!-- {block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom} -->
{/block:Posts}
</div></div></div>

</body>
</html>

thank you!

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)