Minimizing Display Window Messes Up Coding, help fixing code |
Minimizing Display Window Messes Up Coding, help fixing code |
sjfishy |
Jul 14 2014, 03:21 AM
Post
#1
|
Group: Members Posts: 2 Joined: 14-July 14 Member No.: 21,248 |
When the Internet window is normal size the theme is correct, but when you make the display window smaller the theme moves to the left and becomes messed up. Here is the Tumblr: http://sigmakappacsulb.tumblr.com
Here is the code: <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script> <script src="toggle.js" type="text/javascript"><!--mce:1--></script> <script type="text/javascript"> $(document).ready(function(){ $(".description").hide(); $(".about").click(function(){ $('.description').slideToggle("fast"); return true; }); }); </script> <link href='http://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'> <meta name="color:Background" content="#ffffff" /> <meta name="color:Text" content="#333333" /> <meta name="color:Links" content="#555555"/> <meta name="color:Hover" content="#dad8d8"/> <meta name="color:Scrollbar" content="#F2F2F2"/> <meta name="color:Borders" content="#dad8d8"/> <meta name="color:Posts" content="#FFFFFF"/> <meta name="color:Content" content="#F2F2F2"/> <meta name="image:Background" content=""/> <meta name="image:Header" content=""/> <meta name="text:first custom link title" content=""/> <meta name="text:first custom link url" content=""/> <meta name="text:second custom link title" content=""/> <meta name="text:second custom link url" content=""/> <meta name="text:third custom link title" content=""/> <meta name="text:third custom link url" content=""/> <meta name="text:fourth custom link title" content=""/> <meta name="text:fourth custom link url" content=""/> <meta name="text:Title Font Size" content="60px"/> <meta name="text:Link hover title" content="+navigate"/> <meta name="if:first custom link" content="0"/> <meta name="if:second custom link" content="0"/> <meta name="if:third custom link" content="0"/> <meta name="if:fourth custom link" content="0"/> <meta name="if:Home link" content="1"/> <meta name="if:Message link" content="1"/> <meta name="if:Submit link" content="0"/> <meta name="if:Archive link" content="1"/> <meta name="if:Show Header Image" content="0"/> <meta name="if:Cross cursor" content="1"/> <meta name="if:Custom Font Title" content="1"/> <meta name="font:Body" content="Georgia"/> <meta name="font:Permalink" content="Courier New"/> <title>{Title}</title> <link rel="shortcut icon" href="{Favicon}"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> <link rel="shortcut icon" href="{Favicon}"> <title>Untitled Document</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"> {CustomCSS} p{ margin:0px; padding:0px; } #tumblr_controls{ position:absolute; margin-top:0px; margin-right:0px; } #tumblr_controls{ -webkit-transition: opacity 0.2s linear; opacity: 0.7; } #tumblr_controls:hover{ -webkit-transition: opacity 0.2s linear; opacity: 1; } a{ text-decoration: none; color:{color:links}; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; {block:ifcrosscursor} cursor: crosshair; {/block:ifcrosscursor} } a:hover{ color:{color:hover}; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; {block:ifcrosscursor} cursor: crosshair; {/block:ifcrosscursor} } body{ color:{color:Text}; background-color:{color:Background}; background-image:url({image:Background}); background-attachment: fixed; background-size: cover; background-repeat: repeat; font-size:10px; text-align: center; font-family: {font:Body}; line-height:9px; {block:ifcrosscursor} cursor: crosshair; {/block:ifcrosscursor} } #content{ margin: auto auto auto auto ; width:100%; top:0px; position:relative; {block:ifcrosscursor} cursor: crosshair; {/block:ifcrosscursor} } #content .posts{ width:952px; margin:auto; {block:ifcrosscursor} cursor: crosshair; {/block:ifcrosscursor} {block:PermalinkPage} width:650px; {/block:PermalinkPage} } #content .entry{ {block:IndexPage} width:220px; margin-right:3px; margin-left:3px; margin-bottom:6px; padding:0px; float:left; border-style:solid; border-width:1px; border-color:{color:Borders}; padding:5px; background-color:{color:Posts}; {block:ifcrosscursor} cursor: crosshair; {/block:ifcrosscursor} } {/block:IndexPage} {block:PermalinkPage} width:650px; {/block:PermalinkPage} } #content .entry img{ {block:IndexPage} max-width:220px; {/block:IndexPage} {block:ifcrosscursor} cursor: crosshair; {/block:ifcrosscursor} } .entry .perma { position: absolute; width: 92%; text-align: center; top:5px; opacity: 0; filter:alpha(opacity=0); z-index: 10000; background: rgba(255, 255, 255, 1); font-size: 10px; height: 14px; line-height: 14px; font-family: {font:Permalink}; text-transform: Uppercase; color:#000000; padding: 3px; border-style:solid; border-width:1px; border-color:{color:Borders}; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .entry:hover .perma{ opacity: 1; filter:alpha(opacity=100); } .perma:hover{ background: rgba(255, 255, 255, 100); } .perma a{ color:#000; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .perma a:hover{ color:{color:hover}; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .top{ width:564px; text-align:center; margin: -20px auto ; z-index:5000; margin-bottom:-30px; padding:38px; font-family: {font:Body}; {block:ifcrosscursor} cursor: crosshair; {/block:ifcrosscursor} } .h1{ font-family: {font:Body}; display:block; font-size:18px; letter-spacing: 2px; line-height:18px; text-align: center; margin-bottom: 10px; } .h2{ font-size:20px; letter-spacing: 1px; line-height:17px; font-family: {font:Body}; } .h3{ font-size:{text:Title Font Size}; line-height:20px; text-align:center; {block:ifcustomfonttitle} font-family: 'Allura', cursive; {/block:ifcustomfonttitle} {block:ifnotcustomfonttitle} font-family: {font:Body}; {block:ifnotcustomfonttitle} } .h4{ font-size:9px; line-height:20px; text-align:center; text-transform: uppercase; letter-spacing:1px; font-family: {font:Body}; } .h5{ font-size:10px; line-height:8px; text-align:center; font-family: {font:Body}; } .h6{ font-size:10px; line-height:10px; font-weight:bold; text-align:center; font-family: {font:Body}; letter-spacing:1px; } .h7{ font-size:12px; line-height:10px; font-weight:bold; text-align:center; font-family: {font:Body}; letter-spacing:1px; } .notes{ width:640px; padding-left:0px; text-align:left; } .nav{ text-align:center; margin-top:0px; margin-bottom:0px; font-family: {font:Body}; } .permalink{ font-size:10px; text-align:right; font-family: {font:Body}; margin-top:10px; border-top-style:solid; border-width:1px; padding-top:4px; border-color:{color:Borders}; } .quote{ font-size:17px; line-height:20px; text-transform:none; margin-bottom:5px; font-family: {font:Body}; } .audio{ {block:IndexPage} width:208px; {/block:IndexPage} {block:PermalinkPage} width:650px; {/block:PermalinkPage} background-color:{color:Posts}; padding:5px; margin-bottom:0px; } .audiocap, .videocap{ display:block; padding:10px; } .albumart, .albumart img{ {block:IndexPage} width:220px; {/block:IndexPage} {block:PermalinkPage} width:650px; {/block:PermalinkPage} } div.video embed, div.post div.video object { {block:IndexPage} width:250px !important; height:150px !important; {/block:IndexPage} {block:PermalinkPage} width:500px !important; height:400px !important; {/block:PermalinkPage} } .question{ font-weight:normal; margin-bottom:5px; font-size:12px; display:block; font-family: {font:Body}; } .nav { font-size:10px; } .asker{ font-family: {font:Body}; font-size:12px; } .answer{ padding:5px; font-size:12px; font-family: {font:Body}; color: {color:text}; border-top-style: solid; } a {color:;text-decoration:none;-webkit-transition: all 0.7s ease-out;-moz-transition: all 0.7s ease-out;transition: all 0.7s ease-out;} .fufu {width:227px;-webkit-transition: all 0.7s ease-out;-moz-transition: all 0.7s ease-out;transition: all 0.7s ease-out;} .fufu:hover {-webkit-transform: translate(1em,0);-moz-transform: translate(1em,0);-o-transform: translate(1em,0);} #biter #bite a {display:block} #bite .death {margin-top:10px; margin-bottom:5px;filter: alpha(opacity = 0);opacity:0;-webkit-transition: all 0.7s ease-out;-moz-transition: all 0.7s ease-out;transition: all 0.7s ease-out;} #bite:hover .death {margin-top:10px; -webkit-transition: all 0.7s ease-out;-moz-transition: all 0.7s ease-out;transition: all 0.7s ease-out; filter: alpha(opacity = 100);filter: alpha(opacity = 100);opacity:100;} ::-webkit-scrollbar-thumb:vertical { background-color:{color:Scrollbar}; height:100px; } ::-webkit-scrollbar-thumb:horizontal { background-color:{color:Scrollbar}; height:10px; } ::-webkit-scrollbar { height:10px; width:8px; border-left-style:solid; border-width:1px; border-color:{color:Scrollbar}; background-color:{color:background}; } </style> <script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script> <script type="text/javascript" src="http://static.tumblr.com/imovwvl/rSGl20lfv/masonry.js"> </script> <script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script> <script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script> <script type="text/javascript"> $(window).load(function () { $('.posts').masonry(), $('.masonryWrap').infinitescroll({ navSelector : "div#navigation", // selector for the paged navigation (it will be hidden) nextSelector : "div#navigation a#nextPage", // selector for the NEXT link (to page 2) itemSelector : ".entry", // selector for all items you'll retrieve bufferPx : 10000, extraScrollPx: 11000, loadingImg : "", loadingText : "<em></em>", }, // call masonry as a callback. function() { $('.posts').masonry({ appendedContent: $(this) }); } ); }); </script> <script type="text/javascript">$(window).load(function(){$("p").remove(":contains('Source:')");});</script></head> <body> <div class="top"> {block:ifshowheaderimage} <a href="/"><img src="{image:header}" width=500px></a> {/block:ifshowheaderimage} <br><br> {block:ifnotshowheaderimage} <span class="h3"><a href="/">{Title}</a></span><br><br><br><br><br> {/block:ifnotshowheaderimage} <div align="center"> {block:ifhomelink}<a href="/">Home</a> {block:ifhomelink} {block:ifmessagelink}<a href="/ask">Message</a> {block:ifmessagelink}{block:ifarchivelink} <a href="/archive">Archive</a> {/block:ifarchivelink} {block:ifsubmitlink}<a href="/submit">Submit</a> {block:ifsubmitlink}{block:iffirstcustomlink}<a href="{text:first custom link url}">{text:first custom link title}</a> {/block:iffirstcustomlink} {block:ifsecondcustomlink}<a href="{text:second custom link url}">{text:second custom link title}</a> {/block:ifsecondcustomlink} {block:ifthirdcustomlink}<a href="{text:third custom link url}">{text:third custom link title}</a> {/block:ifthirdcustomlink} {block:iffourthcustomlink}<a href="{text:fourth custom link url}">{text:fourth custom link title}</a> {/block:iffourthcustomlink} </span> </center> </div></i> </div> </div> </div></div></div></div></div> <div id="content"> <div class="posts"> {block:Posts} <div class="entry"> {block:Text} {block:Title}<span class="h1">{Title}</span>{/block:Title} {Body} {block:IndexPage}<div class="permalink"><a href="{Permalink}">{NoteCountWithLabel}</a> / <a href="{ReblogURL}" target="_blank">Reblog</a><div>{/block:IndexPage}</span></div></div> {block:PermalinkPage}<div style="margin-left:350px;"</div>{/block:PermalinkPage} {/block:Text} {block:Photo} {block:IndexPage} <div class="perma"><a href="{Permalink}">{24Hour}:{Minutes}</a> / <a href="{Permalink}">{NoteCountWithLabel}</a> / <a href="{ReblogURL}">Reblog</a></div> <a href="{block:ContentSource}{SourceURL}{/block:ContentSource}" target="_blank"><img src="{PhotoURL-400}" alt="{PhotoAlt}" width="220"/></a> {/block:IndexPage} {block:PermalinkPage} {LinkOpenTag} <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="650"/></a> {LinkCloseTag} {/block:permalinkpage} {/block:Photo} {block:Photoset} {block:IndexPage}<div class="perma"><a href="{Permalink}">{24Hour}:{Minutes}</a> / <a href="{Permalink}">{NoteCountWithLabel}</a> / <a href="{ReblogURL}">Reblog</a></div> <div style="max-width:220px; max-height:220px; overflow-y:hidden; overflow-x hidden; opacity:0.8;"</div>{Photoset-400}</a>{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {block:PermalinkPage}<div style="margin-left:350px;"</div>{/block:PermalinkPage}</div> {/block:Photoset} {block:Quote} <div class="quote"><b><i>"</i></b>{Quote}<b><i>"</i></b> </div> {block:Source}<small>{Source}</small>{/block:Source} {block:IndexPage}<div class="permalink"><a href="{Permalink}">{NoteCountWithLabel}</a> / <a href="{ReblogURL}" target="_blank">Reblog</a><div>{/block:IndexPage}</span></div></div> {block:PermalinkPage}<div style="margin-left:350px;"</div>{/block:PermalinkPage} {/block:Quote} {block:Link} <a href="{URL}"{Target}><span class="h2"> +{Name}</span></a> {block:IndexPage}<div class="permalink"><a href="{Permalink}">{NoteCountWithLabel}</a> / <a href="{ReblogURL}" target="_blank">Reblog</a><div>{/block:IndexPage}</span></div></div>{block:PermalinkPage}<div style="margin-left:350px;"</div>{/block:PermalinkPage} {/block:Link} {block:Video} <div class="video"> {block:IndexPage}<a href="{Permalink}"><img src="http://static.tumblr.com/ykziu7r/Ps1ma4t7s/untitled.png" height="70px" width="70px" title="Video Post"></a>{/block:IndexPage} {block:PermalinkPage}{Video-500}{/block:PermalinkPage} </div> {block:IndexPage}<div class="permalink"><a href="{Permalink}">View Video Post</a><div>{/block:IndexPage}</span></div></div><div class="videocap"><a href="{Permalink}"></a></div>{/block:IndexPage} {block:PermalinkPage}<div style="margin-left:350px;"</div><div class="videocap"></div>{/block:PermalinkPage} {/block:Video} {block:Chat} {block:Title} <div class="ptitle">{Title}</div> {/block:Title}{block:Lines}{block:Label}<b>{Label}</b> {/block:Label}{Line}<br>{/block:Lines} {block:IndexPage}<div class="permalink"><a href="{Permalink}">{NoteCountWithLabel}</a> / <a href="{ReblogURL}" target="_blank">Reblog</a><div>{/block:IndexPage}</span></div></div>{block:PermalinkPage}<div style="margin-left:350px;"</div>{/block:PermalinkPage} {/block:Chat} {block:Audio} {block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></a></div>{/block:AlbumArt} <div class="audio">{AudioPlayerWhite}</div> {block:IndexPage}{block:Caption}<div class="audiocap"><a href="{Permalink}">{Caption}</a></div>{/block:Caption}{/block:IndexPage} {block:PermalinkPage}{block:Caption}<div class="audiocap">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{block:PermalinkPage}<div style="margin-left:350px;"</div>{/block:PermalinkPage} {/block:Audio} {block:Answer} <div class="asker">{Asker} said:</a><div class="question"><br>{Question}</div></div><div class="answer"><i>{Answer}</i></div> {block:IndexPage}<div class="permalink"><a href="{Permalink}">{NoteCountWithLabel}</a><div>{/block:IndexPage}</span></div></div> {block:PermalinkPage}<div style="margin-left:350px;"</div>{/block:PermalinkPage} {/block:Answer} {block:PermalinkPage}<div class="notes"> {block:Caption}{Caption}{/block:Caption} Posted on {Month} {DayofMonth}{DayofMonthSuffix} at {12Hour}:{Minutes} {CapitalAMPM} <br>Has a total of: {NoteCount} Notes {block:PostNotes}<br><br><div style="border-width:1px; border-style:solid; border-color:{color:text}; text-align:left; max-height: 200px; width:648px; overflow: auto; overflow-x: hidden;">{PostNotes}</div>{/block:PostNotes}</div> {/block:PermalinkPage} </div> {/block:Posts} </div> </div> {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} <div style="position:fixed; bottom:5px; color: {color:links}; right:5px; font-size:36px; line-height:17px; opacity:0.6; background-color:{color:content}; border-radius:999px; padding:6px; font-family:Times New Roman;"><a href="http://lsaac.tumblr.com">+</a></div> <div style="right: 3px; top: 26px; opacity:0.7; position:absolute;"><a href="http://lsaac.tumblr.com"><img src="http://static.tumblr.com/ykziu7r/dGgm6nq81/install_theme.png"/></a></div> <div style="position:fixed; top:0px; left:154px; background-color:{color:Content}; width:965px; height:100%; z-index:-1;"></div> </div> </div> </div> </div> </div> </body> </html> </body> |
Darin McGrew |
Jul 20 2014, 03:05 PM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
QUOTE When the Internet window is normal size the theme is correct, but when you make the display window smaller the theme moves to the left and becomes messed up. That looks like a feature of the theme. As I shrink the window, the images become tiny thumbnails, and then if I shrink it past a certain point, it gives up and displays only a single column of images. |
Lo-Fi Version | Time is now: 29th March 2024 - 06:45 AM |