The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How do I keep my image within the column border? Tumblr, Posts that include usernames bleed over the column border on the right side
lonelybabes
post Aug 27 2018, 08:32 PM
Post #1





Group: Members
Posts: 1
Joined: 27-August 18
Member No.: 26,701



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:25 PM