The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Making photos/gifs fit (tumblr HTML help)
stay-sharp
post Mar 13 2012, 09:54 PM
Post #1





Group: Members
Posts: 1
Joined: 13-March 12
Member No.: 16,696
I need some help making images fit onto my page; sometimes when I post an image, the dimensions are too big and so it creates a kind of overlapping look that I really dislike, if you look here you'll see what I mean: http://stay-sharp.tumblr.com/

It would be amazing if you could help me out, my theme is below. Thanks so much in advance xx

<head> <!-- DEFAULT VARIABLES -->

<meta name="color:background" content="#F7F7F7" />
<meta name="color:entry" content="#FFFFFF" />
<meta name="color:text" content="#3F3F3F">
<meta name="color:link" content="#4B4B4B" />
<meta name="color:link hover" content="#000000" />
<meta name="font:body" content="georgia" />

<meta name="if:Endless Scrolling" content="0" />
<meta name="if:Fade Images" content="0" />
<meta name="if:Hide Captions" content="1" />

<meta name="text:Custom Link One" content="" />
<meta name="text:Custom Link One Title" content="" />
<meta name="text:Custom Link Two" content="" />
<meta name="text:Custom Link Two Title" content="" />
<meta name="text:Custom Link Three" content="" />
<meta name="text:Custom Link Three Title" content="" />
<meta name="text:Custom Link Four" content="" />
<meta name="text:Custom Link Four Title" content="" />

<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}" />{/block:Description}

<style type="text/css">
::-webkit-scrollbar-thumb:vertical {
background-color:#CCC;
height:100px;
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#FFF;
height:10px !important;
}
::-webkit-scrollbar {
height:10px;
width:5px;
background-color:#fff;
}

.border {margin: 2 auto 8px; margin-top:4px; width: 80%; height: 1px; background:{color:background}; background: -webkit-gradient(linear, left top, right bottom, from(#ffffff), color-stop(.5, {color:background}), to(#ffffff)); background: -moz-linear-gradient(0deg, #ffffff, {color:background}, #ffffff);}

{block:IfFadeImages}
img{ -webkit-transition: opacity 0.7s linear; opacity: 1;}
img:hover{ -webkit-transition: opacity 0.7s linear; opacity: .80; }
{/block:IfFadeImages}

body{ background-color:{color:background}; color:{color:Text}; font-family:{font:body}; font-size:12px; line-height: 12px; text-align:justify;}
a:link, a:active, a:visited{ color: {color:link}; text-decoration:none; -moz-transition: 0.8s ease-in; -webkit-transition: 0.8s ease-in; -o-transition: 0.8s ease-in; transition: 0.8s ease-in;}
a:hover{ color:{color:link hover}; text-decoration:underline; -moz-transition: 0.8s ease-in; -webkit-transition: 0.8s ease-in; -o-transition: 0.8s ease-in; transition: 0.8s ease-in;}
h1, big{ color:{color:title}; font-family:{font:title}; font-size:18px; line-height:30px; letter-spacing:-1px; font-weight:normal; text-transform:; margin:0px; padding:0px; text-align:left;}
h3{ color:{color:title}; font-family:{font:title}; font-size:10px; line-height:14px; letter-spacing:1px; font-weight:normal; margin:0px; padding:0px; margin-bottom:-0px;
text-align:left;}

.title {color:{color:text}; font-family:elephant; font-size:20px; font-style:italic; line-height:10px; letter-spacing:1px; text-align:center; text-transform:lowercase; padding-top:15px; padding-bottom:7px; padding-right:10px; padding-left:10px;}
.title a:hover{text-decoration:none;}
.ptitle {color:{color:text}; font-family:times new roman; font-size:12px; font-weight:bold; font-style: italic; }

#header{width:550px; background-color:{color:background}; margin:auto; position:absolute; z-index: 3;}
.disphoto {background-image: url({PortraitURL-96}); -moz-border-radius: 38px; -webkit-border-radius: 60px; width: 96px; height: 96px; margin: 10px;}

#center{ width:450px; background:{color:entry}; padding-right:10px; padding-left:10px; padding-top:3px; margin-top:-10px; margin-bottom:10px; margin:auto;}
#entry{ width:450px; padding-bottom:5px;}

.perma { text-align:right; }
.perma a { font-family:times new roman; font-size:10px; font-weight:bold; font-style:italic; color:{color:text}; cursor:default; }
.perma a:hover{ text-decoration:none; color:{color:link hover}; }
.holder { background-color:{color:entry};}

.quote {font-family:times new roman; font-size:12px; font-weight:bold; font-style:italic; padding-bottom:2px; }
.source {text-align:right; padding-bottom:3px;}
.audio {width: 445px; background-color:#E4E4E4; padding:3px; -webkit-box-shadow: 3px 3px 3px #dcdcdc;}
div.video embed, div.post div.video object { width:320px !important; height:200px !important;}
.question {background-color:#E2E2E2; padding:2px;}

#textperma {background-color:{color:entry}; font-color:{color:text}; margin-left:460px; opacity:0; position:absolute; z-index:3; padding:3px; -moz-transition: 0.8s ease-in; -webkit-transition: 0.8s ease-in; -o-transition: 0.8s ease-in; transition: 0.8s ease-in;}

.pagelinks a{text-transform:; font-size:9px; font-family:times new roman; text-align:right; padding-bottom:4px; padding-bottom:1px; padding-left:1px; padding-right:1px; color:{color:link};}
.pagelinks a:hover {background-color:{color:link hover}; color:{color:link}; }
#entry:hover #perma {display: block; opacity:1;}
#entry:hover #textperma {display:block; opacity:1;}
.layer1 {margin:auto; margin-top:7px; width: 550px; padding-right:10px; padding-left:10px; background-color:{color:header};}
.heading { background-color:{color:header}; margin:auto; margin-top:-5px; padding-bottom:5px; text-transform:lowercase;}
.content { padding-top:5px; margin:auto;}
.alignleft {float: left;}
.alignright {float: right;}
.right { margin: 0 0 px 0; padding: px; overflow:hidden; -moz-border-radius:3px; border-radius:3px; text-align: left; text-transform:; }
.totalright {float:right; margin-top:0px;}
#ask{ display:block; float: left; width:50px; overflow:hidden; word-wrap:break-word; margin-right:3px;}
div.video embed,
div.post div.video object {
width:450px !important;
height:300px !important;
}
blockquote{ background-color: {color:box}; padding: 7px; padding-left:8px; border-left:1px solid{color:background}; border-right:1px solid {color:background};
b, strong{color:{color:title};}
i, em {color:{color:text};}
p{margin-top:3px; margin-bottom:3px;}
blockquote img{display:block; width:100%;}
border-left: 2px solid #FAFAFA;
padding: 0 0 0 15px;
margin-left: 0px;
blockquote {position:relative; left:-5px; margin-top:0px; margin-right:0px; padding-right:0px;}
ul.chat, .chat ol, .chat li {list-style:none; margin:0px; padding:2px; }
.notes img{width:10px; position:relative; top:1px;}
ol.notes, .notes li{list-style:none; margin:0px; padding:0px;}
iframe input, iframe submit, iframe textarea, iframe div, iframe table {background-color:transparent!important;}
</style>

{block:IfEndlessScrolling}<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>{/block:IfEndlessScrolling}

<style type="text/css">{CustomCSS]</style>

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

<script>
$(document).ready(function(){
$(".perma").hide();
$(".holder").mouseenter(function (swing) {
$(".perma", this).slideDown("slow");
});
$(".holder").mouseleave(function (swing) {
$(".perma", this).slideUp("slow");
});
});
</script>

</head>

<body>

<div id="center">

<div class="title"><a href="/">{Title}</a></div>

<div style="word-spacing:5px;">
<Center><a href="/archive">1.</a> — <a href="/ask">2.</a> — <a href="/tagged/music">3.</a> — <a href="/tagged/me">4.</a>{block:IfCustomLinkOneTitle} — <a href="{text:Custom Link One}"> {text:Custom Link One Title}</a> {/block:ifCustomLinkOneTitle} {block:ifCustomLinkTwoTitle} —<a href="{text:Custom Link Two}"> {text:Custom Link Two Title}</a> {/block:ifCustomLinkTwoTitle} {block:ifCustomLinkThreeTitle} —

<a href="{text:Custom Link Three}"> {text:Custom Link Three Title}</a> {/block:ifCustomLinkThreeTitle} {block:ifCustomLinkFourTitle} —

<a href="{text:Custom Link Four}">{text:Custom Link Four Title}</a> {/block:ifCustomLinkFourTitle}</center>
</div>

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


<BR>
{block:IfEndlessScrolling}<div class = "autopagerize_page_element">{/block:IfEndlessScrolling}

{block:Posts}

<div id="entry">

<div class="holder">
{block:Text}
{block:Title}<div class="ptitle">{Title}</div>{/block:Title}
{Body}
<div class="perma">
<div style="border-top:1px dotted #EEE;"></div>
{TimeAgo} | <a href="{Permalink}">Permalink</a>
</div>
{/block:Text}
</div>

{block:Photo}
{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}" width="450px"/>{block:IndexPage}</a>{/block:IndexPage}
{block:IfNotHideCaptions}{Caption}{/block:IfNotHideCaptions}
{block:PermalinkPage}{LinkCloseTag}{block:IfHideCaptions}{block:Caption}{Caption
}{/block:Caption}{/block:IfHideCaptions}{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
{Photoset-500}
{/block:Photoset}

{block:Quote}
<div class="quote">{Quote}</div>
<div style="border-top:1px dotted #EEE;"></div>
<div class="source">{block:Source}{Source}{/block:Source} | <span style="font-family:times new roman; font-weight:bold; font-style:italic; font-size:10px;"> <a href="{Permalink}" title="{NoteCountWithLabel}">Permalink</a></span> </div>
{/block:Quote}

<div class="holder">
{block:Link}
<div id="textperma"><a href="{Permalink}" title="{NoteCountWithLabel}">IV</a></div>
<div class="ptitle"><a href="{URL}" {Target}>{Name}</a></div>
{block:Description}{Description}{/block:Description}
<div class="perma">
<div style="border-top:1px dotted #EEE;"></div>
{TimeAgo} | <a href="{Permalink}">Permalink</a>
</div>
{/block:Link}
</div>

<div class="holder">
{block:Chat}
{block:Title}{Title}{/block:Title}
<div class="lines">
{block:Lines}
<div class="line {Alt}">{block:Label}<b>{Label} </b>{/block:Label}{Line}</div>
{/block:Lines}
</div>
<div class="perma">
<div style="border-top:1px dotted #EEE;"></div>
{TimeAgo} | <a href="{Permalink}">Permalink</a>
</div>
{/block:Chat}
</div>

{block:Audio}
<div id="textperma">
<a href="{Permalink}" title="{NoteCountWithLabel}">{PlayCount} | Permalink<BR>
{block:ExternalAudio}<a href="{ExternalAudioURL}">Download</a>{/block:ExternalAudio}</a>
</div>
<div class="audio">{AudioPlayerGrey}</div>
<center>{block:Caption}{Caption}{/block:Caption}</center>
{/block:Audio}

<div class="video">
{block:Video}
{Video-500}
{block:Caption}{Caption}{/block:Caption}
{/block:Video}
</div>

<div class="holder">
{block:Answer}
<div class="question"><i>{Question}</i></div>
by <i>{Asker}</i>
{Answer}
<div class="perma">
<div style="border-top:1px dotted #EEE;"></div>
Asked {TimeAgo} | <a href="{Permalink}">Permalink</a>
</div>
{/block:Answer}
</div>

{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
{/block:Posts}
{block:IfNotEndlessScrolling}
<BR>
<div style="margin:auto; margin-top:-10px; font-size:14px; width:450px; background-color:{color:header}; "><div class="right">{block:PreviousPage}<a href="{PreviousPage}" title="newer entries"><<</a>{/block:PreviousPage} <div class="totalright">{block:NextPage}<a href="{NextPage}" title="older entries">>></a>{/block:NextPage}</div></div></span>
{/block:IfNotEndlessScrolling}

{block:IfEndlessScrolling}</div>{/block:IfEndlessScrolling}
<div style="position:fixed; bottom:3px; right:3px; font-size:10px; letter-spacing:0px; opacity:.8;;"><a href="http://sleepingtigers.tumblr.com/"><i>theme</i> </a></div>


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

</div>

</body>

</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

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

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th April 2024 - 12:14 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC