Making photos/gifs fit (tumblr HTML help) |
Making photos/gifs fit (tumblr HTML help) |
stay-sharp |
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> |
Lo-Fi Version | Time is now: 26th April 2024 - 02:38 PM |