The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Minimizing Display Window Messes Up Coding, help fixing code
sjfishy
post 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>&nbsp;&nbsp;{block:ifhomelink}
{block:ifmessagelink}<a href="/ask">Message</a>&nbsp;&nbsp;{block:ifmessagelink}{block:ifarchivelink} <a href="/archive">Archive</a>&nbsp;&nbsp;{/block:ifarchivelink}
{block:ifsubmitlink}<a href="/submit">Submit</a>&nbsp;&nbsp;{block:ifsubmitlink}{block:iffirstcustomlink}<a href="{text:first custom link url}">{text:first custom link title}</a>&nbsp;&nbsp;{/block:iffirstcustomlink}
{block:ifsecondcustomlink}<a href="{text:second custom link url}">{text:second custom link title}</a>&nbsp;&nbsp;{/block:ifsecondcustomlink} {block:ifthirdcustomlink}<a href="{text:third custom link url}">{text:third custom link title}</a>&nbsp;&nbsp;{/block:ifthirdcustomlink}
{block:iffourthcustomlink}<a href="{text:fourth custom link url}">{text:fourth custom link title}</a>&nbsp;&nbsp;{/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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 29th March 2024 - 06:45 AM